forEach vs map() 차이점

자바스크립트에서 데이터를 담고 사용하는데 이용되는 배열과 이를 loop으로 처리하기 위해서 forEach()와 map
()을 주로 사용한다. 

 

forEach()

Array 인스턴스 forEach() 메서드는 순회 메서드로 각 배열 요소에 대해 제공된 콜백 함수를 한 번씩 실행한다.

반한 값은 사용되지 않는다.

호출되는 배열을 변경하지 않지만, 콜백 함수로 제공되는 함수는 변경 할 수 있다.

그러나 배열의 length는 콜백함수를 처음 호출하기 전에 저장된다는 점을 유의해야함.

그리고 루프를 중지하거나 중단할 수 있는 방법이 없다. 

const array1 = ['a', 'b', 'c'];

array1.forEach((element) => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

 

 

 

 

map()

배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하다.

반환 값으로 배열의 요소에 대해 실행한 값을 모은 새로운 배열을 반환 

호출할 때 대상 요소의 값, 요소의 인덱스, 원본 배열 3개의 인수를 전달받는다. 

호출한 배열의 값을 변형하지 않습니다. 단, 콜백 함수에 의해서 변형될 수는 있습니다.

const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

 

 

 

 

 

 

학습 자료 

- mdn Array.prototype.forEach()

- mdn Array.prototype.map()