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

오늘은 드디어 JavaScript로 Map 다루기 마지막 편입니다. Map 다루는 방법은 많지 않아 두단계로 진행되는 부분이므로 벌써 끝나게 되어 아쉽지만, 얼른 기본을 마무리 짓고 JavaScript를 자유롭게 활용하는 날이 오기를 기대하고 있습니다. 그럼 JavaScript로 Map 다루기 마무리하러 달려가 보겠습니다.

 

 

혹시 이전 포스팅 보고 오시지 않은 분께서는 한번씩 보고 오시는 것을 추천드리기 위해 아래 지난 포스팅 남겨드립니다.

 

 

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

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

 

 

2022.07.23 - [컴공생의 Specification/JavaScript] - [JavaScript] 자료구조 Map 다루기 Step #1

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

 

 

 

 

그럼 JavaScript로 Map 다루기 마지막 Step 시작해보겠습니다.

 

 

JavaScript로 Map 다루기 - Step #2

 

 

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 소개

 

▣ clear()

 

오늘 알아볼 Map 다루기 API 첫번째는 clear() 함수입니다. clear() 함수는 단어 뜻 그대로 Map을 깨끗하게 만드는 함수입니다. 즉, Map의 모든 요소들을 제거하여 빈 Map으로 만드는 함수입니다. 그럼 사용법부터 알아보겠습니다.

 

 

map.clear()

 

 

clear() 함수는 역시 인자 없이 사용하며, 깔끔하게 Map을 비워주는 함수입니다. 그럼 예제로 바로 넘어가보겠습니다.

 

 

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

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

 

 

clear() 함수를 통해 Map 객체가 깨끗하게 비워지는 광경을 예제를 통해 보실 수 있습니다. 정말 깔끔해지는 함수입니다.

 

 

 

 

▣ forEach()

 

두번째 함수는 바로 Map을 순회하는 함수인 forEach() 함수입니다. forEach() 함수는 모든 요소를 순회하면서 동작을 순차적으로 실행하는 함수입니다. 그럼 사용법부터 알아보겠습니다.

 

 

 map.forEach(callback([value[, key[, map]]])[, thisArg])

 

 

Array 다루기 공부할 때 많이 봤었던 파라미터입니다. 바로 forEach()의 인자는 callback 함수입니다. callback 함수의 인자는 첫번째는 value(Map에서 선택된 요소에 대한 value), 두번째는 key(Map에서 선택된 요소에 대한 key), 세번째는 map(전체 Map 객체)입니다. 모두 Optional한 파라미터로 callback 함수에서 필요에 따라 활용할 수 있는 인자들입니다.

 

그럼 forEach() 함수의 예제를 통해 더 알아보겠습니다.

 

 

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

map.forEach((value, key) => {
    console.log(key, value);
})

// 1 one
// 2 two
// 3 three

 

 

Map 다루기 중 유일하게 제일 사용법이 어려운 함수인 forEach() 함수의 예제를 통해 알아보았습니다. 그럼 지금까지 Map의 모든 요소들을 순차적으로 순회하면서 내부 callback 함수를 실행하는 forEach() 함수를 알아보았습니다.

 

 

 

 

▣ entries()

 

entries() 함수는 바로 다음에 나올 keys() 함수와 values() 함수와 함께 Map 객체를 Iterator Object(반복자 객체)로 만들어주는 함수입니다. entries() 함수는 Map 객체를 [key, value]의 쌍들을 가지고 있는 Iterator Object로 만들어주는 함수입니다. 그럼 사용법부터 알아보겠습니다.

 

 

map.entries()

 

 

단순히 Map 객체에 entries() 함수를 사용하므로써 Iterator Object로 반환하여주는 함수입니다. 그럼 예제를 통해 반환되는 Iterator Object를 확인해보겠습니다.

 

 

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

let iterator = map.entries();
console.log(iterator.next().value);    // [1, 'one']

iterator = map.entries();

for(let [key, value] of iterator) {
    console.log(key, value);
}

// 1 one
// 2 two
// 3 three

 

 

위 예제를 보면 Iterator Object를 다루는 두가지 방법을 보실 수 있습니다.

 

첫번째 Iterator Object의 next() 함수를 활용하여 다음 객체를 접근하여 순회할 수 있는 방법이 있습니다.

두번째 Iterator Object를 for of문을 통해 순회하여 모든 객체를 접근할 수 있는 방법이 있습니다.

 

위와 같이 Map 객체에서 entries() 함수를 통해 Iterator Object로 만들어 순회하는 예제를 통해 entries() 함수를 알아보았습니다.

 

 

 

 

▣ keys() / values()

 

keys()와 values() 함수는 entries() 함수와 유사하게 Iterator Object를 만드는 함수이지만, keys() 함수는 Map에 속해있는 요소들 중 key로만 만들어진 Iterator Object를 만드는 함수입니다. 그럼 values() 함수는 Map에 속해있는 요소들 중 value로만 이루어진 Iterator Object를 만드는 함수입니다. 

 

그럼 keys() 함수와 values() 함수의 사용법부터 알아보겠습니다.

 

 

map.keys()

---

map.values()

 

 

위와 같이 keys()와 values() 함수의 사용법은 간단합니다. 그럼 예제를 통해 keys()와 values() 함수의 반환되는 값을 활용을 확인해보겠습니다.

 

 

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

const keyIterator = map.keys();
const valueIterator = map.values();

console.log(keyIterator);                // [Map Iterator] { 1, 2, 3 }
console.log(keyIterator.next().value);   // 1
console.log(valueIterator);              // [Map Iterator] { 'one', 'two', 'three' }
console.log(valueIterator.next().value); // one

 

 

Map 다루기 함수인 keys()와 values() 함수의 사용 예제를 확인할 수 있습니다. Map Iterator 객체를 만드는 함수로 key로만 이루어진 Iterator를 만드는 keys() 함수, value로만 이루어진 Iterator를 만드는 values() 함수를 알아보았습니다.

 

 

 

 

JavaScript Map 다루기를 마치며...

오늘 JavaScript Map 다루기 1탄, 2탄을 통해 알아보았습니다.

 

이렇게 정리하고 나니 별거 아닌 것처럼 보일지 모르겠지만, 머릿속에는 각인되어 앞으로 JavaScript로 Map 객체를 사용함에 있어서 더 편하고 자유롭게 활용할 수 있을 것 같습니다. 

 

제일 기억에 남는 내용은 맨 처음에 알아봤던 size 변수입니다. JavaScript의 배열로 Map 객체와 유사하게 사용할 수 있어 많이 활용했었는데, 그 두 방법에서의 가장 큰 차이가 바로 size를 직접 알 수 있느냐, 없느냐에 대한 문제였습니다.

 

이로 인해 Map 객체의 활용도를 개발에 있어서 높일 수 있는 계기가 된것 같아 유익한 경험이었습니다.