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

배열 고차 함수란?

배열 고차 함수란 배열을 다루는 함수 중 하나로, 다른 함수를 인수로 받거나 함수를 반환하는 함수로,

주요 배열 고차 함수에는 map, filter, reduce, forEach, some, every 등이 있습니다.

이러한 함수들은 반복문을 사용하지 않고도 배열을 조작 및 변환할 수 있어, 코드의 간결함과 가독성 향상에 도움이 됩니다.

 

 

---

 

1. map

배열을 순회하며 배열의 각 요소에 대해 주어진 함수를 호출한 결과로 새로운 배열을 반환.

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((num) => num * num);
// squaredNumbers = [1, 4, 9, 16, 25]
// 원본 numbers 배열을 변경하지 않음.

 

2. filter

배열을 순회하며 각 요소에 대해 인자로 주어진 함수의 조건을 만족하는 요소들로 이루어진 새로운 배열을 반환.

배열에서 특정 조건으로 필터링하여 새로운 배열을 만들 때 사용하며, if문 대체 가능.

→ 주어진 콜백함수의 실행 결과가 true인 요소의 값만을 추출.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
// evenNumbers = [2, 4]
// 원본 numbers 배열을 변경하지 않음.

 

3. reduce

배열을 순회해 각 요소에 대해 이전의 콜백함수 실행 반환 값을 전달해 콜백함수를 실행하고 하나의 결과값을 반환.

→ 합산, 최소/최대값, 평균 등 계산식에 사용.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
// sum = 15가 됩니다. 초기값 0부터 시작하여 각 요소를 더함
// 원본 numbers 배열을 변경하지 않음.

 

4. forEach

배열을 순회하며 배열의 각 요소에 대해 주어진 함수를 실행하며, 반환값은 없음 (= undefined)

forEach 메소드는 for 문 대신 사용할 수 있지만 break를 할 수 없음.
→  foreach는 원본 배열(this)를 변경하지 않지만, foreach에서 사용된 콜백 함수 function(item)은 원본 배열을 변경.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => console.log(num));
// 콘솔에 1, 2, 3, 4, 5가 순서대로 출력

 

5. some

배열의 요소 중에서 주어진 함수의 조건을 만족하는 요소가 하나라도 있는지 검사하여 true 또는 false를 반환.

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some((num) => num % 2 === 0);
// hasEvenNumber = true
// 원본 numbers 배열을 변경하지 않음.

 

6. every

배열의 모든 요소가 주어진 함수의 조건을 만족하는지 검사하여 true 또는 false를 반환.

const numbers = [1, 2, 3, 4, 5];
const allEvenNumbers = numbers.every((num) => num % 2 === 0);
// allEvenNumbers = false
// 원본 numbers 배열을 변경하지 않음.

 

7. find

주어진 판별 함수를 만족하는 배열의 첫 번째 요소의 값을 반환합니다. 만족하는 요소가 없으면 undefined를 반환.
→ find의 결과값은 해당 요소 값.

const numbers = [1, 2, 3, 4, 5];
const evenNumber = numbers.find((num) => num % 2 === 0);
// evenNumber = 2

 

8. findIndex

주어진 판별 함수를 만족하는 배열의 첫 번째 요소의 인덱스를 반환하며, 만족하는 요소가 없으면 -1을 반환.
→ find의 결과값은 해당 요소 값.

const numbers = [1, 2, 3, 4, 5];
const evenNumberIndex = numbers.findIndex((num) => num % 2 === 0);
// evenNumberIndex = 1 (0부터 시작하는 인덱스)

 

9. sort

배열의 요소를 정렬하는 메서드로, 원본 배열을 직접 변경하며 정렬된 배열을 반환.

→ 숫자를 정렬할 때는 정확한 순서를 얻으려면 비교 함수를 제공해야 함.

const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort((a, b) => a - b);
// numbers = [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]