[js] 자바스크립트 DeepDive 27장 요약 (2) : 배열 고차 함수

* 본 내용은 자바스크립트 DeepDive 내용을 참고하여 정리한 것입니다.

 

27장 9절. 배열(2) : 배열 고차 함수 (P.529~551)

 

27.9) 배열 고차 함수 (p.529~551)

 

* 고차 함수

- 함수를 인수로 전달받거나 함수를 반환하는 함수

- 외부 상태의 변경이나 가변 데이터를 피하고, 불변성을 지향하는 함수형 프로그래밍에 기반을 둠

 

* 함수형 프로그래밍

- 순수 함수와 보조 함수와의 조합으로 조건문과 반복문을 제거 -> 복잡성 해결

- 변수의 사용 억제 -> 상태 변경을 피하려는 프로그래밍 패러다임

 

 

 27.9.1) Array.prototype.sort (p.529~532)

- 배열의 요소를 정렬함.

- 원본 배열을 직접 변경하며 정렬된 배열을 반환

- 오름차순으로 요소를 정렬 (내림차순 정렬 시 오름차순 정렬 후 reverse메서드를 사용)

- 숫자 요소를 정렬할 경우, sort메서드에 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 함.

 

 

 27.9.2) Array.prototype.forEach (p.532~537)

//27.9.2 foreach

const numbers = [1,2,3,4,5];
const blanks = [];

numbers.forEach(item => blanks.push(item ** 2));
console.log(blanks) // [ 1, 4, 9, 16, 25 ]

- for문을 대체할 수 있는 고차 함수.

- 자신의 내부에서 반복문을 실행한다.

- 배열을 순차적으로 전달 받음

- 원본 배열을 변경하지 않음. 단, 콜백 함수를 통해 원본 배열을 변경할 수 있음.

- foreach메서드의 반환값은 언제나 undefined.

- 일반 for문과는 달리, break, continue문을 사용할 수 없음. 즉, 배열의 모든 요소를 빠짐없이 순회하며, 순회 중단이 불가함.

- 희소 배열의 경우 존재하지 않는 요소는 순회 대상에서 제외됨.

- for문과 대비해 성능은 좋지 않으나 가독성이 좋음

 

 

 27.9.3) Array.prototype.map (p.537~540)

- 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출함.

- 콜백 함수의 반환값들로 구성된 새로운 배열을 반환함.

- 원본 배열은 변경되지 않음.

- map메서드가 생성하여 반환하는 새로운 배열의 length프로퍼티 값은 map 메서드를 호출한 배열의 length프로퍼티 값과 반드시 일치함. 즉, map메서드를 호출한 배열과 map메서드가 생성하여 반환한 배열은 1:1 매핑함.

 

* foreach 메서드와 map메서드

- 공통점: 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출

- 차이점: foreach메서드는 언제나 undefined를 반환, map메서드는 콜백 함수의 반환값들로 구성된 새로운 배열 반환.

 

 

 27.9.4) Array.prototype.filter (p.540~542)

const numbers = [11,22,33,44,55];
const odds = numbers.filter(item => item % 2);
console.log(odds); // [11, 33, 55]

- 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환

- 원본 배열은 변경되지 않음

- filter메서드가 생성하여 반환한 새로운 배열의 length프로퍼티 값은 filter메서드를 호출한 배열의 length프로퍼티 값과 같거나 작다.

 

 

 27.9.5) Array.prototype.reduce (p.542~548)

const sum = [1,3,5,7,9,11,13,15,17,19].reduce((accumulator, currentValue, index, array) 
   => accumulator + currentValue, 0)
console.log(sum); // 100

- 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출함.

- 하나의 결과값을 만들어 반환

- 원본 배열은 변경되지 않음

- 해당 메서드를 사용해 평균, 최대값, 요소의 중복 횟수, 중첩 배열 평탄화, 중복 요소 제거와 같은 작업 수행 가능.

 

 

27.9.6) Array.prototype.some (p.548)

- 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출함

- 콜백 함수의 반환값이 단 한번이라도 참이면 true, 모두 거짓이면 false를 반환

- 빈 배열일 경우 언제나 false를 반환

 

 

27.9.7) Array.prototype.every (p.548~549)

- 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출

- 콜백 함수의 반환값이 모두 참이면 true, 단 한번이라도 거짓이면 false를 반환

- 빈 배열일 경우 언제나 true를 반환

 

 

27.9.8) Array.prototype.find (p.549~550)

- 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true인 첫 번째 요소를 반환

- 콜백 함수의 반환값이 존재하지 않을 시 undefined를 반환

 

 

27.9.9) Array.prototype.findIndex (p.550)

- 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true인 첫 번째 요소의 인덱스를 반환

- 반환값이 true인 요소가 존재하지 않으면 -1을 반환

 

 

27.9.10) Array.prototype.flatMap (p.551)

- ES10(2019)에서 도입

- map메서드를 통해 생성된 새로운 배열을 평탄화함.

- map메서드와 flat메서드를 순차적으로 실행하는 효과 발생.

- 인수를 전달하여 평탄화 깊이를 지정할 수는 없음. (1단계만 평탄화함)

- map메서드를 통해 생성된 중첩 배열의 평탄화 깊이를 지정해야할 시 map메서드와 flat메서드를 각각 호출함.

 

 

끝.