고차함수(filter, map, reduce ..)

자바스크립트에는 기본적으로 내장된 고차함수가 있다.  배열 매소드들 중 일부가 대표적이다. 

• forEach, find, filter, map, reduce, sort, some, every... 

<목차>

• map
• filter
• reduce

---

map: 하나의 데이터를 다른 데이터로 맵핑(mapping)할 때 사용

모든 요소에게 동일한 행동을 준 값에 대하여 모두 반환한다. 행동은 내가 직접 작성해야하고, 함수로 작성하여 인자로 넣는다. 기존 배열을 수정하지 않는다. 원하는 행동에 따라 결과가 달라진다. 

 

let arr = [1, 2, 3];

let result = 
	arr.map(function(el) {
    	return el * 2
});

return result;

<map에서 꼭 기억해야 할것>

배열의 각 요소가

특정 논리(함수)에 의해

다른 요소로 지정(map)된다.

 

---

filter:  모든 요소 중 내가 원하는 값만 필터링하여 반환한다.

행동은 내가 직접 작성해야하고 함수로 작성해야한다. 기존배열을 수정하지 않는다. 

let arr = [1, 2, 3];

let result = 
	arr.filter(function(el) {
    	return el % 2 !== 0
});

return result;

<filter에 대해 알아야할것>

배열의 각 요소가

특정 논리(함수)에 다르면, 사실(boolean)일 때

따로 분류한다.(filter)

 

cf) 예를 들어 arr.filter(el =>                 ) 이 부분에 함수의 조건문중 true가 되는 조건을 써준다. (고차함수 코플릿 11번참고)

                   arr.map(el =>                  )  이 부분에 함수의 결과값(return되는 부분)을 써주면된다.(고차함수 코플릿 19번참고)

 

---

reduce: 데이터를 하나의 테이트로 응축(reduce)할 때 사용한다.

배열을 하나의 값으로 만들어준다. 초기값을 정할 수 있는데 정하지 않았다면 배열의 맨 첫번째 요소가 초기값이 된다.  초기값은 누적값의 기반이 된다.  결국은 누적값을 반환한다.

 

//초기값이 없는 경우
let arr = [1, 2, 3];                       // acc + cur
                                           // 1(배열의 첫번쨰 요소가 초기값으로) + 2
let result = arr.reduce(                   // 3 + 3
	function(acc, cur, idx) {
    acc + cur;
    return acc;
});

return result; // 6

//초기값이 있는 경우                           // acc + cur
let arr = [1, 2, 3];                      //1(인자로 받은 초기값) + 1
                                          // 2 + 2
let result = arr.reduce(                  // 4 + 3
	function(acc, cur, idx) {
    acc + cur;
    return acc;
},1);

return result ; // 7

< reduce 사용시 알아야 할것 >

배열의 각 요소를

특정 방법(함수)에 따라

원하는 하나의 형태로

응축한다.(reduction)

 

< reduce 언제쓰나요? >

문자열이나 숫자열등을 합치고 뺄 수 있고

제일 작은것이나 큰것 비교가능

배열 이외에도 다른것으로도 만들 수 있다.