콜백함수 사용법

콜백함수란?

다른 함수의 인자로써 넘겨진 후 특정 이벤트에서 호출되는 함수를 말한다.

 

바로 예시로 들어가 보도록 하자

먼저 다음과 같이 이름을 인자로 인사말을 호출하는 함수를 만들어보자 

function yourName(name) {
    console.log(`${name}님 반갑습니다.`)
}
yourName(`영수`); // 영수님 반갑습니다.

 

위 함수를 arrow function을 이용해서 좀 더 간단하게 표현을 해보면 아래와 같이 한 줄로 처리할 수도 있다.

yourName = name => console.log(`${name}님 반갑습니다.`);
yourName('영희'); //영희님 반갑습니다.

 

그렇다면 만약 호출할 때 각각 이름마다 다른 인사말을 호출하고 싶다면?

이럴 때 callback 함수를 사용하면 된다.

function yourName(name, callback) { //yourName의 인자값으로 name과 callback을 받음
    callback(name); //callback값의 함수를 호출
}

function foreigner(friend) {
    console.log(`hello ${friend}`);
}

function korean(friend) {
    console.log(`${friend}님 안녕하세요?`);
}

 //인자값과 ,callback함수를 넘김
yourName('john', foreigner); //hello john
yourName('철수', korean); //철수님 안녕하세요?

※ 즉 함수를 호출할 때 인자 값과 마지막에 콜백 함수명을 넣고 호출한 후에 호출한 함수에 callback인자로 받은 함수를 호출하면 같은 함수를 호출했지만 callback함수에 따라 다른 결과를 가지게 된다. 여기서 인자 값을 callback으로 했지만 이름은 꼭 callback이란 이름이 아니여도 아무거나 상관없다.

 

위의 함수도 좀 더 간결하게 arrow function으로 표현해 보자

yourName = (name, callback) => callback(name);
foreigher = friend => console.log(`hello ${name}`);
korean = friend => console.log(`${friend}님 안녕하세요?`);

yourName('john', foreigner); //hello john
yourName('철수', korean); //철수님 안녕하세요?