고차함수

First-class citizen

• 변수에 할당할 수 있다. --> 함수 표현시
• 다른 함수의 인자로 전달될 수 있다.
• 다른 함수의 결과로서 리턴될 수 있다.

TIP. 함수 표현식 vs 함수 선언식
함수 표현식은 호이스팅(hoisting)이 안되지만 변수에 저장이 가능한 점이 함수 선언식과의 가장 큰 차이점이고 이외에는 차이점이 없다.

변수에 저장된 데이터는 함수의 인자로 전달되거나 함수 내에서 리턴값으로 사용될 수 있습니다. 앞서 함수가 변수에 저장될 수 있다는 사실로부터, 함수 역시 다른 함수의 인자로 전달되거나 다른 함수 내에서 리턴될 수 있다는 것을 알 수 있습니다. 자바스크립트의 고급 주제인 고차 함수(higher order function) 학습은 여기서부터 시작됩니다.

고차함수란?

• 함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말합니다. 이 때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 합니다.

내장 고차 함수(내장 메서드)

filter 메서드 : 배열의 요소 중 특정 조건을 만족하는 요소들만을 걸러내는 메소드이다.

 - callback 함수의 결과 값이 true인 요소만 새로운 배열로 반환하고 배열의 요소들이 callback함수의 결과가 true인 것이 없을 경우 **빈 배열**을 반환합니다.

// 배열의 요소 중 짝수인 요소만 새로운 배열로 만들기
let arr = [1,2,3,4,5];
let arrFilter = arr.filter(function(element, index, array){
  console.log('element: ',element); // 1, 2, 3, 4, 5
  console.log('index: ',index); // 0, 1, 2, 3, 4
  console.log('array: ',array);// [1,2,3,4,5] 5번
  return element % 2 === 0;
});

console.log(arrFilter); //결과 [2, 4] 

forEach : callback함수를 배열의 요소에 각각 실행한다.

** -  반환값 : undefined **

// 새로운 배열에 요소 복사하기
let arr = [1,2,3,4,5];
let newArr = [];
let arrForEach = arr.forEach(function(element, index, array){
  console.log('element: ',element); // 1, 2, 3, 4, 5
  console.log('index: ',index); // 0, 1, 2, 3, 4
  console.log('array: ',array); // [1,2,3,4,5] 5번
  newArr.push(element);
  return element; // 결과 undefined
});
console.log(newArr); //결과 [1,2,3,4,5]

map : 배열 내의 각각의 요소에 callback함수를 적용한 새로운 배열을 반환합니다.

// 배열의 모든 요소에 2배의 곱하기
let arr = [1,2,3,4,5];
let arrMap = arr.map(function(element, index, array){
  	return element * 2;
});
console.log(arrMap); // 결과 [2,4,6,8,10]

reduce : callback함수를 사용하여 하나의 결과값을 반환한다.

** - 반환 값: 누적 계산의 결과 값 **

let arr = [1,2,3,4,5];
let accumulateSum = arr.reduce(function(accumulator, currentValue, currentIndex, array){
  console.log('accumulator: ', accumulator); 
  console.log('currentValue: ', currentValue);
  console.log('currentIndex: ', currentIndex);
  console.log('array: ', array);
  return accumulator + currentValue; 
  // accumulator에 배열 요소를 더한 값을 다시 accumulator에 반환하고 최종 값을 accumulateSum 변수에 반환한다.
});

console.log(accumulateSum); //15

accumulator	currentValue	currentIndex	array
1	2	1	[1,2,3,4,5]
3	3	2	[1,2,3,4,5]
6	4	3	[1,2,3,4,5]
10	5	4	[1,2,3,4,5]

초기값(0)이 있는 경우

accumulator	currentValue	currentIndex	array
0	1	0	[1,2,3,4,5]
1	2	1	[1,2,3,4,5]
3	3	2	[1,2,3,4,5]
6	4	3	[1,2,3,4,5]
10	5	4	[1,2,3,4,5]

sort : 배열의 요소 순서를 결정하는데 사용하는 함수이다.

- ASCII 문자 순서로 정렬된다.
- 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다.

let arr = [1, 2, 3, 4, 5, 10, 15, 6, 8, 7, 3, 11];
arr.sort(); 
//결과 [1, 10, 11, 15, 2, 3, 3, 4, 5, 6, 7, 8]

** - 반환 값 : 새로운 배열이 아닌 원 배열의 순서를 변경합니다. **

let numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
    return a - b; //a : 2, b :4 (음수일 경우 오름차순)
});
console.log(numbers);  // 결과 [1, 2, 3, 4, 5] 

numbers.sort(function(a, b) {
    return b - a; // a :2, b : 4 (양수일 경우 내림차순)
});
console.log(numbers); // 결롸 [5, 4, 3, 2, 1]