배열 (for of, forEach, map, filter, reduce)

for of

이전에 파이썬에서 배웠던 반복문과 똑같다.
for in 도 있는데, for in은 객체를 순환한다.
근데 배열도 객체이긴 한데 배열에서 for in을 쓰면 key값을 반환한다.
for of는 value를 반환하기 때문에, for of를 더 많이 사용할 것 같다.
차이점을 보겠다.

// for of
let arr = [1, 2, 3];

for (let item of arr) {
  console.log(item); // 1, 2, 3
}

//for in
let arr = [1, 2, 3];

for (let item in arr) {
  console.log(item); // 0, 1, 2
}

---

forEach

• forEach 메서드는 for문을 대체할 수 있는 함수다. forEach 메서드는 자신의 내부에서 반복문을 실행한다.
• 즉, forEach 메서드는 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야할 처리를 콜백 함수로 전달받아 반복 호출한다.

let testArr = [1, 2, 3, 4, 5]
testArr.forEach((item) => {
  console.log(item); // 1, 2, 3, 4, 5
}); 

forEach의 특징

• forEach 메서드는 원본 배열을 변경하지 않는다.
• forEach 메서드의 반환값은 언제나 undefined다.

  ---

map

• map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.(여기까지는 forEach와 동일)
• 그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다!(forEach와 가장 큰 차이점)

let testArr = [1, 2, 3, 4, 5]
testArr.map((item) => {
  console.log(item); // 1, 2, 3, 4, 5
});

새로운 배열을 반환하기에 값을 변경할 수도 있다.

const mappedArr = testArr.map((item) => {
  return item * 2; 
});
console.log(mappedArr); // 2, 4, 6, 8, 10

map의 특징

• 원본 배열은 변경하지 않는다.
• map 메서드에서는 원본 배열의 원소와 일대일 mapping이 진행되기 때문에 원본 배열과 mapping후 배열의 길이는 항상 같다.

  ---

filter

• filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

const filteredArr = testArr.filter((item) => {
  return item > 3 ? item : null;  // [4, 5]
});

이렇게 삼항연산자를 사용하여 조건문을 걸어줄 수 있다.
코드를 조금 더 줄인다면 아래와 같이 작성할 수도 있을 것 같다.

const filteredArr = testArr.filter((item) => {
  return item > 3 ?? item; // [4, 5]
});

filter의 특징

• 조건문을 통과한 요소로 이루어진 새로운 배열을 반환한다.
• 요소들이 조건문을 하나도 통과하지 못했으면 빈 배열을 반환한다.

  ---

reduce

• 조금 복잡해보이는 메서드이다.
• 누산기(누적된 값의 합산을 해주는..)

let testArr = [1, 2, 3, 4, 5]
const result = testArr.reduce((acc,cur,idx) => { 
  console.log("acc",acc);
  console.log("cur",cur);
  console.log("idx", idx);
  return (acc = acc+cur); // 누적값은 리턴을 해줘야 갱신이 된다.
}, 0) // 0을 초기값으로 넣어줘야 함.
console.log(result); // 15 (1+2+3+4+5)

// 결과
acc 0
cur 1
idx 0
-------
acc 1
cur 2
idx 1
-------
acc 3
cur 3
idx 2
-------
acc 6
cur 4
idx 3
-------
acc 10
cur 5
idx 4
-------