[JS문법 종합반] 4주차_콜백 함수와 제어권

오늘의 학습내용 :  콜백 함수

◆ 콜백 함수

콜백(callback), 또는 콜백 함수(callback function)는 전달인자로 다른 함수에 전달되는 함수이다.  보통 어떠한 동작을 완료하기 위해 외부 함수 내부에서 호출되고, 콜백을 넘겨받는 코드는 필요에 따라 콜백을 즉시 실행하거나, 나중에 실행하는 등 함수에 대한 제어권을 갖는다. (참고: MDN Web Docs)  콜백 함수를 호출할 때는 동기적 방법과 비동기적 방법이 있는데, 이는 4주차 강의 마지막에 더 자세히 배우게 될 것이다. 4주차 강의를 듣는 동안 이 콜백 함수 때문에 이래저래 멘탈이 많이 흔들렸다

// forEach()
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

 

콜백 함수를 직접 만들어서 사용할 수도 있지만, 사실 콜백 함수는 이전에도 다양한 메서드를 통해 이미 접해 봤던 개념이다. 개중forEach() 는 배열이 갖고 있는 함수로써 배열 내부의 요소를 사용해서 콜백 함수를 호출할 수 있다.

 

◆ 콜백 함수: 호출 시점과 인자에 대한 제어권

콜백 함수는 다른 코드에게 인자로 넘겨줄 때 제어권도 함께 위임한다고 했다. 구체적으로 어떤 제어권을 넘기는가?

 

① 호출 시점

var count = 0;

var timer = setInterval(function() {
	console.log(count);
	if(++count > 4) clearInterval(timer);
}, 300);

var count = 0;
var cbFunc = function () {
	console.log(count);
	if (++count > 4) clearInterval(timer);
};
var timer = setInterval(cbFunc, 300);

// 실행 결과
// 0 (0.3sec)
// 1 (0.6sec)
// 2 (0.9sec)
// 3 (1.2sec)
// 4 (1.5sec)

 

② 인자

// map 함수에 의해 새로운 배열을 생성해서 newArr에 담는다.
var newArr = [10, 20, 30].map(function (currentValue, index) {
	console.log(currentValue, index);
	return currentValue + 5;
});
console.log(newArr);

// 실행 결과
// 10 0
// 20 1
// 30 2
// [ 15, 25, 35 ]

 

질문 & 더 알아보기

: 콜백 함수는 왜 필요한가?

자바스크립트는 위에서부터 아래로, 순차적으로 실행하는 프로그래밍 언어다. 하지만 그렇지 않을 때도 있고, 코드가 다른 작업이 끝난 뒤에 실행될 때도 있는데, 이것이 비동기 프로그래밍이다. 콜백은 비동기 자바스크립트를 작성할 수 있도록 하는 동시에, 어떤 작업이 끝나기 전에 함수가 실행되지 않도록 하여 비동기 프로그래밍에서 발생할 수 있는 여러 문제를 막는다. 또, 가독성과 코드 재사용성 측면에서도 사용될 수 있다.

 

오늘의 소감

TMDB API를 이용한 개인 과제를 수행하던 중 async / await 에 대한 복습이 필요함을 느껴 4주차 강의로 돌아왔다. 그동안 자바스크립트 문법 기본 강의에서 배웠던 내용들을 본격적으로 활용하는 것이 과제의 주요 목표임을 다시 한 번 알게 되었고, 필요할 때면 언제든 강의로 돌아와서 필요한 자료들을 읽어보고 원하는 기능에 적용할 수 있었다. 조금 더 구체적인 이유는,

Day 6 : async / await 로 API 호출 리팩터링

TMDB에서 기본으로 제공하는 Promise chaining 기반의 API 호출 코드를 async / await 문법으로 리팩터링하세요.

 

도전반 로드맵 때문이었다... 팀원들과 이야기하던 도중에 걷기반 과제뿐만 아니라 도전반 과제도 캠프를 진행하는 동안 결국에는 배우고 사용할 줄 알아야 할 내용들이라는 조언을 들었고, 그래서 도전반 로드맵의 요구사항도 하나씩 적용하기 시작했다. 보다 읽기 쉽고, 유지 보수성이 좋은 코드로 리팩터링해보는 과정에서 비동기 작업을 직관적으로 처리하는 방법을 익힐 수 있었다. 이제 async와 await를 사용해서 API 데이터를 처리하는 흐름을 이해했다! 머리 아프지만 좋다ㅎㅎ