Map 사용법

배열을 다루다 보면, 배열 안에 있던 기존 요소를 건드리는 일이 많습니다.

 

새로운 요소를 추가하거나 , 제거하거나, 어떤 요소가 있는지 검사하거나 등등 기본적인 동작은 쉽게 해 보셨을 겁니다.

 

하지만, 배열의 모든 요소를 수정 하려면 기존 방법으로는 너무 귀찮아집니다.

 

그래서, 배열의 모든 요소를 원하는 대로 수정하여, 새로운 배열을 만드는 강력한 메서드 Map()에 대해 알아보겠습니다.

 

1. 기본 문법

 

먼저 새로운 배열의 이름(newArray)을 정해주시고 , 수정할 옛 배열(oldAttay)을 적어 줍니다. 그리고. map() 메서드를  연결해 줍니다.

괄호 안에는 

• value: 현재 요소 값 - (이 메서드 안에서만 사용하는 원하는 이름으로 적어주시면 됩니다.)
• index: 요소의 위치 (옵션)
• array: 원본 배열 (옵션)

이렇게 작성해 주시고 => 함수로 원하는 방식으로 수정해주시면, 예전 배열 요소들을  함수를 적용한 다음 새로운 배열로 만들게 됩니다.

 

2. 기본 활용

 

 

이런 식으로, 숫자나 문자 모두 원하는 데로 수정을 가해, 새로운 배열로 만들 수 있습니다. 

 

3. 객체 배열

 

객체 배열도 똑같이 사용하시면 됩니다. 다만, 배열 안에 있는 요소들이 객체고, 그 객체의 value 값이 필요한 경우 p.name처럼. 을 사용해 접근해주셔야 됩니다.

 

객체 배열을 수정하는 예시입니다. 밑에 결과부터 보시면, passed라는 key 값을 추가해 주기 위한 map 사용입니다. 그렇기 때문에 새로운 배열을 만들 때, 다른 요소들은 그대로 가져와야 합니다. 이때 필요한 게 바로 스프레드 (...) 기능입니다.

위 예시처럼 사용하시면, 모든 요소들이  그대로 적용됩니다. (주의할 점으로, 화살표 함수는 중괄호가 들어가면 괄호나 리턴이 필요합니다.)

그리고 우리가 원하는 수정 부분을 추가하시면 새로운 배열이 만들어집니다.

 

스프레드 없이도 다음과 같이 가능합니다. 다만, 모든 요소를 다 직접 입력해야 해서, 예시와 다르게 100개, 1000개 되면 스프레드 사용은 필수가 될 것입니다.