[Tech | Javascript] forEach vs map ?

forEach vs map ? (부제: 둘 중에 무얼쓸까?)

💡 Intro

반복문을 작성해야할 때 자바스크립트는 선택지가 많다. (for, forEach, for of, map, reduce 등) 이 중 무엇을 언제, 왜 써야할까? 우선 forEach와 map에 대해서 비교해보자.

🖐 forEach

forEach는 배열의 각 요소들을 돌면서, 콜백 함수의 기능을 수행합니다.

const arr = [1,2,3,4,5];
arr.forEach(function(value, index, array) {
	!콜백함수가 할 기능!
}) // 화살표 함수 가능

• 콜백 함수는 value, index, array를 인자로 받는다.
  • value: 현재의 값
  • index: 현재의 인덱스
  • array: 순회중인 배열
• forEach은 값을 return 하지않는다.
  • return시 undefined로 출력된다.
• 모든 요소에 대해 콜백함수를 실행한다.
• 새로운 배열을 반환하지 않는다.

☀️ map

map은 배열의 각 요소들의 콜백 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((value, index, arr) => !콜백함수가 할 기능!);

• 콜백 함수는 value, index, array를 인자로 받는다.
  • value: 현재의 값
  • index: 현재의 인덱스
  • array: 순회중인 배열
• map은 값을 return 한다.
• 새로운 배열을 반환한다.

🤛 forEach vs map?

forEach와 map의 성능을 비교한다면 둘 중 누가 언제나 뛰어나다? 라고 말할 수 없다. (forEach가 더 빠르다는 결과도, map이 더 빠르다는 결과도 있다!) 그렇기 때문에 사용하는 상황에 따라 적절하게 사용해야한다. 즉, 현재 배열의 값 자체를 변경하고 싶을 땐 forEach, 현재 배열의 값을 바탕으로 새로운 배열을 도출하고 싶을 땐 map을 사용하면 된다.

forEach <=> map 으로 서로 바꿔 사용할 수 있기 때문에 가독성이 좋은 map을 사용하는것이 어떨까?