[javaScript] map 메소드

자바스크립트의 객체를 간편하게 다룰 수 있게 해주는 map 메소드를 알아보고 Object(객체)와의 차이점도 알아보자.

 

map 메소드 : 배열의 요소 각각을 callback 함수에 넣어 그 결과값으로 새로운 배열을 만들어주는 메소드이다. 

 

- map 메소드의 기본적인 문법

 

array.map( callbackFunction ( currentValue, index, array), thisArg)

<map 메소드의 매개변수>

callbackFunction : 모든 배열의 요소에 실행할 function을 정의한다. callbackFuction은 reurn을 함축적으로 가지고있다.

thisArg : callbackFunction 내에서 this로 사용될 값 (이게 몬소리지?)

 

<callbackFunction의 매개변수>

currentValue : 배열 내 현재 값

index : 배열 내 현재 값의 인덱스

array: 현재 배열

 

예제 1)

(↓결과↓)

map 메소드 안의 callbackFunction을 보면 "age"라는 값을 currentValue 매개변수로 지정하여 콜백 함수 안에서 currentValue에 1씩 더해주고있다. 

 

(여기서 매개변수는 간단히 a, x 등으로도 간단히 자유롭게 지정할 수 있다.)

 

(단, ()안에서 첫 번째 값에는 currnetValue가, 두 번째 값에는 index가, 세 번째 값에는 array가 들어간다는 점에만 유의하여 작성하면 된다.)

 

 

예제 2)

 

(↓결과값↓)

 

map 메소드를 이용해 days 배열에 있는 모든 값에 callbackFunction을 실행하고 그 결과값을 저장해 happyDays라는 새로운 배열을 생성했다.

 

* days에는 여전히 처음 저장해주었던 배열이, happyDays에는 map 메소드의 callback함수를 실행한 결과값의 배열이 담겨있다.

즉, map 메소드는 기존의 배열을 수정하지 않고 콜백함수에 따른 결과값으로 새로운 배열을 만들어주는 메소드이다.

 

→ callback 함수가 길고 복잡한 경우에는 callback함수를 변수에 저장해 변수값으로 callback함수를 지정해줄 수도 있다.

 

코드의 결과값은 위 예제와 동일! 

 

위 예제에서는 callback함수가 길지 않아 코드의 가독성면에서 그리 큰 이득은 없어보이지만,

callback함수가 길고 복잡하다면 위의 예제처럼 따로 변수를 만들어 지정해주면 map 메소드의 내용이 간결해져 가독성이 높아질 것 같다.

 

예제 3) map 메소드를 이용하면 간편하게 배열의 for문을 작성할 수 있다.

 

 

위와 같은 코드를 map 메소드를 이용해 작성하면

 

이렇게 간단하게 작성할 수 있다~!

 

 

object vs map

- 공통점 : object와 map은 둘 다 key와 value의 쌍을 저장하고있으며 key값을 이용해 value에 접근/수정할 수 있다.

 

- 차이점 

1. 맵 객체는 문자열이 아닌 값도 키값으로 사용할 수 있다.

 

object는 String이나 Symbol 데이터타입만이 키값으로 사용될 수 있다.

(value값으로는 모든 자료형이 가능하다.)

 

그러나 map에서는 함수나 객체를 포함한 모든 자료형이 key값과 value값으로 쓰일 수 있다. 

 

2. 맵객체는 순서가 정렬되어 삽입된 순서대로 순회가 이루어진다. 

 

그러나 object는 정렬되어있지 않다.