[JavaScript] 콜백 (Call back) & 콜백 지옥(Callback Hell)

콜백 함수(Callback Function)란 ?

다른 함수에 매개변수로 넘겨준 함수를 말한다. 매개변수로 넘겨 받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다.

function check(count, link, goto) {
  count < 3 ? link() : goto();
}

function linkYoutube() {
  console.log('1일 3깡은 기본입니다. 아래 링크를 통해 깡을 시청해주세요');
  console.log('https://youtu.be/xqFvYsy4wE4');
}

function goToSleep() {
  console.log('오늘 할당량은 모두 채우셨습니다! :)')
}

checkGang(2, linkYoutube, goToSleep);

• 총 3가지 함수를 선언
• linkYoutube, goToSleep 함수는 콜백함수
• check 함수가 먼저 호출되고, count 값에 따라 나머지 두 함수가 호출됨

---

콜백 함수 사용 원칙

1. 익명의 함수 사용

콜백 함수는 이름이 없는 익명의 함수를 사용한다. 함수 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다

---

2. 함수의 이름만 넘기기

Js는 null과 undefined 타입을 제외하고 모든 것을 객체로 다룬다.
함수를 변수 or 다른 함수의 변수처럼 사용할 수 있다. 함수를 콜백함수로 사용할 경우, 함수의 이름만 넘겨주면 된다.

function printName(name, callback) {
	 console.log(name);
  	 callback();
}

function printHello() {
 	console.log('Hello World'); 
}

printName('park Young Jae' , printHello);

---

콜백함수 주의할 점

단순히 함수의 인자에 익명 함수를 쓰면 되겠다고 생각되기 쉽지만, 자바스크립트의 콜백 함수 이용에는 주의점이 있다.

1. this를 이용한 콜백함수

let userData = {
    id: 'okvv26',
    name: 'Not Set',
    setName: function(firstName, lastName) {
        this.name = firstName + ' ' + lastName;
    }
}

function getUserName(firstName, lastName, callback) {
    callback(firstName, lastName);
}

getUserName('PARK', 'Young-Jae', userData.setName);

console.log('1: ', userData.name); // Not Set
console.log('2: ', window.name); // PARK Young-Jae

첫 번째 console.log의 값이 PARK Young-Jae 이기를 기대했지만, Not Set이 출력된다. setName()에서 사용된 this 객체가 window라는 글로벌 객체를 가리키기 때문이다. 따라서 this를 보호할 수 있도록 콜백함수를 만들어야 한다.

---

...

function getUserName(firstName, lastName, callback, obj) {
    callback.call(obj, firstName, lastName); // - (1)
}

getUserName('PARK', 'Young-Jae', userData.setName, userData); //	- (2)

console.log(userData.name);

<output>
PARK Young-Jae

(2) 에서 마지막 인자인 userData는 (1)에서 call함수의 첫번째 인자로 전달된다.
즉, call()에 의해 userData에 this 객체가 매핑된다.

---

...

function getUserName(firstName, lastName, callback, obj) {
    callback.apply(obj, [firstName, lastName]); // 인자가 배열
}

getUserName('PARK', 'Young-Jae', userData.setName, userData);

console.log(userData.name);

<output>
PARK Young-Jae

• 인자를 배열로 전달한다는 점만 다르고 동일하게 작동함

---

콜백 지옥(Callback Hell)

비동기 호출이 자주 일어나는 프로그램의 경우 콜백 지옥이 발생한다 콜백 지옥이란 함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들어질 정도로 깊어지는 현상이다.