ES6의 map, filter, reduce 의 Simple Example Code

https://velog.io/@decody/map-%EC%A0%95%EB%A6%AC

ES6의 map, filter, reduce 정리

 

일반적인 Loop 구문

// for
var arr = [3, 9, 4, 2, 7, 6]
var new_arr = []

for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 === 0) {     // 2의 배수
        new_arr.push(arr[i])
    }
}
console.log(new_arr)	// 4, 2, 6

// forEach()
var arr = [3, 9, 4, 2, 7, 6]
var new_arr = []
arr.forEach(function (n) {
    if (n % 2 ===0) {
        new_arr.push(n)
    }
})
console.log(new_arr)	// 4, 2, 6

// forEach with arrow fuction
var arr = [3, 9, 4, 2, 7, 6]
var new_arr = []
arr.forEach( (n) => { if (n % 2 === 0) new_arr.push(n) })
console.log(new_arr)	// 4, 2, 6

map()

인자값: currenValue, index, array
요소를 일괄적으로 변경

var arr = ['foo', 'hello', 'diamond', 'A']
// 각 요소의 글자 길이값 반환
var arr2 = arr.map((v) => v.length)
console.log(arr2)	 // [3, 5, 7, 1]

filter()

요소를 걸러내어 배열로 true/false 반환, 없으면 빈 배열

var arr = [4, 15, 377, 395, 400, 1024, 3000]
var arr2 = arr.filter((v) => (v % 5 === 0))
console.log(arr2)	// [15, 395, 400, 3000]

find()

단 하나의 요소만 반환, 여러 개 있으면 처음값만 반환

let arr = [4, 15, 377, 395, 400, 1024, 3000]
let arr2 = arr.find((n) => (n % 5 === 0))
console.log(arr2)	// 15

reduce()

인자값은 callback [, initivalValue]
callback은 previouseValue, currentValue, currentIndex, array
[, initivalValue]는 옵션
reduce()는 위의 map, find, filter 대체 가능

let arr = [9, 2, 8, 5, 7]
let sum = arr.reduce((pre, val) => pre + val)
console.log(sum)	// 31

// map
var arr = ['foo', 'hello', 'diamond', 'A']
var arr2 = arr.reduce((pre, value) => {
    pre.push(value.length)
    return pre
}, [])
console.log(arr2)   // [3, 5, 7, 1]

// filter
var arr = [4, 15, 377, 395, 400, 1024, 3000]
var arr2 = arr.reduce((pre, value) => {
    if (value % 5 == 0) {
        pre.push(value);
    }
    return pre;
}, []);
console.log(arr2)    // [15, 395, 400, 3000]

// find
var arr = [4, 15, 377, 395, 400, 1024, 3000]
var arr2 = arr.reduce((pre, value) => {
    if (typeof pre == 'undefined' && value % 5 == 0) {
        pre = value;
    }
    return pre;
}, undefined);
console.log(arr2)  // 15

기타 응용

// 합집합
let arrA = [1, 4, 3, 2]
let arrB = [5, 2, 6, 7, 1]
console.log([...new Set([...arrA, ...arrB])])   // [1, 4, 3, 2, 5, 6, 7]

// 교집합
let arrC = [1, 4, 3, 2];
let arrD = [5, 2, 6, 7, 1];
console.log(arrC.filter(it => arrD.includes(it)))   //[1, 2]

참고링크

https://bblog.tistory.com/300
https://medium.com/@Dongmin_Jang/javascript-15%EA%B0%80%EC%A7%80-%EC%9C%A0%EC%9A%A9%ED%95%9C-map-reduce-filter-bfbc74f0debd