자바스크립트 map과 filter 두개 메서드로 유용한 활용법 Java script

map과 filter * 가장 유용한 메서드이다

map과 filter 메서드는 모두 사본을 반환하며 원래 배열은 바뀌지 않으며 함수로 구성된 배열을 말한다

함수로 구성된 배열이 있는데 프라미스가 필요하다면, 일정한 형식의 배열을 다른 형식으로 바꿔야 한다면,

Map을 사용하기 바랍니다. 아래의 예제를 참고하세요

 

const cart = [{ name : "Widget", price : 9.95 }, { name : "Gadget", price : 22.95 }];

const names = cart.map( x => x.name ); ["Widget", "Gadget"];

const prices = cart.map( x => x.price ); [9.95, 22.95];

const discountPrices = prices.map( x => x * 0.8 ); [7.96, 18.36];

 

 

콜백 함수는 각 요소에서 호출될 때 요소 자체와 요소 인덱스, 배열전체를 매개변수로 받는다

map()는 배열의 정보들을 가지고와서 새로운 문자열을 이나 배열을 만들기에 효율이 높다

그리고 map이 배열의 각 요소를 변형한다

 

 

const items = ["Widget", "Gadget"];

const price = [9.95, 22.95];

const cart = items.map((x, i) => ({ name : x, price : price1[i]}));

 

위의 결과 cart : [{ name : "Widget", price: 9.95 }, { name : "Gadget", price : 22.95 }]

 

객체를 괄호로 감싼 이유는 화살표 표기법에서 객체 리터럴의 중괄호를 블록으로 판단하기 때문

 

아래의 예제와 같이 map와 filter를 결합하면 다양한 일을 할 수 있다

const cards = [];

for(let suit of ['H', 'C', 'D', 'S'])

for(let value = 1; value <= 13; value++)

cards.push({ suit, value });

 

value가 2인 카드

 

 

let valueNumber = cards.filter(c => c.value === 2); c.value값이 2인것을 찾아내어 변수에 저장

cards.filter(c => c.suit === 'D');

cards.filter(c => c.value > 10);

cards.filter(c => c.value > 10 && c.suit === 'H');

 

 

function carToString(c){

const suits = { 'H' : '\u2665', 'C' : '\u2663', 'D' : '\u2666', 'S' : '\u2660' };

const values = { 1: 'A', 11 : 'J', 12 : 'Q', 13 : 'K' };

 

for(let i = 2; i <= 10; i++)

values[i] = i;

return values[c.value] + suits[c.suit];

}

 

 

const k = cards.filter(c => c.value === 2 ).map(carToString);

 

const k1 = cards.filter(c => c.value > 10 && c.suit === 'H').map(carToString);