콜백함수
자바스크립트는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 콜백함수라고 한다.
자바스크립트는 코드를 위에서 아래로 순차적으로 실행한다. 그러나 코드는 순차적으로 실행되지 않을 수도 있다. 이런걸 비동기 프로그래밍이라고 한다. 비동기 프로그래밍의 등장으로 자바스크립트의 문법적 가치를 인정받아 지금까지 자바스크립트는 중요한 언어로 꼽히고 있다.
콜백은 태스크가 끝나기 전에 함수가 실행되지 않는 것을 보장한다. 또한 비동기 자바스크립트 코드를 작성할 수 있도록 해주고, 여러문제와 에러들로부터 안전하게 지켜주는 역할을 한다.
자바스크립트에서 콜백 함수를 만드는 방법은 어떤 함수의 파라미터로써 함수를 넘기고 어떤 행위나 태스크가 완료된 직후에 콜백 함수를 호출하는 것이다.
// 함수를 선언합니다.
function callThreeTimes (callback) {
for (let i = 0; i < 3; i++) {
callback(i)
}
}
function print (i) {
console.log(`${i}번째 함수 호출`)
}
// 함수를 호출합니다.
callThreeTimes(print)
//0번째 함수 호출
//1번째 함수 호출
//2번째 함수 호출특히 배열에서 콜백 함수를 자주 볼 수 있는데, 배열 메소드의 내부로 함수가 전달되는 것이다. 배열에서 콜백 함수와 함께 자주 활용되는 메소드는 forEach(), map(), filter() 이다.
forEach()
forEach() 메소드는 콜백 함수를 인자로 받아서 배열의 원소 각각에 대해 콜백함수를 호출해준다. 즉, 배열 전체를 돌면서 요소 전체에 대해 반복적인 작업을 수행하도록 해준다.
function callback(value, index, array) { }
const numbers = [273, 52, 103, 32, 57]
numbers.forEach(function (value, index, array) { //매개변수로 value, index, array를 갖는 콜백 함수를 사용합니다.
console.log(`${index}번째 요소 : ${value}`)
})
0번째 요소: 273
1번째 요소: 52
2번째 요소: 103
3번째 요소: 32
4번째 요소: 57
map()
map() 메소드도 배열이 갖고 있는 함수이다. forEach()와 유사한데, 차이점은 map()은 콜백함수로부터 return 받은 것을 기반으로 새로운 배열을 만들어 return한다는 점이다.
map() 메소드는 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수이다. 다음 코드에서는 콜백 함수 내부에서 value * value를 하고 있으므로 모든 배열의 요소를 제곱한 새로운 배열을 만든다.
//배열을 선언합니다.
let numbers = [273, 52, 103, 32, 57]
//배열의 모든 값을 제곱합니다.
numbers = numbers.map(function (value, index, array) { //매개변수로 value, index, array를 갖는 콜백 함수를 사용합니다.
return value * value
})
//출력합니다.
numbers.forEach(console.log) //매개변수로 console.log 메소드 자체를 넘겼습니다.
74529 0 Array(5)
2704 1 Array(5)
10609 2 Array(5)
1024 3 Array(5)
3249 4 Array(5)콜백 함수 내부에서 value * value를 하고 있으므로 모든 배열의 요소를 제곱한 새로운 배열을 만든다.
filter()
filter()메소드는 map()메소드와 유사하다. 배열에서 호출되고, 함수를 인자로 받고, 새로운 배열을 return하기 때문이다.
차이점은 filter()에 전달된 함수는 테스트 용도로 사용되고, 테스트를 통과한 배열의 항목만 새 배열에 포함된다는 것이다.
원본은 그대로고 새로운 배열이 생성된다.
const names = ['David', 'Richard', 'Veronika'];
const shortNames = names.filter(function(name) {
return name.length < 6;
});
console.log(names) //(3) ['David', 'Richard', 'Veronika']
console.log(shortNames)//['David']마무리
querySelectorAll을 사용해서 forEach 같은 걸 자주 돌렸었는데, 콜백함수라는 개념은 모르고 사용했었다. 아직도 완벽하게 이해가 된건 아니지만, 그래도 매개변수 어떤걸 넣어서 어떤식으로 사용하면 되는지는 약간(?) 감이 잡혔다. 이거랑 함께 reduce()도 많이 사용한다고 하니 알고리즘을 풀면서 좀 더 이해해봐야겠다. 화이링🙋🏼♀️