reduce,map,filter

ordo_92·2020년 9월 13일
0

Javascript

목록 보기
6/12

Reduce,map,filter는 배열 기반 메소드들로써, 그 사용 빈도가 빈번하고, 필수적인 이해도와, 숙련도가 요구되어진다.

1.reduce()

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

구문 : arr.reduce(callback[, initialValue])
//리듀서 함수인 콜백함수는 4개의 파라미터로 이루어져있다.
->
누산기accumulator (acc)
현재 값 (cur)
현재 인덱스 (idx)
원본 배열 (src)

let olymicRank = [
  { country: "England", rank: 5 },

  { country: "USA", rank: 1 },

  { country: "Russia", rank: 2 },

  { country: "Republic of Korea", rank: 6 },
]; // 배열 정의

let totalPoint = olymicRank.reduce(function (acc, value) { //주로 누산기 , 현재값만을 파라미터로 넣어준다.
  console.log(acc);
  return acc + value.country;
}, 0); // 마지막에 초기값을 넣어준다.

console.log(totalPoint);

/*
//순서대로 누산값 출력

0
5
6
8
14 <-- totalPoint 값

*/

2.map()

map() 메소드는 배열 내의 모든 요소 각각에 대하여 정한 논리값을 적용시킨 후 새로운 배열에 그 값을 반환한다.

구문 :arr.map(callback(currentValue[, index[, array]])[, thisArg])

let historyMine = [
  { age: 1, location: "서대문구 남가좌동" },

  { age: 4, location: "양천구 신길동" },

  { age: 5, location: "안양시 인덕원" },

  { age: 7, location: "남동구 간석동" },

  { age: 10, location: "성북구 안암동" },

  { age: 12, location: "종로구 혜화동" },
]; // 배열 정의

let sumMine = historyMine.map(function (move) { // 배열의 요소 값을 참조할 수 있는 move 매개변수 생성
  return move.age + 12 + ", " + move.location; // 각각의 인자 값에 12를 더한 후, 지명과 함께 새 배열 submine에 담는다.
});

console.log(sumMine); // map() 메소드로 새로 담긴 subMine 배열

// =>(6) ["13, 서대문구 남가좌동", "16, 양천구 신길동", "17, 안양시 인덕원", "19, 남동구 간석동", "22, 성북구 안암동", "24, 종로구 혜화동"]

3.filter()

filter() 메소드는 피함수에게 주어진 조건을 만족시키는 요소들만을 찾아, 새로이 그 값들만을 담아주는 배열을 생성케합니다.

구문 : arr.filter(callback(element[, index[, array]])[, thisArg])

let arabics = [1, 23, 25, 45, 31, 22, 48, 85, 66, 12, 57, 9, 5, 47, 16, 77];

// 1이상 100미만의 임의의 요소 배열인 arabics 정의

let numbers = arabics.filter((num) => 19 < num && num < 55);

// 19이상이며 55이하인 값들만을 담아주는 numbers 배열 생성

console.log(numbers);

// =>(7) [23, 25, 45, 31, 22, 48, 47]
profile
CTO를 꿈꾸는 CDO

0개의 댓글