[JS] map, forEach

배열을 통해 많이 사용되는 map과 foreach에 대해 정리합니다.

아래 MDN 공식 문서를 참고해보세요.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN

 

map과 forEach 모두 배열의 길이만큼 반복합니다.

두 가지 모두 생긴 모양은 비슷합니다.

작성하는 방식과 차이점에 대해 알아보겠습니다.

 

map()

const strs = ['one','two','three'];

const b = strs.map(function (str,index){
  return `${str}AND${index}`;
});

console.log(b);
// output -> (3) ["oneAND0", "twoAND1", "threeAND2"]

map의 콜백함수를 사용하면 값이 반환되며, 새로운 배열을 만들어줍니다.

 

 

forEach()

const nums = [1, 2, 3];

const a = nums.forEach(function (num, index) {
  console.log(`${num}AND${index}`);
});

console.log(a);
// output -> undefined

forEach는 값이 반환되지 않으며, 새로운 배열도 만들어주지 않습니다.

이 부분이 map과 forEach의 큰 차이점입니다.

 

 

위 코드를 화살표 함수로 변경해보도록 하겠습니다.

const nums = [1, 2, 3];
const strs = ["one", "two", "three"];

// forEach
const a = nums.forEach((num, index) => {
  console.log(`${num}AND${index}`);
});
console.log(a);

// map
const b = strs.map((str, index) => `${str}AND${index}`);
console.log(b);