TIL - .forEach() & .map()

forEach 메서드와 map 메서드를 오늘 처음으로 사용해보았다! 한번 알아보자!

---

1. Array.prototype.forEach

forEach 메서드는 쉽게 말해 'for문을 대체할 수 있는 고차 함수' 이다. 그렇다고 for문과 똑같다는 말은 아니다. forEach메서드는 for문과 달리 배열의 모든 요소가 순회해야하며, for문처럼 break, continue를 사용할 수 없다는 차이점이 존재한다.

const array = [1,2,3,4,5];
const result = [];
// for 문으로
for(let i=0; i<array.length; i++) {     
      result.push(numbers[i] **2); }
// forEach 메서드 이용
array.forEach(item => result.push(item **2));
console.log(result); // [1,4,9,16,25]

배열의 요소가 5개 이기 때문에, 콜백 함수도 5번 호출된다.
forEach 메서드에 대해 찾는 과정에서 콜백 함수라는 말이 나와, 콜백 함수에 대해 먼저 간단히 찾아보았다. 콜백 함수는 함수의 매개변수를 통해 다른 함수의 내부로 전달 되는 함수를 콜백 함수라고 한다. 더 깊이 찾아보니, 비동기적.. 등 아직 내가 이해하기에는 어려운 내용이 있어, 일단 이렇게만 알아두었다. (다음에 콜백함수에 대해 자세히 알아보자! )

다시 forEach 메서드에 대한 이야기로 돌아와서, 위의 코드를 보면 for문을 대체할 수 있는 것을 알수있다.
그리고 forEach 메서드는 콜백함수를 호출하면서 요소값, 인덱스, this(forEach 메서드를 호출한 배열 그 자체) 총 3개의 인수를 전달한다.

[1,2,3,4,5].forEach((item, index, arr)=> {
       console.log(`요소값: ${item}, 인덱스: ${index}, this:${JSON.stringify(arr)}`);
}); 
/*
"요소값: 1, 인덱스: 0, this:[1,2,3,4,5]"
"요소값: 2, 인덱스: 1, this:[1,2,3,4,5]"
"요소값: 3, 인덱스: 2, this:[1,2,3,4,5]"
"요소값: 4, 인덱스: 3, this:[1,2,3,4,5]"
"요소값: 5, 인덱스: 4, this:[1,2,3,4,5]"
*/

그럼 forEach 메서드와 for문과 기능이 거의 비슷한데 어떤 것을 사용하는 것이 좋을까?

forEach 메서드는 for문에 비해 성능이 좋지는 않지만 가독성이 좋다.
따라서 요소가 많은 배열을 순회하거나, 시간이 많이 걸리는 코드 혹은 높은 성능이 필요한 경우가 아니라면, for문 대신 forEach 메서드를 사용할 것을 권장한다.

-모던 자바스크립트 Deep Dive-

2. Array.prototype.map

map 메서드는 자기자신을 호출한 배열의 모든 요소를 순회하면서, 콜백 함수를 반복 호출하고, 콜백 함수의 반환값들로 구성된 새로운 배열을 반환하는 것이다.

const numbers = [1,4,9];
const result = numbers.map(item => Math.sqrt(item));
console.log(result); // map 메서드에서 새로운 배열 반환. [1,2,3]
console.log(numbers); // 원본 배열은 변경하지 않는다.

그리고 forEach 메서드처럼 콜백함수를 호출하면서 요소값, 인덱스, this(map메서드를 호출한 배열 그 자체) 총 3개의 인수를 전달한다.

[1,2,3].map((item, index, arr)=> {
   console.log(`요소값: ${item}, 인덱스:${index}, this: ${JSON.stringify(arr)}`);
  return item;
});
/*
"요소값: 1, 인덱스:0, this: [1,2,3]"
"요소값: 2, 인덱스:1, this: [1,2,3]"
"요소값: 3, 인덱스:2, this: [1,2,3]"
*/

✅ forEach 메서드와 map 메서드의 차이점

이 둘의 차이점은 forEach 메서드는 undefined 를 반환하고, map 메서드는 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다는 차이점이 있다.
쉽게 말해 forEach 메서드는 배열 요소마다 콜백 함수를 실행하고 (즉 한번 실행), 아무 값도 반환하지 않지만, map 메서드는 모든 각각의 요소들이 함수를 호출하고 값을 변경하여, 새로운 배열을 반환한다는 차이가 있다.