[JavaScript] 콜백 함수

콜백 함수 ( Callback Function )

---

함수 안에 실행하는 또 다른 함수이며 파라미터로 함수를 전달하는 함수이다.

또한 함수 이름없이 익명으로 전달이 가능한 함수를 말한다.

function introduce (lastName, firstName, callback) {
    var fullName = lastName + firstName;
    
    callback(fullName);
}
 
function hello (name) {
    console.log("제 이름은 " + name + "입니다");
}
 
function bye (name) {
    console.log("지금까지 " + name + "이었습니다.");
}
 
introduce("나", "지만", hello);
//제 이름은 나지만입니다
 
introduce("나", "지만", bye);
//지금까지 나지만이었습니다.

 

다른 동작을 수행하는 함수를 정의해두고 파라미터로 사용하면, 다른 동작들을 수행하는 것이 가능하다.

함수를 나눠줌으로써 코드의 재사용성이 극대화되며, 관리에 용이하다.

 

 

 

사용 원칙

---

1. 익명함수 사용

함수의 내부에서 실행되기 때문에 익명으로 사용이 가능하다.

let goat =["돌격", "막걸리", "아티스트"]
 
goat.forEach((i,idx)=>{
    console.log(idx + ":" + i);
});

 

2. 함수의 이름만 넘기기

함수를 콜백함수로 사용할 경우, 함수의 이름만 넘겨주면 된다.(함수를 인자로 사용할 때 ()를 붙일 필요가 없다.)

function whosYourDaddy(name, callback){
    console.log("우리 아부지 성함은 " + name +"입니다");
    callback();
}

function test(){
    console.log("니 내 아나?");
}

whosYourDaddy('김철수', test);

 

 

 

콜백 함수 주의사항 - this를 사용 시

---

콜백함수에서의 this는 기본적으로 값에 의한 호출(call by value)을 하기 때문에, window객체를 가리킨다.

const userData = {
    signUp: '2023-01-19 23:23:23',
    id: 'mag123c',
    name: 'what',
    setName: function(firstName, lastName) {
        this.name = firstName + ' ' + lastName;
    }
}

function getUserName(firstName, lastName, callback) {
    callback(firstName, lastName);
}
 
getUserName('Kim', 'ChulSoo', userData.setName);
 
console.log(userData.name); // Not Set
console.log(window.name); // Kim ChulSoo

call과 apply를 사용하여 this를 보호하자.

(...생략...)
function getUserName(firstName, lastName, callback) {
    callback.call(obj, firstName, lastName);
}
 
getUserName('Kim', 'ChulSoo', userData.setName, userData);
 
console.log(userData.name); // Kim ChulSoo

(...생략...)
function getUserName(firstName, lastName, callback) {
    callback.apply(obj, [firstName, lastName]);  //apply는 파라미터를 배열로 전달한다.
}
 
getUserName('Kim', 'ChulSoo', userData.setName, userData);
 
console.log(userData.name); // Kim ChulSoo

 

 

 

콜백 Hell

---

콜백 지옥 : 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 수준으로 깊어지는 현상

비동기 방식의 장점은 다른 요청이 중단되지 않는다는 점이다.

하지만 비동기 호출이 자주 일어나는 경우 콜백 지옥이 발생한다.

step1(function(value1){
    step2(value1, function(value2){
        step3(value2, function(value3){
            step4(value3. function(value4){
                step5(value4, function(value5){
                    step6(value5, function(value6){
                        step7(value6, function(value7){
                            step8(value7, function(value8){
                                step9(value8, function(value9){
                                    step10(value9, function(value10));
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});

 

 

 

 

https://ko.wikipedia.org/wiki/%EC%BD%9C%EB%B0%B1

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98