4. 콜백 함수 | 코어 자바스크립트

위키북스의 "코어 자바스크립트(정재남)"를 읽고 나름대로 정리를 하려고 한다.

4. 콜백 함수

1. 콜백 함수란?

다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다.

2. 제어권

콜백함수는 제어권을 다음 두가지의 제어권을 넘겨받는다고 보면 된다.

1. 호출 시점
   • setInterval 예시가 있었다.
2. 인자들의 순서
   • 바꿔도 소용 없다.

콜백함수의 this는 별도로 지정해주지 않은 이상 전역 객체를 바라본다. 사용자가 임의로 바꾸고 싶은 경우에는 콜백 함수 내에서 call을 사용하면 될 것이다.

3. 콜백 함수는 함수다

아무리 객체 안의 함수를 콜백 함수로 사용해도, this가 전역 객체를 바라본다.

4. 콜백 함수 내부의 this에 다른 값 바인딩

var self = this

뭐 이런식으로 할 수 있다고 한느데, 이거는 사실 this르 사용하지도 않고 별로라고 한다.

그래서 그냥 bind를 해서 콜백을 넘겨주는 것이 좋다고 한다.

5. 콜백 지옥과 비동기 제어

콜백 지옥은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당할 수 없게 깊어지는 것을 말한다.

이벤트 처리나 서버 통신과 같이 비동기 작업을 하는 곳에서 이런 것이 자주 발생하는데, 이는 값을 전달하는 순서가 아래에서 위로 향하는 등의 문제로 가독성이 떨어진다.

해결법들

• 기명함수로 변환
  • 사실 이게 나한텐 익숙하지만, 웹 하는 놈들은 못마땅하다고 한다. 변수를 할당하는 것이 별로라나...
• promise
  • return new promise 와 같은 형태로 쓰인다.
  • 함수 내부에 resolve, reject가 있으면, 둘 중 하나가 실행되기 전까지는 then이나 catch로 넘어가지 않는다고 한다. 즉, 비동기 작업이 완료될 때 resolve같은 것을 호출하는 방법이라고 한다.
  • 써봤는데, 괜찮은 것 같다.
• generator
  • function* 문법이 나온다.
  • Generator 함수를 실행하면 Iterator 객체가 반환된다고 한다. 여기다가 next를 호출하면 가장 먼저 등장하는 yield를 만날 때 까지 실행한다. 즉, 비동기 작업이 완료되는 시점마다 next를 호출하면 된다고 한다.
• async/await
  • 이게 가장 최신 기술인듯?!
  • 비동기 작업을 수행하고자 하는 함수 앞에 async를 표기하고, 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 표기하는 것 만으로도 뒤의 내용을 Promise로 자동 전환하고, 해당 내용이 resolve된 이후에 다음으로 넘어간다.