재귀,콜백,스코프/클로저,클래스에 대한 정리

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

재귀함수란? 자기 자신을 호출시켜주는 함수입니다!

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

func(10);

//애니메이션
function animation(){
    document.write("함수가 실행되었습니다.");
    
    requestAnimationFrame(animation);
}
animation();

결과보기

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

콜백함수

콜백함수는 하나의 함수가 실행되고 두번째 함수를 실행 가능한 함수입니다.

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

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

결과보기

콜백함수 : 반복문

콜백함수를 반복문을 사용해 반복 할 수 있는 방법을 말합니다.

//웹사이트 이미지 로딩이 순서대로 나온것과 비슷
    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

콜백함수 : 동기/비동기

콜백함수의 동기/비동기 이며, 여기서 동기는 동시에 실행 가능함을 말합니다.

function funcA(callback){
    setTimeout(()=>{
        console.log("funcA가 실행되었습니다.
");
        callback();
    },1000);
}
function funcB(){
    setTimeout(()=>{
        console.log("funcB가 실행되었습니다.
");
        callback();
    },1000);
}
function funcC(){
    setTimeout(()=>{
        console.log("funcC가 실행되었습니다.
");
        callback();
    },1000);
}
function funcD(){
    setTimeout(()=>{
        console.log("funcD가 실행되었습니다.
");
    },1000);
}
// 출력 되기 전에 콜백함수를 통해 출력 값을 뒤바꿈
// 1초 뒤에 funcA가 실행되었을때 funcB를 불러들임
funcA(function(){
    funcB(function(){
        funcC(function(){
            funcD();
        });
    });
});

결과보기

funcA가 실행되었습니다.
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.

스코프, 클로저

함수 안에 또 다른 함수를 선언한게 내부함수이며, 스코프는 어느 범위까지 참조되는지를 뜻하고 클로저는 함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 이 스코프에 접근 가능하게 합니다.

//28번
    function func(){
        function funcA(){
            console.log("함수가 실행되었습니다.");
        };
        funcA();

        function funcB(){
            console.log("함수가 실행되었습니다.");
        };
        funcB();
    }
    func();
}

결과보기

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

클래스

클래스는 함수의 집합체로 구성되어 있습니다!

class study{
    constructor(num, name){
        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. 내 이름은 웹스토리보이이며, 직업은 프론트앤드 개발자입니다.

클래스 상속

클래스 상속을 사용하면 클래스를 다른 클래스로 확장 가능하며, 기존에 존재하던 기능을 토대로 새로운 기능을 만들 수 있어요!

class study{
    constructor(num, name){
        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;
    }

    result(){
        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. 내 이름은 웹스토리보이이며, 직업은 프론트앤드 개발자이며 나이는 100세 입니다.2. 내 이름은 웹스토리보이이며, 직업은 프론트앤드 개발자이며 나이는 100세 입니다.