Javascript | Map, ForEach

Javascript와 React으로 작업을 해왔다면

Map 과 ForEach와 같이 비슷한 Array 메서드들을 많이 쓸것이다.

둘이 차이점은 무었일까 ?

MDN 정의

MAP()

배열 내의 모든 요소 각각에 대하여 제공된 함수 (callback)를 호출하고, 그 결과를 모아서 새로운 배열을 반환합니다.

ForEach()

배열 요소마다 한 번씩 제공한 함수를 실행합니다.

이 두가지 Array 메서드의 중요한 차이점은 map()은 동일한 사이즈의 새로운 배열을 반환한다는 것이다.

	let arr = [1, 2, 3, 4, 5];

위의 배열을 참고하여 ForEach와 Map을 각각 사용해 보도록 해보자.

ForEach()

	arr.forEach((num. index) => {
  		return arr[index] = num *2;
	});

// arr = [2, 4, 6 ,8, 10];

반환 값은 단순히 버려지므로 forEach 함수에서 반환하지 않습니다.

Map()

	let doubled = arr.map(num => {
      return num *@;
    });

// doubled= [2, 4, 6, 8, 10];

함수형 프로그래밍을 선호한다면 map()을 사용하는 것이 더 바람직 할 수도 있다는 것을 이해하는 것이 중요하다.

이느 forEach() rk dnjsfodml Array에 영향을 주고 변경하느 반면 map()은 완전히 새로운 Array를 반환하기 때문에 원래 배열은 변경되지 않기 때문이다.

배열의 데이터를 변경하려고 하지 않을때 for Each() 가 바람직 할 수 있지만 대신 데이터 베이스에 저장하거나 로그아웃 등의 작업을 수행하기를 원한다.

데이터를 변경하거나 연결지을때(map (), filter (), reduce () 등) map()함수를 사용하는 것이 더 좋다.

	let arr = [1, 2, 3, 4, 5];
	let arr2 = arr.map(num => num * 2).filter(num => num > 5);

// arr2 = [6, 8, 10];

먼저 arr에 매핑하고 배열에 있는 모든 요소를 곱하는 것이다.
이 후에 배열을 필터링 하고 5보다 큰 요소만 저장하게 된다.

마치며,

forEach ()로 할 수있는 일은 map ()으로 할 수 있으며, 그 반대도 가능하다.

forEach ()는 콜백 함수가 현재 배열을 변경하도록합니다. map ()은 대신 새 배열을 반환합니다.