내장고차함수(filter, map, reduce)

<내장고차함수>
-자바스크립트에는 기본적으로 내장된 고차함수가 있다.
대표적으로 filter, map, reduce등이 있다.

 

#메서드: 객체 안에 들어있는 함

---

< filter메서드 >

-배열의 각 요소에 콜백함수를 적용시켰을때, true를 리턴하는 요소들만 모은 새로운 배열을 리턴. 
-모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드이다. (필터링, 걸러낸다, 분류)

-기존배열을 수정하지 않는다.
- arr.filter
- filter 메서드는 걸러내기 위한 조건을 명시한 함수를 전달인자로 받기 때문에 고차함수이다.

let arr = [1, 2, 3];
let result = arr.filter(function(ele) {
return ele % 2 !== 0
} );
return result;

#-배열의 각 요소가
-함수에 따르면, 사실(true)일때
-따로 분류합니다(filter)

const isCreatedAt2003 = function (cartoon) {
const fullYear = new Date(cartoon.createdAt).getFullYear()
return fullYear === 2003;
};
const filteredCartoons = cartoons.filter(isCreatedAt2003);

words.filter(el => el.length % 2 === 1);

배열이름.filter(el => 조건);

---

< map메서드 >

-모든 요소들에 동일한 행동을 준 값에 대하여 반환한다.
-하나의 데이터를 다른 데이터로 매핑(mapping)할때 사용한다. (★★대응되는★★)

-배열의 각 요소에 콜백함수를 적용시킨 새로운 배열을 리턴.  
-기존배열을 수정하지 않는다.

-arr.map(el,idx) 콜백함수에 두번째 전달인자를 줄경우 인덱스를 가져옴.

두번째 인자에는 콜백함수의 인덱스가 들어온다.

let arr = [1, 2, 3];
let result = arr.map(function(ele) { return ele*2});
result;

# -배열의 각 요소가
-특정 논리(함수)에 의해
-다른 요소로 지정(map) 됩니다.

const findSubtitle = function (cartoon) {
return cartoon.subtitle; 
};
const subtitles = cartoons.map(findSubtitle);

---

< reduce메서드 >

-배열의 각 요소를 콜백함수에 맞게 하나로 응축시킨 값을 리턴 
-여러 데이터를 하나의 데이터로 응축할때 사용한다.
-초기값을 정하지 않는다면 배열의 가장 첫번째요소가 된다. (0번째 인덱스값) => acc

const arr = [1,2,3];
const result = arr.reduce((acc, cur, idx) => {
let newAcc = acc + cur;
return newAcc;
}, 1)
result;

 

 

 

# -배열의 각 요소를
-함수에 따라
-원하는 하나의 형태로
-응축합니다(reduction)

// 단행본 한 권의 평점을 누적값에 더한다.
const scoreReducer = function (sum, cartoon) {
  return sum + cartoon.averageScore;
}; 

// 초기값에 0을 주고, 숫자의 형태로 평점을 누적한다.
let initialValue = 0 
// 모든 책의 평점을 누적한 평균을 구한다.
const cartoonsAvgScore = cartoons.reduce(scoreReducer, initialValue) / cartoons.length;

# 배열을 문자열로 만들수도 있고,

배열을 객체로 만들수도 있다.