JavaScript Map, Filter, Reduce 심화

Map

<script>
const products =[
    {name : '반팔티', price : 15000},
    {name : '긴팔티', price : 20000},
    {name : '핸드폰 케이스', price : 15000},
    {name : '후드티', price : 30000},
    {name : '바지', price : 25000}
];

/* 기존의 방법 */
// 상품이름
let names=[];
for(const p of products){
    names.push(p.name);
}
console.log(names);    // (5) ["반팔티", "긴팔티", "핸드폰 케이스", "후드티", "바지"]
// 상품가격
let prices=[];
for(const p of products){
    prices.push(p.price);
}
console.log(prices);    // (5) [15000, 20000, 15000, 30000, 25000]

/* Map 방법 */
const map =(f, iter)=>{
    let res=[];
    for(const a of iter){
        res.push(f(a));
    }
    return res;
};
console.log(map(p =>p.name, products));     // (5) ["반팔티", "긴팔티", "핸드폰 케이스", "후드티", "바지"]
</script>

이터러블 프로토콜을 사용한 mpa의 다형성

<script>
console.log(map(el=>el.nodeName, document.querySelectorAll('*')));    // Web HTML Node

function *gen(){
    yield 2;
    if(false) yield 3;
    yield 4;
}

console.log(map(a=>a*a, gen()));    // (2) [4, 16]

let m= new Map();
m.set('a', 10);
m.set('b', 20);
console.log(new Map(map(([k,a]) => [k, a*2], m)));    // Map(2) {"a" => 20, "b" => 40}
</script>

Filter

• 특정 요소를 거를 때 사용

<script>
const filter =(f, iter) =>{
    let res =[];
    for(const a of iter){
        if(f(a)) res.push(a);
    }
    return res;
};

// 20000원 이하의 상품
console.log(...filter(p =>p.price<20000, products));    // {name: "반팔티", price: 15000} {name: "핸드폰 케이스", price: 15000}
// 20000원 이상의 상품
console.log(...filter(p =>p.price>=20000, products)); // {name: "긴팔티", price: 20000} {name: "후드티", price: 30000} {name: "바지", price: 25000}

console.log(filter(n => n %2, [1,2,3,4]));    // (2) [1, 3]

console.log(filter(n=>n%2, function *(){
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
}()));    // (3) [1, 3, 5]

</script>

Reduce

<script>
/* 배열 내 수의 합을 구하는 기존의 방법 */
const nums=[1,2,3,4,5];
let total = 0;
for(const n of nums){
    total = total+n;
}
console.log(total);     // 15

/* Reduce 사용법 */
const reduce =(f, acc, iter) => {
    if(!iter){
        iter = acc[Symbol.iterator]();
        acc=iter.next().value;
    }
    for(const a of iter){
        acc = f(acc, a);
    }
   return acc;
};
console.log(reduce(add, [1,2,3,4,5]));    // 15
console.log(reduce((total_price, product) => total_price + product.price, 0, products));     // 105000 모든 상품의 가격
</script>

Map, Filter, Reduce 함수 중첩하여 사용하기

<script>
const products =[
    {name : '반팔티', price : 15000},
    {name : '긴팔티', price : 20000},
    {name : '핸드폰 케이스', price : 15000},
    {name : '후드티', price : 30000},
    {name : '바지', price : 25000}
];

const add =(a,b) => a+b;
console.log(reduce(
    add,
    ,map(p => p.price,
        filter(p+.p.price < 20000, products))));    // 30000

console.log(reduce(
    add,
    ,filter(n => n >= 20000,
        map(p => p.price, products))));    // 75000
</script>

수강 후기

확실히 한번 봐서는 안되겠다는 생각이 들었던 강좌이다. Map, Filter, Reduce 을 사용하여 코드를 굉장히 간결하게 작성할수 있다는 점에 대해서 배웠다. 이런 엄청난 장점들에도 불구하고 여기서 배운것을 실제 내 포트폴리오 서비스에 적용시킬수 있을가 라는 생각을 계속 하였는데.. 지난번 MongoDB로 작성된것을 MySQL 코드로 전환하면서 기존 코드를 뒤엎는 작업은 새로 작성하는것보다 더 어렵다는 느낌을 받았기 때문이다. Filter의 경우에는 단어에서도 알수 있듯이 MySQL DB를 가져오고나서 데이터를 관리할때 정말 유용하겠다는 생각을 많이 하였다. 항상 포트폴리오 사이트의 대부분의 코드들을 ES6 형식으로 변환하고 좀더 간결하고 유지보수 하기 쉬운 코드로 작성하고 싶은 마음이 있었는데 실제로 적용하려면 어마어마한 시간이 걸릴것같다.