들어가기 전에

이제는 웹 프론트엔드에서도 데이터 처리가 점점 증가하고 있습니다.

자바스크립트에서도 배열에서 다양한 메서드를 지원함으로써 데이터를 파싱하는 등의 처리를 좀 더 손쉽게 할 수가 있습니다. 

데이터를 순회하면서 어떠한 처리가 필요한 경우가 많을 텐데요.

유용한 표준메서드를 어떻게 사용할 수 있는지 알아봅니다.

학습 목표

1. 배열의 메서드들을 활용해서 데이터 처리할 수 있습니다.

핵심 개념

• forEach
• map
• filter
• immutable

학습하기

for vs forEach

이런 데이터가 있다고 하겠습니다.

var data = [{title : "hello",content : "간지철철", price : 12000},
            {title : "crong",content : "괜춘한 상품", price : 5500},
            {title : "codesquad",content : "쩌는상품", price : 1200}];

for문과 forEach를 사용해보겠습니다.

for(var i=0; i<data.length; i++) {
  console.log(data[i].title , data[i].price)
}

data.forEach(function(v) {
   console.log(v.title, v.price);
});

forEach에서는 더 이상 i++이나 length를 판단하는 코드가 필요 없습니다.

그만큼 실수를 줄일 수 있고, 코드는 더 보기 좋습니다.

ES6의 arrow함수를 사용한다면 참고로 더 간단해집니다.

map, filter

map메서드는 함수에서 정의한 방법대로 모든 원소를 가공해서 새로운 배열을 반환합니다.

(아래 코드를 실행해보시고 이해해보세요.)

var filteredData = data.map(function(v) {
    return v * 1.1 ; //10% 가격을 인상!
});

filter메서드는 함수에서 정의한 조건에 맞는 원소만 추려서, 새로운 배열을 반환합니다.

var filteredData = data.filter(function(v) {
    return v.price > 5000;  //5000원이상만 추출
});

filter, map을 같이 써보기

앞선 예제를 두 개의 메서드를 연속적으로 사용하면서 풀어보겠습니다.

요구사항은 '숫자가 3개 이상인 데이터만, '원'이라는 단위를 붙여서 배열 데이터로 모은다'라고 하겠습니다.

{title: "hello", content: "간지철철", price: "12,000원"}  // 이런식으로 출력.

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

이 코드에서는 5,000 이상의 값을 먼저 추출하고, 그리고 정규표현식을 사용해서 '원'표현식으로 변경한 배열을 반환했습니다.

그런데, data를 출력해보세요! 원래의 값은 어떻게 됐나요?

원본 데이터를 유지하자(immutable)

어떤 이유로 원본데이터가 변경되면, 추적도 어렵고, 어디서 어떤 이유로 변경된 것인지 좀 알기 어렵습니다.

또한, 때론 다시 이전 상태의 값을 되돌리고 싶을 경우도 있습니다.

원본 데이터를 유지하려면 어떻게 해야 할까요? 

var filteredData = data.filter(function(v) {
    return v.price > 5000;
}).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;
});

원래의 data값은 그대로 유지되면서 새로운 배열만 확인할 수가 있습니다.

참고로 이를 immutable하다고 표현합니다.

reduce

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

reduce 함수의 매개변수로 콜백 함수와 누적을 시작하기 위한 초기 값이며 초기 값은 선택사항입니다.

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

console.log(totalPrice);

위 코드는 redeuce를 사용하여 상품의 가격을 모두 합한 값을 반환하는 것을 확인하실 수 있습니다.

지금까지 몇개 낯선 메서드들을 알아봤습니다.

map, filter, forEach 이 3가지는 꼭 기억해주시기 바랍니다.

생각해보기

1. 자바스크립트 배열의 메서드 중에 immutable 속성인 메서드는 어떤 것들이 더 있는지 찾아보세요! 
2. reduce 메서드는 누적된 데이터 처리를 위해서 사용될 수 있습니다. 
   

참고 자료