[20221112] 콜백함수를 활용한 Array 내장 함수들 : forEach(), map(), filter()

오늘 배운 것

• 함수를 하나의 자료형으로 취급하는 언어에서 함수는 일급객체 (first-class function)라고 부르며, 함수를 하나의 자료형으로 취급하기 때문에, 함수를 변수에 할당하거나, 다른 함수의 매개변수 (콜백)로 사용할 수 있음 

First-class Function - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

 

• forEach()는 Array의 내장 함수로, 단순히 배열 내부의 요소를 사용해서 콜백함수를 호출함
• map() 또한 Array의 내장 함수이지만, forEach()와는 달리, 콜백 함수에서 return한 값들을 기반으로 새로운 배열을 만들어 줌
  • 아래 예제에서는 map()을 통해 새로운 배열을 return 하였고, forEach()를 사용해 배열의 요소를 하나씩 호출하여 콘솔에 값을 찍어 줌

let numbers = [2, 5, 10, 57];

numbers = numbers.map(function (value, index, array) {
  return value * value;
});

/*화살표 함수 표기
numbers = numbers.map((value) => value*value)
*/

numbers.forEach(console.log);
// 4 0 [ 4, 25, 100, 3249 ]
// 25 1 [ 4, 25, 100, 3249 ]
// 100 2 [ 4, 25, 100, 3249 ]
// 3249 3 [ 4, 25, 100, 3249 ]

 

• filter()도 마찬가지로 Array의 내장함수이며, 콜백 함수에서 return한 값이 true인 경우인 요소들만 모아 새로운 배열로 만들어 줌

const numbers = [2, 5, 10, 57, 78];

const evenNumbers = numbers.filter(function (value) {
  return value % 2 === 0;
});

/* 화살표 함수 표기법
const evenNumbers = numbers.filter((value) => value % 2 ===0)
*/

console.log(`원래 배열 : ${numbers}`);  // 원래 배열 : 2,5,10,57,78
console.log(`짝수 배열 : ${evenNumbers}`);  // 짝수 배열 : 2,10,78

 

• 메소드 채이닝: 어떤 매소드가 리턴하는 값을 기반으로 함수를 줄줄이 사용하는 방법

let numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

numbers
  .filter((value) => value % 2 === 0)
  .map((value) => value * value)
  .forEach((value) => console.log(value));

 

오늘 느낀 점

• 지난번 백틱 안에서 루프 돌기 포스팅을 작성할 때는 map()과 forEach()의 차이를 잘 몰랐다. 오늘 책을 통해 천천히 각 매소드의 특성을 배우고 나니 이해가 잘 되는 느낌이다.