Javascript / Array / filter, map, reduce

배열의 구성, 접근, 추가/삭제/변경 등 기초에 관한 내용은 다음 글에서 익히자.

'2.배열 - 1-2. 배열 및 반복문'

 

---

 

 

1. filter method

 

filter method는 배열의 요소 중, 특정 조건을 만족하는 값들만을 걸러 새로운 배열로 반환해주는 method이다.

 

배열.filter(filtering함수)

 

function isOdd(value) {
return value % 2 !== 0;
}
 
var filtered = [12, 5, 8, 130, 44].filter(isOdd);
filtered  // 결과 : [5]

 

callback함수의 형태로 작성할 수도 있다.

 

let arr = [12, 5, 8, 130, 44];
 
let oddNum = arr.filter(function(x) {
  return x % 2 !== 0;
});
 
oddNum // 결과 : [5]

 

 

2. map method

 

배열의 요소를 하나씩 순서대로 불러와서, mapping함수를 적용시킨 요소들을 새로운 배열로 반환해주는 method이다.

 

배열.map(mapping함수)

예제 : MDN 문서의 예제

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

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

 

var kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];
 
var reformattedArray = kvArray.map(function(obj){  //obj는 kvArray의 각 값( {key:1, Value:10}...) 을 나타낸다.
   var rObj = {};
   rObj[obj.key] = obj.value;  // obj.key : 객체에서 'key' 라는 이름을 가진 key의 value를 dot notation을 통해 조회하므로, 값은 1, 2, 3
   return rObj;
});
// reformattedArray는 [{1:10}, {2:20}, {3:30}]
 
// kvArray는 그대로
 
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]

 

3. Reduce method

reduce는 파라미터로 누적값을 취하는 method 이기 때문에 다양하게 활용될 수 있다.

우선은 단순 덧셈 누적에 대해서만 공부해보자.

 

배열.reduce(callback (누적값, 현재값, 인덱스, 요소) {
  return 결과
  }, 초기값);

 

let arr = [1, 2, 3];
 
result = arr.reduce(function (acc, cur, i){
  return acc + cur;
}, 0);
 
result;
 
// 과정: (acc, cur, i) 순서대로 표현 
// (0, 1, 0)
// (1, 2, 1)
// (3, 3, 2)
// 결과: 6
 
// 만약, 초기값을 0이 아닌 5로 지정하면, 결과: 11// 만약, 초기값을 적어주지 않으면 배열의 첫번째 인덱스값을 초기값으로 지정한다.

>> 초기값을 지정해주지 않으면 cur은 첫번째 index를 건너뛰고 두번째 index부터 순회를 시작한다!