JavaScript - 콜백 함수 & 재귀함수

콜백함수 및 재귀함수

콜백함수

다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수 를 말합니다.
그리고, 함수를 만들때, parameter 를 함수로 받아서 쓸 수 있는데 그 함수는 callback입니다.

---

재귀함수

함수가 자신을 다시 호출하는 구조로 만들어진 함수입니다.
재귀함수는 종료조건이 있어야 하며, 종료조건을 설정해주지 않으면 무한 반복을 하게됨니다.
재귀함수로 작성이 되는 코드는 반복문으로도 작성할 수 있습니다.

콜백함수 예제

function func() {
    console.log("콘솔이 실행되었습니다.1");
}
function callback(str) {
    console.log("콘솔이 실행되었습니다.2");
    str();
}
callback(func);

결과 확인하기

콜백함수 반복문 예제

function callback(num) {
    console.log("hi");
    for (let i = 1; i <= 10; i++) {
        num(i);
    }
    console.log("hi");
}
callback(func);

결과 확인하기

콜백함수 비동기/동기 예제

동기방식은 순차적으로 동작하는 방식 요청을 보낸 후 해당 응답을 받아야 다음 동작을 실행하며 이 동작이 끝날때까지 다음 동작은 대기상태입니다.
비동기방식은 순차적으로 진행하지 않는 방식 요청을 보내고 응답에 관계없이 바로 다음 동작을 실행합니다.

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() {
    setTimeout(() => {
        console.log("funcD가 실행되었습니다.");
    }, 1000);
}
funcA(function () {
    funcB(function () {
        funcC(function () {
            funcD();
        });
    });
});

결과 확인하기

재귀함수 예제

함수가 자신을 다시 호출하는 구조로 만들어진 함수입니다.
재귀함수는 종료조건이 있어야 하며, 종료조건을 설정해주지 않으면 무한 반복을 하게됩니다.
재귀함수로 작성이 되는 코드는 반복문으로도 작성할 수 있습니다.

function func(num) {
    if (num <= 1) {
        console.log("함수가 실행되었습니다. " + num);
    } else {
        console.log("함수가 실행되었습니다. " + num);
        func(num - 1);
    }
}
func(10);

//애니메이션
function animation() {
    console.log("함수가 실행되었습니다.");
    requestAnimationFrame(animation); //1초에 60번 실행
}
// animation();

결과 확인하기