개인 공부를 위해 작성했습니다

---

콜백 함수란?

콜백 함수(callback function)란, 다른 코드의 인자로 넘겨주는 함수

콜백 함수를 넘겨받은 코드는 이 콜백 함수에게 제어권을 넘겨 주며, 콜백 함수는 필요에 따라 적절한 시점에 실행한다.

---

:: ✨제어권

예제)

let count = 0;
const cbFunc = () => {
	console.log(count);
  	if (++count > 4) clearInterval(time);
};

const timer = setInterval(cbFunc, 300);
// 실행 결과
// 0 (0.3초)
// 1 (0.6초)
// 2 (0.9초)
// 3 (1.2초)
// 4 (1.5초)

예제를 통해 코드 실행 방식과 제어권을 살펴보면,

code	호출 주체	제어권
cbFunc();	사용자	사용자
setInterval(cbFunc, 300);	setInterval	setInterval

• setInterval이라고 하는 '다른 코드'에 첫 번째 인자로서 cbFunc 함수를 넘겨주자
• 제어권을 넘겨받은 setInterval이 스스로의 판단에 따라 적절한 시점에(0.3초 마다) 이 함수를 실행했다.
• 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가진다.
• 제어권을 넘겨받은 코드는 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지에 대한 제어권도 가진다.

---

:: ✔️콜백 함수도 함수다

const obj = {
	vals: [1, 2, 3],
  	logValues: (v, i) => {
    	console.log(v, i)
    };
};
obj.logValues(1, 2); // (1)
// {vals:[1, 2, 3], logValues: f} 1 2
[4, 5, 6].forEach(obj.logValues);  // (2)
// Window {...} 4 0			  
// Window {...} 5 1			  
// Window {...} 6 2

(1) 이름 앞에 점(.)이 있으니 메서드로서 호출
  ➔ 이 때의 this는 obj
(2) 함수만 전달 받은 것으로, obj와 연관이 없어진다.
  ➔ 이 때의 this는 전역 객체(window)

➔ 콜백 함수 내부의 this에 다른 값 바인딩하기

별도의 인자로 this를 받는 함수의 경우에는 원하는 값을 넘겨주면 되지만, 그렇지 않은 경우에는 this의 제어권도 넘겨주게 되므로 사용자가 임의로 바꿀 수 없다.

:: 콜백 함수 내부의 this에 다른 값을 바인딩 하는 방법

(1) 변수에 담기

(전통적인 방식) 잘 사용하지 않는다 ❌
콜백 함수로 활용할 함수에서는 this를 다른 변수에 담아 this 대신 그 변수를 사용하게 하고, 이를 클로저로 만드는 방식이 많이 쓰였다.

(2) bind 메서드 활용 +ES5

const obj = {
	name: 'yrKim',
  	func: () => console.log(this.name);
};

setTimeout(obj.func.bind(obj), 1000); 

const obj2 = { name: 'april' }
setTimeout(obj.func.bind(obj2), 1500); 

---

:: 🚩 콜백 지옥과 비동기 제어

콜백 지옥(callback hell)은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상으로 자바스크립트에서는 흔히 발생하는 문제..🥲🥲

➔ 비동기적인 코드: 즉시 실행이 ❌ 아닌,   별도의 요청, 실행 대기, 보류 등과 관련된 코드

(1) +ES6의 Promise를 이용한 방식

new Promise((resolve) => {
	setTimeout(() => {
              let name = '에스프레소';
              console.log(name);
              resoleve(name);
    }, 500)
})
  .then((prevName) => {
  	new Promise((resolve) => {
              setTimeout(() => {
                    let name = prevName + ', 아메리카노';
                    console.log(name);
                    resoleve(name);
              }, 500)
	})
  })
  .then((prevName) => {
      new Promise((resolve) => {
                setTimeout(() => {
                      let name = prevName + ', 카페라떼';
                      console.log(name);
                      resoleve(name);
     			}, 500)
      })
   })

• promise의 인자로 넘겨주는 콜백 함수는 호출할 때 바로 실행되지만
• 그 내부에 resolve 또는 reject 함수를 호출하는 구문이 있을 경우,
  • 둘 중 하나가 실행되기 전까지는 .then 또는 오류 구문 catch로 넘어가지 않는다
  • 비동기 작업이 완료될 때 resolve 또는 reject를 호출하는 방법으로 비동기 작업의 동기적 표현이 가능하다

(2) Promise + Async/await

const addCoffee = (name) => {
	return new Promise((resolve) => {
    	setTimeout((
        	resolve(name);
        ), 500);
    });
};

const coffeeMaker = async () => {
	let coffeeList = '';
    const _addCoffee = async (name) => {
    	coffeeList += (coffeeList ? ',' : '') + 
        await addCoffee(name);
    }
    await _addCoffee('에스프레소');
    console.log(coffeeList);
    await _addCoffee('아메리카노');
    console.log(coffeeList);
    await _addCoffee('카페라떼');
    console.log(coffeeList);
    await _addCoffee('카페모카');
    console.log(coffeeList);
};

coffeeMaker();

ES2017에서 등장한 Async/await는 가독성이 뛰어나고, 작성법이 간단하다는 장점이 있다.

• 비동기 작업을 수행하고자 하는 함수 앞에 async 키워드를 붙혀주고,
• 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await 키워드를 붙혀주면
• 뒤의 내용을 Promise로 자동 전환하고, 해당 내용이 resolve된 이후에 다음으로 진행한다.

즉, Promise의 .then과 흡사한 효과를 얻을 수 있다.

---

✨ tl;dr

• 콜백 함수는 다른 코드에 인자를 넘겨줌으로써 그 제어권도 함께 위임한 함수이다.
• 제어권을 넘겨받은 코드는
  1) 콜백 함수를 호출하는 시점을 스스로 판단해서 실행
  2) 콜백 함수를 호출할 때 인자로 넘겨줄 값들 및 그 순서가 정해져 있다. 이 순서를 따르지 않고 코드를 작성하면 엉뚱한 결과를 얻게 되니 주의!
  3) 콜백 함수의 this가 무엇을 바라보도록 할지가 정해져 있는 경우도 있는데, 정하지 않은 경우에는 전역객체(window)를 바라본다.
  • 사용자 임의로 this를 바꾸고 싶을 경우 bind 메서드를 활용하면 된다.
• 어떤 함수에 인자로 베서드를 전달하더라도 결국 함수로서 실행된다
• 비동기 제어를 위한 콜백 함수를 사용할 때엔 Promise + Async/await 을 이용하면 된다