[TypeScript] 콜백 함수 활용 함수 - forEach(), map(), filter()

콜백 함수

자바스크립트는 함수도 하나의 자료형이기 때문에 매개변수로 함수를 전달할 수 있다.
이렇게 매개변수로 전달하는 함수를 콜백(callback) 함수라고 말한다.

그리고 동시에 제어권도 함께 전달하는 함수이다.
콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해서 

이 콜백 함수를 적절한 시점에 실행한다.

---

콜백 함수를 활용하는 함수

자바스크립트가 기본적으로 제공하는 함수 중에서도 콜백 함수를 활용하는 함수가 많다.
어떠한 형태로 콜백 함수를 활용하는지 알아보자.

• forEach()
• map()
• filter()

---

📌 제어권 - 매개변수

위의 메소드들의 공통점은 콜백 함수가 매개변수로 value, index 를 사용한다는 것.
콜백 함수를 위임 받은 각 함수(forEach, map, filter)는 

콜백 함수의 매개변수도 이용할 수 있다는 말이다.
인자에 어떤 값들을 어떤 순서로 넘길 것인지에 대한 제어권을 갖기 때문에
이를 "콜백 함수의 제어권 중 하나인 매개변수를 위임받는다" 라고 표현할 수 있다.

 

---

forEach()

forEach(콜백 함수) 배열 메소드는 

배열 내부의 요소를 사용해서 콜백 함수를 호출해준다.

배열의 요소의 갯수 만큼 순회한다.

const numbers = [8, 3, 5];
 
numbers.forEach(function (value, index) {
	console.log(`${index}번째 요소 ${value}`);
});
// 0번째 요소 8
// 1번째 요소 3
// 2번째 요소 5

---

map()

map(콜백 함수) 배열 메소드는 

콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만든다.

호출한 결과를 모아 새로운 배열을 반환한다.

만약 callback함수에서 리턴을 하지 않는다면 undefined 배열 생성

let numbers = [8, 3, 6]; 

numbers = numbers.map(function (value) {	
	return value * value; // 제곱
}); 

console.log(numbers) // [64, 9, 36]

---

filter()

filter(콜백 함수) 배열 메소드는 

콜백 함수에서 리턴하는 값이 true인 값들만 모아서 새로운 배열을 만든다.

주어진 함수의 조건을 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

let numbers = [8, 0, 5];
 
numbers = numbers.filter(function (value) {
	return value % 2 === 0; // 짝수만 골라냄
});
 
console.log(numbers) // [8, 0]

 

그리고 위에서 다룬 메소드들을 포함해서 말하자면
콜백함수들을 화살표 함수를 이용해 아래와 같이 쉽게 입력할 수도 있다.

numbers = numbers.filter((value) => value % 2 === 0);

 

---