Winnie The Pooh Bear 코딩일기

배움기록

코딩일기

코딩은 처음이라 2023. 3. 16. 19:02

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형

한달째 매일매일 코딩중

학원 다니기 전엔 집에서 진짜 가만~~히 만 있었는데

 

갑자기 공부하려니까 너무 힘들고~

힘들어도 해야지 

모르니까 해야지 하면서

하다보니 어느새 

하루라도 쉬면 안될 것 같고

해서 매일 책상에 앉아서 보긴 하는데도

잘 모르겠고..

 

저만..그런거 아니죠..?😂

 

공부하는 법을 몰라..

일단 암기해야되는데 암기머리도 없워...

악!🤯

 

다들 어떻게들 그렇게 잘하시는건가요

 

하다보면 나도

나중엔 지금 하던것들이 쉬워질까 정말

 

 

 

 

 

일단 오늘 배운것들 정리!✨

객체 생성자 함수

객체를 생성하기 위한 함수.

이 함수를 사용해 객체를 생성할 때, 일반적으로 템플릿과 같은 역할을 수행한다.

{
    function func(num, name, com){
        this.num = num;
        this.name = name;
        this.com = com;


        this.result = function(){
            document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`)
        }
    }
    //인스턴스
    const info1 = new func("100", "함수", "실행");
    const info2 = new func("200", "자바스크립트", "실행");
    const info3 = new func("300", "리엑트", "실행");

    //실행문
    info1.result();
    info2.result();
    info3.result();
}

객체 리터럴 함수

객체를 생성하는 방법 중 하나로 중괄호 안에 key-value 쌍의 형태로 프리퍼티를 정의 하는 방법.

객체 리터럴 방식은 쉽고 간편하게 객체를 생성할 수 있고, 다양한 용도로 활용된다.

{
    function func(num, name, com){
        this.num = num;
        this.name = name;
        this.com = com;
    }
    func.prototype = {
        result1: function(){
            document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`);
        }, 
        result2: function(){
            document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`);
        }, 
        result3: function(){
            document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`);
        } 
    }
    //인스턴스
    const info1 = new func("100", "함수", "실행");
    const info2 = new func("200", "자바스크립트", "실행");
    const info3 = new func("300", "리엑트", "실행");

    //실행문
    info1.result1();
    info2.result2();
    info3.result3();
}

즉시 실행 함수

객체를 생성할 때 사용되는 템플릿으로, 객체의 공통적인 속성과 메서드를 정의하는데 사용된다.

{
    // function func(){
    //     document.write("함수가 실행되었습니다.");
    // }
    // func();

    (function (){
        document.write("500.함수가 실행되었습니다.");
    })();

    (() => {
        document.write("501.함수가 실행되었습니다.");
    })();
}

화살표 함수로 변경되는 과정을 잘 알아두어야한다!

 

파라미터 함수

함수가 인수를 받아들이는 변수를 포함하는 함수를 말한다.

함수를 호출할 때 전달하는 인수가 함수의 파라미터를 통해 함수 내부로 전달되어 처리된다.

{
    function func(str = "600.함수가 실행되었습니다."){
        document.write(str);
    }
    func();
}

아규먼트 함수

인자로 받아들이는 함수를 말한다.

함수를 값으로서 다른 함수에 전달하여 사용하는 것이다.

{
    function func(str1, str2){
        document.write(arguments[0]);
        document.write(arguments[1]);//배열 설정하지 않았는데 자동으로 입력된
    }
    func("함수실행1","함수실행2");
}

재귀 함수 

자기 자신을 호출하는 함수이다.

함수를 호출하면 반복문을 사용하는 것보다 더 간결하고 가독성이 좋은 코드를 작성할 수 있다.

{
    function func(num){
        if(num<=1){
            document.write("함수가 실행되었습니다.");
        } else {
            document.write("함수가 실행되었습니다.");
            func(num-1);
        }
    }
    func(10);
    //요즘 쓰는 방식
    // function animation(){
    //     document.write("애니메이션이 실행되었습니다.");

    //     requestAnimationFrame(animation);
    // }
    // animation();
}

콜백함수

콜백함수는 다른 함수의 인수로 전달되는 함수이다.

이를 통해 함수의 동작을 조작하거나 확장할 수 있다.

어떤 함수에 콜백 함수를 전달하면 그 함수는 작업이 끝난 후에 콜백 함수를 호출하여 결과를 반환할 수 있다.

{
    // function func1(){
    //     document.write("1.함수 실행");
    // }
    // function func2(){
    //     document.write("2.함수 실행");
    // }
    // func1();
    // func2();

    function func(){
        document.write("2. 함수 실행");
    }
    function callback(str){
        document.write("1. 함수 실행");//이게 먼저 실행
        str();
    }
    callback(func);
}

 

 

 

 

 

다들 화이팅!

( •̀ ω •́ )✧

반응형