map 함수는 배열의 각 요소에 대해 콜백함수를 호출하고, 그 결과로 새로운 배열을 생성한다. 이때 원본 배열은 변하지 않는다. array.map은 어떤 배열에 있는 모든 요소들의 값을 변경해서 새로운 배열을 만들어야 할 때 사용한다.
기본형(원시형) 데이터와 참조형 데이터를 포함하는 배열은 각각 다르게 동작한다.
기본형 데이터 배열
기본형 데이터 : Numbers, Strings, Booleans, null, undefined, Symbol (ES6), BigInt (ES11)
콜백함수 내에서 ele은 각 요소의 복사본이다. map 메소드 안의 콜백함수에서 아무리 ele의 값을 열심히 변경하더라도 원본 배열인 a의 값은 변경되지 않는다.
기본형 데이터 요소들은 값별로 복사(Stored by Value)되므로 한 변수의 변경 사항이 다른 변수에 영향을 주지 않는다(Immutability).
참조형 데이터 배열
참조형 데이터 : Objects, Arrays, Functions
콜백함수 내에서 ele은 객체의 참조(주소값)이다. 따라서 객체의 속성을 변경하면 원래 배열 b의 객체 속성도 변경된다.
참조형 데이터 요소들은 참조로 복사(Stored by Reference)되므로 하나의 참조를 통한 변경 사항은 해당 객체에 대한 모든 참조에 영향을 미친다(Mutability).
map과 forEach의 차이점
그럼 여기서 의문점이 든다. map 메소드는 새로운 배열을 얻기 위해 사용하는 것인데, 그럼 새로운 배열은 얻지 못하는 것인가? 아니다. 새로운 배열을 생성하고 싶으면 map 함수의 결과를 새로운 변수에 할당하면 된다. 이렇게 하면 원래 배열은 변경되지 않고, 새로운 배열이 생성된다.
이렇게 새로운 배열을 생성할 수 있다는 점은 forEach와의 큰 차이점이다.
forEach는 배열의 각 요소에 대해 주어진 함수를 실행하지만, map과 달리 새로운 배열을 반환하지 않는다.
for 반복문을 대체할 수 있는 메서드이다.
forEach로 새로운 배열을 리턴하는 방법
여기까지 잘 이해를 했다면 또 한 가지 궁금증이 생긴다.
그럼 forEach를 사용하여 새로운 배열을 리턴하는 것은 아예 불가능할까?
그것은 아니다.
forEach를 사용하여 배열을 변경하거나, 새로운 배열을 만들고 싶다면, 다음과 같은 방식으로 할 수 있다.
그런데 이럴바에는 map을 사용하는 것이 낫다.
