[JS] 배열 고차함수 (Higher order function)

배열 고차함수 (Higher order function)

인자로 함수를 받거나 (콜백함수), 함수를 반환하는 함수를 고차 함수(Higher order function)라 부른다.
배열에는 대표적으로 forEach, filter, map , reduce.. 등 제대로 알고 쓰면 유용한 고차함수가 많이있다.
자주 쓰이는 고차함수의 인자, 반환값에 대해 알아보고자 한다.

Array.prototype.forEach((value, index, array) => {})

• 배열을 순회하며 각 요소에 하여 인자로 주어진 콜백함수를 실행한다.
• 반환값은 undefinde이다. ( 순회만 할 뿐, 무엇을 반환하지는 않는다는 의미 => map과의 차이점)
• 콜백함수의 매개변수로 array의 요소값, 요소 인덱스, forEach 메소드를 호출한 배열을 받는다.
• forEach는 원본 배열을 변경하지 않는다.
• break문을 사용할 수 없다.
• for문에 비해 성능이 좋지 않지만, 가독성이 좋으므로 사용을 권장한다.

const array = [1, 2, 3, 4, 5, 6];
array.forEach((num) => console.log(num)); // 1~6까지 차례대로 출력

// forEach는 반환값이 undefined.
const each = array.forEach((num) => console.log(num));
console.log(each); // undefined

Array.prototype.map((value, index, array) => {})

• 배열을 순회하며 각 요소에 대해 인자로 주어진 콜백함수의 반환값으로 매핑을 하여, 새로운 배열을 반환한다.
• 콜백함수의 매개변수로 array의 요소값, 요소 인덱스, map 메소드를 호출한 배열을 받는다.

// 주어진 배열 안의 '찌개'를 '국'으로 교체한다고 할 때.
const array = ["밥", "찌개", "피자", "감자", "찌개", "고기", "찌개"];

const replace = array.map((food) => (food === "찌개" ? "국" : "찌개"));
console.log(repalce); // ['찌개', '국', '찌개', '찌개', '국', '찌개', '국']

Array.prototype.filter((value, index, array) =>{})

• 배열에서 특정 조건을 만족하는 요소들만 필터링하여 새로운 배열을 만들고자 할 때 사용하고, 원본 배열은 변경되지 않는다.
• 콜백함수의 매개변수로 array의 요소값, 요소 인덱스, filter 메소드를 호출한 배열을 받는다.

// 주어진 배열에 특정 요소가 몇개 있는지 카운트하기
// 메시는 몇 번 있을까?
const array = ["호날두", "메시", "손흥민", "메시", "홀란드", "살라"];

const count = array.filter((player) => player === "메시");
console.log(count); // 2

Array.prototype.reduce((accumulator, value, index, array) => {}, initialValue)

• 배열의 요소들을 축적시켜 값을 하나로 만들고자 할 때 사용한다.
• 콜백함수의 매개변수로 콜백의 이전 반환값(누적값) ,array의 요소값, 요소 인덱스, reduce 메소드를 호출한 배열을 받는다.
• initialValue를 설정하면 accumulator의 초기값이다.

// 5보다 큰 숫자들의 평균
const array = [4, 55, 2, 6, 4, 8, 9];
const avg = array
  .filter((num) => num > 5)
  .reduce((avg, num, _, arr) => avg + num / arr.length, 0);

console.log(avg); // 19.5

Array.prototype.sort(compareFunction (a, b) => number)

• 배열의 요소들을 정렬하기 위해 사용, 원본 배열을 직접 변경한다.
• 문자열 형태를 기준으로 정렬하기 때문에, 숫자를 정렬할 때 주의해야 한다.

// 요소가 숫자일 경우, 문자열 형태로 변환되었다가 정렬되기 때문에 10이 먼저 오게됨.
const numbers = [0, 5, 4, 2, 1, 10];
numbers.sort();
console.log(numbers); // [0, 1, 10, 2, 4, 5]

numbers.sort((a, b) => a - b);
// < 0 a가 작다는 의미이기 때문에 a가 앞으로 정렬, 오름차순
// > 0 b가 작다는 의미이기 때문에 b가 앞으로 정렬, 내림차순

Reference

자바스크립트 마스터리 (ES6+ 최신 문법)

모던 자바스크립트 Deep Dive- 배열 고차 함수