[JavaScript] 자료구조 Map 다루기 Step #1

안녕하세요. 오늘은 JavaScript의 자료구조 중 하나인 Map을 다뤄볼까 합니다. 혹시 Map에 대해 잘 모르시거나 더 알아보고 싶으신 분들은 이전의 Map이란 무엇인가?를 알아본 이전 글 올려드릴테니 한번 보고 오시는 것을 추천드리겠습니다.

 

 

2022.07.20 - [컴공생의 Specification/JavaScript] - [JavaScript] 자료구조 Map이란 무엇인가?

[JavaScript] 자료구조 Map이란 무엇인가?

 

 

JavaScript로 Map 다루기 - Step #1

 

 

JavaScript Map Object MDN 사이트 소개

 

그럼 오늘은 JavaScript로 Map 다루기를 알아보겠습니다.

제일 먼저 JavaScript Map 다루기를 위해서 참고할 웹 사이트 하나 소개하고 가도록 하겠습니다. 이 웹사이트는 JavaScript 기반 모든 Object 및 변수 등 다양한 JavaScript 활용하는데 있어 기본서 같은 사이트 입니다.

 

※ 참고로 아래 웹 사이트인 JavaScript MDN Map은 영어로 되어있다는 것을 참고하시기 바랍니다.

 

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Map - JavaScript | MDN

 

 

그럼 위 JavaScript의 기본서에서 Map Object 페이지를 참고하여 JavaScript Map 다루기의 주요 함수 리스트를 뽑아보겠습니다. 

 

 

 

 

JavaScript Map 다루기 API 리스트

 

이번에 다룰 JavaScript Map 다루기 함수들은 아래에 굵은 글씨로 표시해두었으니 글 읽기 전에 참고하시기 바랍니다.

 

• size
• get()
• set()
• delete()
• has()
• clear()
• forEach()
• entries()
• keys()
• values()

 

이번 JavaScript Map 다루기 Step #1에서 다룰 Map API는 size를 비롯하여 get(), set(), delete(), has() 함수들입니다. 이 함수들은 Map 다루기에 있어 기본과 같은 것이기에, 꼭 알고 가셔야하는 내용입니다. 그럼 지금부터 자세하게 톺아보겠습니다.

 

 

 

 

Map 다루기 API 소개

 

Map 다루기 API 소개에 앞서 Map 선언하는 방법을 먼저 알아보고 가겠습니다.

 

 

★ Map 선언방법

 

Map 선언하는 방법은 간단합니다. 여느 Object와 생성 방법이 다르지 않으므로 바로 사용법으로 알아보겠습니다.

 

 

new Map([iterable])

 

 

사용법은 새로 생성하는 의미를 가진 new와 함께 Map()을 작성하면 바로 Map 객체를 선언할 수 있습니다. 이 때, () 안에 iterable한 객체를 인자로 입력한다면 해당 객체를 통해 Map을 초기화하여 생성할 수 있습니다. 그럼 예제를 통해 JavaScript로 Map 선언하는 방법에 대해 알아보겠습니다.

 

 

const emptyMap = new Map();

console.log(emptyMap);       // Map(0) {}

const initialMap = new Map([
   [1, 'one'],
   [2, 'two'],
   [3, 'three']
]);

console.log(initialMap);     // Map(3) { 1 => 'one', 2 => 'two', 3 => 'three' }

 

 

위와 같이 Map을 두가지 방법으로 빈 Map과 초기화된 Map을 선언할 수 있습니다. 첫번째 Map 선언은 new Map()을 통해 빈 Map 객체를 생성하였으며, 두번째 Map 선언은 new Map(iterable)을 통해 iterable 객체로 초기화 값이 입력된 Map 객체를 생성하는 코드를 보실 수 있습니다.

 

 

또한, map을 출력했을 때의 형태도 보시고 가시면 Map을 이해하는데 있어 도움이 될 것 같아 짚고 넘어가보겠습니다. Map의 출력은 Object 명이 출력되며, ()안에 Map의 크기를 함께 출력해줍니다. 그리고 {} 안에는 key와 value의 쌍 형태를 가시적으로 볼 수 있도록 출력해줍니다. 이렇게 Map의 내부를 한눈에 볼 수 있도록 JavaScript는 출력해주고 있습니다. 이 부분은 개발 중간에 Debug을 통해서 Map의 값을 확인할 수도 있겠지만, 콘솔 출력으로도 간편하게 볼 수 있다는 점을 확인하고 가시기 바랍니다.

 

 

그럼 본격적으로 JavaScript Map 다루기 API를 알아보겠습니다.

 

 

 

 

◈ size

 

제일 먼저 알아볼 API는 size입니다. size는 ()가 없기에 실제로는 함수가 아니라 Map 객체의 변수라고 보시면 편할 것입니다. 즉, Map 객체는 size라는 크기에 대한 값을 변수로 관리하고 있기에, Map의 전체 길이를 알고자할 때 O(1)의 시간복잡도를 갖는 이유라고 보실 수도 있습니다. 그럼 Map의 길이를 확인하는데 사용되는 변수인 size의 사용법을 알아보겠습니다.

 

 

map.size

 

 

size는 변수이기에 사용법 또한 변수를 불러오는 것과 같이 가져올 수 있습니다. 그러면 size의 예제를 확인해보겠습니다.

 

 

const map = new Map();

console.log(map.size);    // 0

map.set(1, 100);
map.set(2, 400);

console.log(map.size);    // 2

 

 

예제로 확인하셨겠지만, size는 실제 Map 객체 내 요소들의 개수를 number 타입의 값으로 반환합니다. 

 

 

 

 

◈ get()

 

진짜 Map 다루기 API로 첫번째로 알아볼 Map API는 get() 함수입니다. get() 함수는 Map을 다룰 때 있어서 없어서는 안될 함수로, Map의 Key를 인자로 입력하여 Value를 가져오는 함수입니다. 그럼 먼저 get() 함수의 사용법부터 알아보겠습니다.

 

 

map.get(key)

 

 

get() 함수는 Map 객체의 요소 중 key로 저장된 데이터의 Value를 가져올 수 있습니다. 이 때, Map에 key로 저장되어있는 데이터가 없다면 undefined를 반환하는 점 주의해야합니다. 그럼 이제 예제를 통해 Map 다루기 API의 get() 함수를 알아보겠습니다.

 

 

const map = new Map([
    [1, 100],
    [2, 400],
    [3, 900]
]);

console.log(map.get(1));    // 100
console.log(map.get(4));    // undefined

 

 

위의 예제는 key가 1, 2, 3을 갖고 있는 Map 객체를 선언하여 key가 1인 Value를, key가 4인 Value를 찾아 출력하는 예제입니다. 이 때, 선언된 Map 객체에 key가 1인 데이터의 value가 100이므로 출력 값이 100임을 확인할 수 있습니다. 또한, key가 4인 데이터는 선언된 Map 객체에 없는 데이터이므로 출력 값이 undefined임을 예제를 통해 확인할 수 있습니다.

 

 

 

 

◈ set()

 

이번 Map 다루기 함수는 바로 위의 get() 함수와 함께 가장 중요한 API입니다. set() 함수는 유일한 key에 대한 value를 Map에 추가하거나 변경하는 함수입니다. 사용법을 통해 set() 함수에 대해 자세하게 알아보겠습니다.

 

 

map.set(key, value)

 

 

set() 함수는 위의 사용법과 같이 key에 대하여 value를 Map에 추가하거나 변경하는 함수입니다. 이 때, Map에 set() 함수를 통해 입력한 key가 존재하지 않는다면 key에 대한 value를 추가하며, key가 존재한다면 기존에 있던 key에 대한 value 값을 변경합니다. 또한 set() 함수는 요소가 추가된 Map 객체를 반환합니다.

 

그럼 예제를 통해 자세하게 알아보겠습니다.

 

 

const map = new Map();

map.set(1, 100);
console.log(map.get(1));    // 100

map.set(1, 200);
console.log(map.get(1));    // 200

 

 

위의 예제와 같이 처음 set() 함수의 사용은 빈 Map에 1이라는 key에 100의 값인 value를 추가하는 예입니다. 두번째 set() 함수는 1이라는 key가 이미 존재하므로 해당 value를 200으로 변경하는 예입니다. 콘솔에 출력하는 값을 통해 기능을 확인하실 수 있습니다. 그럼 이것으로 Map 다루기 set() 함수 알아보기를 마치도록 하겠습니다.

 

 

 

 

◈ delete()

 

오늘 배울 Map 다루기 API 네번째는 delete() 함수입니다. delete() 함수는 set() 과 쌍을 이룹니다. set() 함수는 key에 value를 Map에 추가하는 함수였고, delete() 함수는 set() 함수와 반대로 key의 요소를 Map에서 제거하는 함수입니다. 그럼 사용법을 통해 자세하게 알아보겠습니다.

 

 

map.delete(key)

 

 

바로 delete() 함수는 key를 인자로 받으며 입력된 key의 요소를 Map에서 제거하는 함수입니다. 이 때, 실제 key의 요소가 존재하여 제거에 성공하였다면 true를 key의 요소가 존재하지 않아 제거에 실패하였다면 false를 반환합니다.

 

바로 예제를 통해 delete() 함수를 더 이해해보겠습니다.

 

const map = new Map([
   [1, 'one'],
   [2, 'two'],
   [3, 'three']
]);

map.delete(2);

console.log(map.get(2));    // undefined
console.log(map);           // Map(2) { 1 => 'one', 3 => 'three' }

 

 

위 예제에서는 delete() 함수를 통해 key가 2인 요소를 제거한 후의 Map의 결과를 보실 수 있습니다.

 

즉, key가 2인 value를 출력하는 첫번째 출력 값은 key가 2인 요소가 Map에서 제거되었기 때문에 undefined를 가져와 출력하고 있으며, 두번째 출력은 key가 2인 요소를 제외된 나머지 요소를 갖고 있는 Map의 출력 예제입니다.

 

 

 

 

◈ has()

 

오늘 JavaScript로 Map 다루기에서 알아볼 마지막 API인 has() 함수입니다. has() 함수는 key의 요소를 가지고 있는지 여부를 반환하는 함수로, key의 요소를 가지고 있다면 true를, key의 요소를 Map이 가지고 있지 않다면 false를 반환합니다. 그럼 사용법부터 알아보겠습니다.

 

 

map.has(key)

 

 

역시 has() 함수는 key를 인자로 받아 해당 key가 Map에 존재하는지 여부를 알 수 있는 함수입니다. 그럼 예제를 통해 has() 함수에 대해 더 알아보겠습니다.

 

 

const map = new Map([
   [1, 'one'],
   [2, 'two'],
   [3, 'three']
]);

console.log(map.has(1));    // true
console.log(map.has(4));    // false

 

 

has() 함수는 첫번째 예제에서 1의 key가 있는지 여부를 판단하여 Map에 존재하기 때문에 true를 반환하였습니다. 두번째 예제에서는 4의 key가 없음을 확인하여 false를 반환한 것을 확인할 수 있습니다.

 

 

 

 

JavaScript Map 다루기 다음을 기약하며...

 

오늘은 JavaScript로 Map 다루기 1탄으로 size 변수와 get(), set(), delete(), has() 함수를 알아보았습니다. 다음 JavaScript Map 다루기 2탄에는 나머지 API들을 함께 공부해보겠습니다.