배열 고차 함수
고차 함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다. 고차 함수는 외부 상태의 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다.
Array.prototype.sort
sort 메서드는 배열의 요소를 정렬한다. 기본적으로 오름차순으로 요소를 정렬한다.
1
2
3
4
5
6
7
const fruits = ['banana', 'orange', 'apple'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'orange']
숫자 요소의 배열을 정렬할 때 주의가 필요하다. sort 메서드는 배열의 요소가 숫자 타입이라 할지라도 배열의 요소를 일시적으로 문자열로 변환한 후 유니코드 코드 포인트의 순서를 기준으로 정렬한다. 따라서 숫자 요소를 정렬할 경우 sort 메서드에 정렬 순소를 정의하는 비교 함수를 인수로 전달해야 한다.
1
2
3
4
5
6
7
const points = [5, 4, 3, 2, 1];
// 숫자 배열의 오름차순 정렬, 비교 함수의 반환값이 0보다 작으면 a를 우선하여 정렬한다.
points.sort((a, b) => a -b);
console.log(points); // [1, 2, 3, 4, 5]
Array.prototype.forEach
forEach 함수는 for문을 대체할 수 있는 고차함수이다. forEach 함수는 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출한다.
1
2
3
4
5
6
7
const numbers = [1, 2, 3];
const pows = [];
numbers.forEach(i => pows.push(i ** 2));
console.log(pows); // [1, 4, 9]
forEach 메서드는 for 문과 달리 break, continue 문을 사용할 수 없다. 그리고 희소 배열의 경우 존재하지 않는 요소는 순회 대상에서 제외된다.
Array.prototype.map
map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값들로 구성된 배열을 반환한다. forEach 메서드와 마찬가지로 원본 배열은 변경되지 않는다.
1
2
3
4
5
6
7
8
const numbers = [1, 4, 9];
const roots = numbers.map(i => Math.sqrt(i));
console.log(roots); // [1, 2, 3]
console.log(numbers); // [1, 4, 9]
forEach 메서드와 map 메서드의 공통점은 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다는 점이다. 차이점은 forEach 메서드는 언제나 undefined를 반환하지만 map 메서드는 콜백 함수의 반환값으로 이루어신 새로운 배열을 반환한다는 점이다.
map 메서드가 생성하여 반환하는 새로운 배열의 length 프로퍼티 값은 map 메서드를 호출한 배열의 length 프로퍼티 값과 반드시 일치한다. 즉, map 메서드를 호출한 배열과 map 메서드가 생성하여 반환한 배열은 1:1 매핑한다.
Array.prototype.filter
filter 메서드는 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다. filter 메서드는 map 메서드와 달리 filter 메서드가 생성한 배열의 length 프로퍼티 값과 filter 메서드를 호출한 length 프로퍼티 값이 일치하지 않는다.
이러한 filter 메서드는 자신을 호출한 배열에서 특정 요소를 제거하기 위해 사용하기도 한다.
1
2
3
4
5
6
const numbers = [1, 2, 3, 4, 5];
const odds = numbers.filter(i = > i % 2);
console.log(odds); // [1, 3, 5]
Array.prototype.reduce
reduce 메서드는 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다. reduce 함수는 첫 번째 인수로 콜백 함수를, 두 번째 인수로 초기값을 전달받는다.
1
2
3
4
5
6
7
8
9
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
// acc 는 초기값 이후 콜백 함수의 반환값이 들어감
// cur 는 배열의 요소들이 차례로 들어감
console.log(sum); // 10
이러한 과정을 반복한 후 reduce 메서드는 하나의 값을 반환한다.
Array.prototype.some
some 메서드는 콜백 함수의 반환값이 한번이라도 참이면 true, 아니면 false를 반환한다. 단 some 메서드는 빈 배열의 경우 항상 false를 반환한다.
1
2
3
4
5
[1, 2, 3].some(i => i > 2); // true
[1, 2, 3].some(i => i < 1); // false
[].some(i => i < 3); // false
Array.prototype.every
every 메서드는 콜백 함수의 반환값이 모두 참이면 true, 한번이라도 거짓이면 false를 반환한다. 단 every 메서드는 빈 배열의 경우 항상 treu를 반환한다.
1
2
3
4
5
[1, 2, 3].every(i => i < 4); // true
[1, 2, 3].every(i => i < 3); // false
[].every(); // true
Array.prototype.find
find 메서드는 반환값이 true인 첫 번째 요소를 반환한다. 만약 true인 요소가 없다면 undefined를 반환한다. find 메서드는 요소를 반환하는 것에 주의하자.
1
2
3
4
5
6
7
8
9
const arr = [
{ id: 1, text: 'a'},
{ id: 2, text: 'b'},
{ id: 3, text: 'c'},
]
arr.find(i => i.id === 2); // { id: 2, text: 'b' }
Array.prototype.findIndex
findIndex 메서드는 반환값이 true인 첫 번째 요소의 인덱스를 반환한다. 만약 true인 요소가 없다면 -1 을 반환한다.
1
2
3
4
5
6
7
8
9
const arr = [
{ id: 1, text: 'a'},
{ id: 2, text: 'b'},
{ id: 3, text: 'c'},
]
arr.findIndex(i => i.id === 2); // 2