[JS] : Map

Map?

배열에서 사용하는 map메서드가 아닌 JS의 "자료구조" 중 하나인 map에 대해 알아보았다.

맵을 알기쉽게 설명하자면 "객체"라는 키워드로 설명이 가능한 것 같다.
다만,기존의 객체보다 법용성이 넓은 녀석이라고 생각하고 있다.

범용성의 차이를 예로 들자면,

객체가 가지는 "key" 값에는 문자열 또는 심볼타입이 자리할 수 있으나,

Map이 가지는 "key" 값에는 형식에 제한이 없을 정도로 다양한 데이터 타입이 자리할 수 있다고 한다.
또한, 순서가 보장된다.

 

Map 의 사용 목적

계속해서 새로운 자료구조 형태가 나오는 이유는 기존의 것으로 표현하는데 제한이 생긴다거나 보다 효율적이고 빠르게 일처리를 하기 위함이라고 생각한다.

우리가 프로젝트를 진행하면서 매일 새로운 코드를 커밋하는 것과 같이 보다 더 발전시키고자 나온 녀석중에 하나이지 않을까 싶다.

기존의 객체보다 더 다양한 용도로 사용이 가능하다고 하니 어떻게 사용하는지 아래에서 알아보자.

 

형태

Key - Value

key 에는 어떠한 유형의 데이터 타입이라도 들어올 수 있으며,

그 이유는, map은 key의 정렬순서대로 저장이 되기 때문이라고 한다.

 

Map 생성

const myMap = new Map();

 

Map 생성 확인

console.log(myMap);

// 출력값 : Map(0) {}

가끔 console.log로 여러가지를 확인하다 보면 아래와 같은 형식의 출력값들을 마주친다.

[Function (anonymous)]

Map 을 생성하고 console.log()로 생성한 map을 확인하자,
Map(0) {} 라는 처음보는 녀석이 출력되서 신기했다.

확실히 내가 여태 프로그래밍한 코드중에는 Map이라는 객체가 없었나 보다.

 

출력 값 해석

Map(0) {}

JS의 Map이라는 객체에 어떤 데이터도 담겨있지 않기 때문에 0 이라고 표시가 된 것이다.
{}안에는 Map에 저장되어 있는 key-value pair가 들어가게 된다.

 

Map.set(key, value)

Map 객체에 데이터 저장은 set()메서드를 사용한다.

set의 ()안에는 저장할 데이터의 key와 value를 넣어주면 된다.

 

예시

myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

 

출력 값

console.log(myMap);

// Map(3) { 'one' => 1, 'two' => 2, 'three' => 3 }

key 와 value 사이의 => 는 key와 value 를 매핑하는 "기호"라고 생각하면 된다.

"one"이라는 key값이 1이라는 value값과 하나의 쌍을 이루고 있다는 뜻으로 해석한다.

Map(3)의 "3"은 현재 Map 객체안에 3개의 key-value pair가 들어있다는 뜻이다.

 

Map.get(key)

map에서 원하는 데이터를 조회하고자 할때는 get()메서드를 사용하고 ()안에는 해당 값의 key값을 문자열 형태로 넣어준다.

 

예시

// get 오류 코드
console.log(myMap.get(one));

// ReferenceError: one is not defined

조회할 데이터의 key는 항상 "문자열"로 써준다.

// get 정상 코드

console.log(myMap.get('one'));

// 1

괄호안에 key값을 문자열로 사용하게 되면, 정상적으로 "one"이 가지는 value값인 1이 출력되는걸 확인할 수 있다.

 

size()

map이 가지는 key-value pair의 크기=길이를 확인할 수 있는 메서드이다.

 

예시

console.log(myMap.size);

 

출력 값

3

 

has(key)

map 이 가지고 있는 데이터인지 존재여부를 확인해주는 메서드이다.

 

예시

// has 오류 코드
console.log(myMap.has(three));

ReferenceError: three is not defined

// has 정상 코드

console.log(myMap.has('three'));

 

출력 값

출력은 true or false인 Boolean 값이 출력된다.

true

역시 키값을 적어주는 괄호안에는 "문자열" 형태로 작성해야 한다.

 

delete(key)

map이 가지고있는 key-value pair를 삭제하는 메서드이다.

 

예시

console.log(myMap.delete('three'));

 

출력 값

true

delete 메서드를 사용해보니 Boolean 값이 나온다.

그럼 현재 map 객체가 갖고있지 않은 데이터를 삭제하려고 하면 어떤값이 나올지 실험해봤다.

console.log(myMap.delete('four'));

// 출력 값 : false

예상한대로 false 가 출력되는 걸 확인할 수있다.

 

delete 적용 확인

const myMap = new Map();

// 데이터 저장
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

// 데이터 삭제
console.log(myMap.delete('three')); // true

// 삭제 후의 myMap 체크
console.log(myMap); // Map(2) { 'one' => 1, 'two' => 2 }

잘 적용된것을 확인 가능 하다.

 

clear()

map 객체가 갖고있는 모든 데이터를 삭제하는 메서드이다.

 

예시

myMap.clear();

console.log 로 확인이 가능한지 테스트 해봤는데 undefined가 나온다.

그래서 메서드를 사용하고 아래에 console.log(myMap)으로 데이터가 지워졌는지 확인해 보았다.

 

출력 값

console.log(myMap);

// 출력 값 : Map(0) {}

clear 메서드가 잘 적용된것을 확인할 수 있다.

 

느낀 점

나는 오늘 Map 객체라는것을 처음 접해봤다.

map은 그저 배열 조건 반복문이라고만 생각했었는데, 이렇게 새로운 객체인 JS의 Map을 알게되니 재밌었다.

다음에는 set이라는 자료구조에 대해서도 공부해볼 생각이다.

 

#JS #자료구조

#map