배열 고차 함수 (고계함수)

고차 함수(Higher order function)는 함수를 인자로 전달받거나 함수를 결과로 반환하는

함수를 말한다.

 

고차 함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다.

 

자바스크립트의 함수는 일급 객체 이므로 값처럼 인자로 전달, 반환 가능

 

const makeCounter = (predicate) => {
	let num = 0;

  //클로저 num의 상태를 유지한다.
    return () =>  num = predicate(num);
    //predicate는 num의 상태를 변화시킨다.
}

const increase = (n) => ++n
const decrease = (n) => --n

//makeCounter는 함수를 인수로 전달 받는다 그리고 클로저를 반환한다
const incre = makeCounter(increase)
const decre = makeCounter(decrease)

incre() // 1
decre() // 0

고차 함수는 외부상태 변경이나 가변 데이터를 피하고 불변성을 지향하는

함수형 프로그래밍(FP) 기반을 둠, FP는 순수 함수를 통해 부수 효과(Side Effect)를 줄여

안정성과, 코드 추적을 용이하게 할 수 있다.

 

자바스크립트는 고차함수를 다수 지원한다.

특히 Array 객체는 매우 유용

 

1. sort메소드 원본배열을 직접 변경

배열의 요소를 정렬한다. 

 

const Array = ['A', 'C', 'B']

console.log(Array.sort()) // [A, B, C]

 

숫자를 정렬할때는 주의.

 

const points = [40, 100, 1, 5, 2, 25, 10];

points.sort();
console.log(points); // [ 1, 10, 100, 2, 25, 40, 5 ]

 

유니코드 포인트 순서에 따라 1, 10, 100, 2 ... 이런식으로 정렬이 진행된다.

 

//비교 함수의 반환값이 0보다 작은 경우 a를 우선하여 정렬한다. 
points.sort((a, b) => a - b); 

// [ 1, 2, 5, 10, 25, 40, 100 ]

 

2. forEach 원본 배열을 직접 변경하지 않음

. 배열을 순회하며 배열의 각 요소에 대하여 인자로 주어진 콜백함수를 실행한다.

. 반환값은 undefined.

. 콜백함수의 매개변수를 통해 배열 요소의 값, 요소 인덱스, forEach 메소드를 호출한 배열,

. 즉 this를 전달 받을 수 있다.

. 원본 배열(this)을 변경하지 않는다. 콜백함수는 원본 배열(this)을 변경 할 수는 있다.

. for문에 비해 성능은 떨어지지만 가독성이 좋아 적극 사용 권장.

 

const numArray = [1, 2, 3];
let numArrayLeng = numArray.length;

//for 
for (let i = 0; i < numArrayLeng; i++) {
	console.log(numArray[i] ** 2) // 1, 4, 9
}

//forEach (배열 요소의 값, 요소 인덱스, this)의 인수를 전달.
numArray.forEach(item => console.log(item ** 2))

 

3. map 원본 배열을 직접 변경하지 않음

. 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백 함수의 반환값으로 새로운 배열을 생성

. forEach 메소드는 배열을 순회하며 요소 값을 참조하여 무언가를 할 때 사용.

   map은 배열을 순회하며 요소 값을 다른 값으로 맵핑하기 위한 함수.

 

const numArray = [1, 2, 3];

const root = numArray.map((item => Math.sqrt(item)))

 

간단하게

forEach는 return 값이 undefined

map은 결과 값으로 새로운 배열을 리턴!

 

4. filter 원본 배열을 직접 변경하지 않음

. if문을 대체 가능

. 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수의 실행결과가 true인

   배열요소의 값만을 추출한 새로운 배열을 반환.

. 특정 케이스만 필터링 조건으로 추출하여 새로운 배열을 만들 때 사용

const numArray = [1, 2, 3];
//홀수만 필터링
const filter = numArray.filter(item => item % 2);

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

 

5. reduce 원본 배열을 직접 변경하지 않음

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

const numArray = [1, 2, 3];
// preVal 이전 콜백의 반환 값 
// currentVal 배열 요소의 값

const arraySum = numArray.reduce((preVal, currentVal) => preVal + currentVal)
//결과는 다음 콜백의 첫번째 인자로 전달.
console.log(arraySum); // 6

const arraySum = numArray.reduce((preVal, currentVal) => preVal + currentVal, 5)
//두번째 인수(5)로 초기값 설정 가능.
console.log(arraySum); // 11

 

초기값을 전달하면 에러를 피할 수 있다, 언제나 초기값을 전달하는 것이 안전.

 

6. some 원본 배열을 직접 변경하지 않음

. 배열 내 일부 요소가 콜백 함수의 테스트를 통과하는지 확인하여 그 결과를 boolean으로 반환.

const numArray = [1, 2, 3];

const res = numArray.some(item => item > 1);

console.log(res) // true

 

7. every 원본 배열을 직접 변경하지 않음

. 배열 내 모든 요소가 콜백 함수의 테스트를 통과하는지 확인, 결과를 boolean으로 반환.

const numArray = [1, 2, 3];

console.log(numArray.every(item => item > 1))

 

8. find 

. ES6에서 새롭게 도입된 메소드로 IE는 지원하지 않는다.

. 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수를 실행하여 그 결과가 참인 첫번째 요소를 반환한다.

   실행 결과가 참인 요소가 존재하지 않는다면 undefined 반환.

. filter는 실행 결과가 true인 값만 새로운 배열을 반환.

. find는 콜백함수를 실행하여 그 결과가 참인 첫번째 요소를 반환. return값은 해당 요소 값.

const users = [
  {id: 1, name: 'Kim'},
  {id: 2, name: 'Park'}
];

//배열이 아니라 요소를 반환한다.
console.log(users.find(item => item.id === 2)) // {id: 2, name: "Park"}

 

9. findIndex

. 배열을 순회 하며 각 요소에 대하여 인자로 주어진 콜백함수를 실행하여 그 결과가 참인 첫번재 요소의 인덱스를 반환.

. 참인 요소가 없다면 -1을 반환.

const users = [
  {id: 1, name: 'Kim'},
  {id: 2, name: 'Park'}
];

// 콜백함수를 실행하여 그 결과가 참인 첫번째 요소의 인덱스를 반환.
const predicate = (key, value) => (item) => item[key] === value;

let index = users.findIndex(predicate('id', 2));
console.log(index) // 1

let index = users.findIndex(predicate('id', 3));
console.log(index) // -1

 

참조: https://poiemaweb.com/js-array-higher-order-function