자바스크립트 - 배열의 함수형 메소드

17 May 2021

Reading time ~2 minutes

Map 함수

함수에서 정의한 방법대로 모든 원소를 가공해서 새로운 배열을 반환 (return구문 필요!)
기존 데이터는 그대로 유지

data의 price를 10% 증가 하는 문제

var data = [
    {
        title : "hello",
        content : "간지철철",
        price : 12000
    },
    {
        title : "crong",
        content : "괜찮은 상품",
        price : 55000
    },
        {
        title : "codesquad",
        content : "개쩌는 상품",
        price : 60000
    }

]

var newData = data.map(function(v){
    var newObj = {name : v.name, content : v.content, price : v.price*1.1};
    return newObj;
})

console.log(newData[1].price) // 60500.00000000001
})

Filter 함수

함수에서 정의한 조건에 맞는 원소만 추려서, 새로운 배열을 반환

var data = [
    {
        title : "hello",
        content : "간지철철",
        price : 12000
    },
    {
        title : "crong",
        content : "괜찮은 상품",
        price : 55000
    },
        {
        title : "codesquad",
        content : "개쩌는 상품",
        price : 60000
    }

]

var newData = data.filter(function(v){
    return v.price > 50000;
})

console.log(newData);
/*
[[object Object] {
  content: "괜찮은 상품",
  price: 55000,
  title: "crong"
}, [object Object] {
  content: "개쩌는 상품",
  price: 60000,
  title: "codesquad"
}]
*/

Map과 Filter 함수의 조합

price 요소를 정수->문자열 변환

var data = [
    {
        title : "hello",
        content : "간지철철",
        price : 12000
    },
    {
        title : "crong",
        content : "괜찮은 상품",
        price : 55000
    },
        {
        title : "codesquad",
        content : "개쩌는 상품",
        price : 60000
    }

]

var newData = data.filter(function(v){
    return v.price > 50000;
}).map(function(v){
    var newObj = {name : v.name, content : v.content, price : v.price+""};
    return newObj;
})

console.log(newData)

/*
[[object Object] {
  content: "괜찮은 상품",
  name: undefined,
  price: "55000"
}, [object Object] {
  content: "개쩌는 상품",
  name: undefined,
  price: "60000"
}]
*/

replace 정규식을 사용하여 60,000원과 같은 문자열로 변환

var data = [
    {
        title : "hello",
        content : "간지철철",
        price : 12000
    },
    {
        title : "crong",
        content : "괜찮은 상품",
        price : 55000
    },
        {
        title : "codesquad",
        content : "개쩌는 상품",
        price : 60000
    }

]

var filteredData = data.filter(function(v) {
    return v.price > 50000;
}).map(function(v) {
  var obj = {};
  obj.title = v.title;
  obj.content = v.content;
  obj.price = (''+v.price).replace(/^(\d+)(\d{3})$/, "$1,$2원");
  return obj;
});
console.log(filteredData)

/*
[[object Object] {
  content: "괜찮은 상품",
  price: "55,000원",
  title: "crong"
}, [object Object] {
  content: "개쩌는 상품",
  price: "60,000원",
  title: "codesquad"
}]
*/

Reduce 함수

배열의 모든 요소에 대해 지정된 콜백 함수를 호출하며, 콜백 함수의 반환 값을 누적하여 반환하는 함수

var data = [
    {
        title : "hello",
        content : "간지철철",
        price : 12000
    },
    {
        title : "crong",
        content : "괜찮은 상품",
        price : 55000
    },
        {
        title : "codesquad",
        content : "개쩌는 상품",
        price : 60000
    }

]
var totalPrice = data.reduce(function(prevValue, product) { 
    return prevValue + product.price; 
}, 0);

console.log(totalPrice);

WebProgramming