for vs forEach

---

• ES6의 arrow함수를 사용하면 더 간단해진다.

원본 데이터

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

for문으로 각 요소의 title과 price 출력

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

forEach로 각 요소의 title과 price 출력

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

map, filter

---

map

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

var filteredData = data.map(function(v) {
  return v.price*1.1; 
});
// filteredDate = [13200.000000000002, 6050.000000000001, 1320]
// 부동소수점 정밀도 문제로 인해 해당 결과로 반환

filter

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

var filteredData = data.filter(function(v) {
    return v.price > 5000;  //5000원이상만 추출
});
// filteredData = [{title: 'hello', content: '간지철철', price: 12000}, 
//                 {title: 'crong', content: '괜춘한 상품', price: 5500}]

원본 데이터를 유지하자(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;
});

• 이처럼 map메서드에서 새로운 객체를 만들어 반환하는 방식으로 원본을 유지할 수 있다. 이를 immutable하다고 한다.

reduce

---

• 참고자료 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
• reduce는 배열의 모든 요소에 대해 지정된 콜백 함수를 호출하며, 콜백 함수의 반환값을 누적하여 반환하는 함수이다.
• reduce 함수의 매개변수로 콜백 함수와 누적을 시작하기 위한 초기 값이며 초기 값은 선택사항이다.

const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

• reduce메서드는 콜백함수와 초기값(필수x)을 매개변수로 가진다.
• 콜백함수는 다음의 네개의 인자를 받는다.
  • accumulator : 콜백함수의 이전 반환값 또는 첫번째 호출인 경우 초기값을 반환한다.
  • currentValue : 처리할 현재 요소
  • currentIndex(필수x) : 처리할 현재 요소의 인덱스
  • array(필수x) : reduce를 호출한 배열