[FE] 04. 배열의 함수형 메소드

<4. 배열의 함수형 메소드>

* 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 메서드

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

==> 20% 인상되는 가격을 계산하여 새로운 배열을 만들어 준다. (원본 값은 그대로 유지된다)

이것이 map객체가 가지는 차이점! 그러므로 꼭 return을 해주어야 한다.

(위에 데이터에 따라 object가 있을 경우에는 v.price * 1.1 이런 식으로 .을 찍고 값을 지정해 주어야 함)

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 이상의 값을 먼저 추출하고, 그리고 정규 표현식을 사용해서 '원'표현식으로 변경한 배열을 반환했음

---

* 원본 데이터를 유지 - 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하다고 표현한다.

filter도 새로운 배열을 만든다. map과 유사한데 if문처럼 걸러진 데이터로만 새로 생성된다는 차이점이 존재한다.