함수 유형 03

함수 유형 03

함수유형 3번째 시간입니다. 난이도 높은 함수가 슬슬 등장합니다.

---

01. 즉시 실행 함수

{
    (() =>{
        document.write("함수실행");
    })();
}

결과보기

함수실행

---

02. 파라미터함수

{
    // 파라미터함수
    function func(str = "함수가 실행"){
        document.write(str);
    }
    func();
}

결과보기

함수가 실행

---

03. arguments 함수

{
    // auguments함수
    function func(a, b){
        document.write(arguments[0])
        document.write(arguments[1])
    }
    func("함수가실행", "함수가 실행");
}

결과보기

함수가실행
함수가 실행

---

04. 재귀함수 : 자기 자신을 호출

{
    // 23. 재귀함수
    {
    // 반복적으로
        function func(num){
            if( num<= 1 ){
                document.write("함수가 실행되었습니다." + num);
            } else {
                document.write("함수가 실행되었습니다." + num);
                func(num - 1);
            }
        }
        func(10);
    // 애니메이션
        // function func(){
        //     document.write("함수가 실행되었습니다.");

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

결과보기

함수가 실행되었습니다.10함수가 실행되었습니다.9함수가 실행되었습니다.8함수가 실행되었습니다.7함수가 실행되었습니다.6함수가 실행되었습니다.5함수가 실행되었습니다.4함수가 실행되었습니다.3함수가 실행되었습니다.2함수가 실행되었습니다.1

---

05. 콜백함수 : 다른 함수에 인수로 넘겨지는 함수

{
    // 24. 콜백함수
    {
        function func(){
            document.write("함수가 실행되었습니다.2");
            
        }
        function callback(str){
            document.write("함수가 실행되었습니다.1");
            str();
        }
    //  재귀 : 동시에 여러개 실행
    //  콜백 : 첫번째 함수가 실행 -> 두번째 함수가 실행
        callback(func);
    }
}

결과보기

함수가 실행되었습니다.1함수가 실행되었습니다.2

---

06. 콜백함수 반복문

{
    // 25. 콜백함수 10번반복
    {
        function func(index){
            document.write("함수가 실행되었습니다." + index);
        }

        function callback(num){
            for( let i=1; i<=10; i++){
                num(i);
            }
        }

        callback(func);
    }
}

결과보기

함수가 실행되었습니다.1함수가 실행되었습니다.2함수가 실행되었습니다.3함수가 실행되었습니다.4함수가 실행되었습니다.5함수가 실행되었습니다.6함수가 실행되었습니다.7함수가 실행되었습니다.8함수가 실행되었습니다.9함수가 실행되었습니다.10

---

07. 콜백함수 : 동기/비동기

{
    // 26. 콜백 함수 : 동기/비동기
    {
        function funcA() {
            document.write("funcA가 실행되었습니다.");
        }
        function funcB() {
            document.write("funcB가 실행되었습니다.");
        }
        funcA();
        funcB();

        function funcA() {
            setTimeout(() => {
                console.log("funcA가 실행되었습니다.");
            },1000);
        }
        function funcB() {
            console.log("funcB가 실행되었습니다.");
        }
        funcA();
        funcB();
        // B->A

        function funcA(callback) {
            setTimeout(() => {
                console.log("funcA가 실행되었습니다.");
                callback();
            }, 1000);
        }
        function funcB() {
            console.log("funcB가 실행되었습니다.");
        }
        funcA(function(){
            funcB();
        })
        // A->B
        
        function funcA(callback) {
            setTimeout(() => {
                console.log("funcA가 실행되었습니다.");
                callback();
            }, 1000);
        }
        function funcB(callback) {
            setTimeout(() => {
                console.log("funcB가 실행되었습니다.");
                callback();
            }, 1000);
        }
        function funcC(callback) {
            setTimeout(() => {
                console.log("funcC가 실행되었습니다.");
                callback();
            }, 1000);
        }
        function funcD(callback) {
            setTimeout(() => {
                console.log("funcD가 실행되었습니다.");
            }, 1000);
        }

        funcA(function(){
            funcB(function(){
                funcC(function(){
                    funcD();
                });
            });
        });
    }
}

결과보기

---

08. 내부 함수 : 스코프, 클로져

{
    // 28. 스코프, 클로져
    {
        function func(){
            function funcA(){
                document.write("함수가 실행되었습니다.")
            };
            funcA();
            function funcB(){
                document.write("함수가 실행되었습니다.")
            };
            funcB();
        }
        func();
    }
}

결과보기

함수가 실행되었습니다.함수가 실행되었습니다.

---

09. 클래스

{
    // 29
    {
        class study {
            constructor(num, name, job){
                this.num = num;
                this.name = name;
                this.job = name;
            }

            result(){
                document.write(this.num + ". 내 이름은" + this.name + "이며, 직업은" + this.job + "입니다."); 
            }
        }

        const info1 = new study("1", "웹쓰", "웹퍼블리셔");
        const info2 = new study("2", "웹스토리보이", "프론트앤드 개발자");
        
        info1.result();
        info2.result();
    }
}

결과보기

1. 내 이름은웹쓰이며, 직업은웹쓰입니다.2. 내 이름은웹스토리보이이며, 직업은웹스토리보이입니다.

---

10. 클래스 상속

{
    // 30 클래스 상속
    {
        class study {
            constructor(num, name, job){
                this.num = num;
                this.name = name;
                this.job = name;
            }

            result(){
                document.write(this.num + ". 내 이름은" + this.name + "이며, 직업은" + this.job + "입니다."); 
            }
        }

        class study2 extends study {
            constructor(num, name, job, age){
                super(num, name, job);
                this.age = age;
            }
            result2(){
                document.write(this.num + ". 내 이름은" + this.name + "이며, 직업은" + this.job + "이며 나이는." + this.age + "살 입니다."); 

            }
        }

        const info1 = new study("1", "웹쓰", "웹퍼블리셔");
        const info2 = new study2("2", "웹스토리보이", "프론트앤드 개발자", 100);
        
        info1.result();
        info2.result();
        info2.result2();
    }
}

결과보기

1. 내 이름은웹쓰이며, 직업은웹쓰입니다.2. 내 이름은웹스토리보이이며, 직업은웹스토리보이입니다.2. 내 이름은웹스토리보이이며, 직업은웹스토리보이이며 나이는.100살 입니다.