[JavaScript] map,filter,reduce

내장고차함수(Built-in higher order functions)

자바스크립트에는 기본적으로 내장(built-in)되어 있는 고차 함수들이 있다. 바로 배열 메소드들 중 일부가 고차 함수에 해당한다. 그 중에서 map,filter,reduce를 중점적으로 공부하였다. 참고로 이 메소드들은 모두 사본을 반환하며 원래의 배열은 바뀌지 않는다.

---

• map
  1. 배열의 각 요소가
  2. 특정 논리(함수)에 의해
  3. 다른 요소로 지정(map) 된다.
  

쉽게 말해 배열(array)내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 가진 새로운 배열을 만들어낸다.

👉 arr.map(callback(currentValue[, index[, array]])[, thisArg])

callback: 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가진다.

currentValue: 처리할 현재 요소.

index(Optional): 처리할 현재 요소의 인덱스.

array(Optional): map을 호출한 배열.

---

thisArg(Optional): callback을 실행할 때 this로 사용되는 값

ex.1)

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});
// doubles는 이제 [2, 8, 18]
// numbers는 그대로 [1, 4, 9]

ex.2)

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]

---

• filter
  1. 배열의 각 요소가
  2. 특정 논리(함수)에 따르면, 사실(boolean)일 때
  3. 따로 분류한다(filter).
  

배열의 filter 메소드는 배열의 요소 중 특정 조건을 만족하는 요소들만을 걸러내는(filter) 메소드이다. 예를 들어, 수(number)를 요소로 갖는 배열 중 짝수만을 걸러내거나, 18 보다 작은 수만을 걸러내는 식이다. 문자열(string)을 요소로 갖는 배열 중 길이가 10 이하인 문자열만 걸러내거나, 'student' 같은 특정한 문자열을 걸러낼 수도 있다.

👉 arr.filter(callback(element[, index[, array]])[, thisArg])

callback: 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버린다. 다음 세 가지 매개변수를 받는다.

element: 처리할 현재 요소.

index(Optional): 처리할 현재 요소의 인덱스.

array(Optional): filter를 호출한 배열.

---

thisArg(Optional): callback을 실행할 때 this로 사용되는 값

ex.1)

function isBigEnough(value) {
  return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

ex.2)

// 함수 표현식
const isEven = function (num) {
  return num % 2 === 0;
};
let arr = [1, 2, 3, 4];

let output = arr.filter(isEven);
console.log(output); // ->> [2, 4]

const isLteFive = function (str) {
  // Lte = less then equal
  return str.length <= 5;
};

arr = ['hello', 'code', 'states', 'happy', 'hacking'];
// output = arr.filter(길이 5 이하)
// '길이 5 이하'를 판별하는 함수가 조건으로서 filter 메소드의 인자로 전달
let output = arr.filter(isLteFive);
console.log(output); // ->> ['hello', 'code', 'happy']

---

• reduce
  1. 배열의 각 요소를
  2. 특정 응축 방법(함수)에 따라
  3. 원하는 하나의 형태로
  4. 응축한다(reduction).

reduce() 메소드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환한다.

👉 arr.reduce(callback[, initialValue])

callback: 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받는다.

accumulator: 누산기accmulator는 콜백의 반환값을 누적한다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값이다.

currentValue: 처리할 현재 요소.

currentIndex(Optional): 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작한다.

array(Optional): reduce를 호출한 배열

---

initialValue(Optional): callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce를 호출하면 오류가 발생한다.

콜백의 최초 호출 때 accumulator와 currentValue는 다음 두 가지 값 중 하나를 가질 수 있다. 만약 reduce() 함수 호출에서 initialValue를 제공한 경우, accumulator는 initialValue와 같고 currentValue는 배열의 첫 번째 값과 같다. initialValue를 제공하지 않았다면, accumulator는 배열의 첫 번째 값과 같고 currentValue는 두 번째와 같다.

ex.1)

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);	--> 초기값 0으로 설정
// sum is 6

ex.2)

var sum = [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 10); --> 초기값 10으로 설정
// sum is 20

	accumulator	currentValue	currentIndex	array	반환값
1번째 호출	10	0	0	[0, 1, 2, 3, 4]	10
2번째 호출	10	1	1	[0, 1, 2, 3, 4]	11
3번째 호출	11	2	2	[0, 1, 2, 3, 4]	13
4번째 호출	13	3	3	[0, 1, 2, 3, 4]	16
5번째 호출	16	4	4	[0, 1, 2, 3, 4]	20