[JavaScript] 배열의 고차 배열

MinJae·2024년 9월 25일

JavaScript

Javascript

목록 보기

11/15

💡 고차함수

고차 함수(High-Order Function)는 함수를 인수로 전달받거나 함수를 반환하는 함수입니다.

자바스크립트는 고차 함수를 다수 지원합니다. 특히 배열은 매우 유용한 고차 함수를 제공합니다.

sort

배열의 요소를 정렬합니다.

const fruits = ['Banana', 'Orange','Apple'];

fruits.sort();

console.log(fruits); // ['Apple', 'Banana', 'Orange']

sort 메서드는 기본적으로 오름차순으로 요소를 정렬하고 원본 배열을 직접 변경합니다.
sort 메서드를 사용하여 오름차순으로 정렬한 후 reverse 메서드를 사용하면 내림차순으로 정렬이 됩니다.

const nums = [10, 4, 20, 9, 11];

// 오름차순
nums.sort((a, b) => a - b);

// 내림차순
// nums.sort((a, b) => b - a);

console.log(nums); // [4, 9, 10, 11, 20]

문자열과 다르게 숫자 요소를 정렬할 때는 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 합니다. 비교 함수의 반환값이 0보다 작으면 비교 함수의 첫 번째 인수를 우선 정렬, 0보다 크면 두 번째 인수를 우선하여 정렬합니다. 0이면 정렬하지 않습니다.

forEach

for 문을 대체할 수 있는 고차 함수입니다.

const nums = [1, 2, 3];
const pows = [];

nums.forEach(item => pows.push(item ** 2));

console.log(pows);  // [1, 4, 9]

위 예제에서 forEach 메서드는 nums 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출합니다. nums 배열의 요소가 3개이므로 콜백 함수도 3번 호출됩니다.

map

자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출합니다. 콜백 함수의 반환값들로 구성된 새로운 배열을 반환합니다.

const nums = [1, 4, 9];

const roots = nums.map(item => Math.sqrt(item));

console.log(roots);  // [1, 2, 3]

map 메서드는 원본 배열을 변경하지 않습니다.

❗️ forEach 메서드와 map 메서드의 공통점은 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다는 것입니다. 하지만 forEach 메서드는 언제나 undefined를 반환하고, map 메서드는 콜백 함수의 콜백 함수의 반환값들로 구성된 새로운 배열을 반환하는 차이가 있습니다.

즉, forEach 메서드는 단순히 반복문을 대체하기 위한 고차 함수이고, map 메서드는 요소값을 다른 값으로 매핑한 새로운 배열을 생성하기 위한 고차 함수입니다.

filter

주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 합니다.

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);

console.log(result);  // ["exuberant", "destruction", "present"]

reduce

배열의 모든 요소를 순회하며, 각 요소에 대해 콜백 함수를 실행한 결과를 누적하여 하나의 최종 결과값을 반환합니다.

const arr = [1, 2, 3, 4];

const sum = arr.reduce(
  (accumulator, currentValue, index, array) => accumulator + currentValue, 0);

console.log(sum);  // 10

위 예제는 1부터 4까지의 누적을 구하는 코드입니다.