JavaScript - 맵 객체

안녕하세요, 야심 찬 프로그래머 여러분! 오늘은 자바스크립트의 fascinaiting한 세계로 안내해 드리겠습니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 이 여정을 안내해 드리게 되어 기쁩니다. 그럼, 가상의 사고帽을 쓰고, 이 모험을 함께 떠나보겠습니다!

JavaScript - Maps

맵(Map)이란?

자, 구체적인 내용으로 들어가기 전에 맵(Map)이 무엇인지 이해해 보겠습니다. 마법의 상자가 있다고 상상해 보세요. 그 상자에 키를 넣으면 바로 해당 키에 대응하는 값을 얻을 수 있습니다. 이것이 자바스크립트에서의 맵(Map)입니다 - 키와 값의 쌍을 저장할 수 있는 컬렉션으로, 키와 값은 모든 타입이 될 수 있습니다. 멋지죠?

문법

맵(Map)을 생성하는 기본 문법은 매우 간단합니다:

let myMap = new Map();

여기서 우리는 새로운 맵(Map) 객체를 생성하고 myMap 변수에 할당하고 있습니다. 마법의 상자를 여는 것과 같습니다!

매개변수

맵(Map)을 생성할 때, 선택적으로 이터러블 객체(예: 배열)를 전달할 수 있습니다. 이터러블 객체는 키-값 쌍을 포함할 수 있습니다:

let myMap = new Map([
['key1', 'value1'],
['key2', 'value2']
]);

이 예제에서 우리는 맵(Map)을 생성하고 시작부터 두 개의 키-값 쌍을 저장하고 있습니다. 마법의 상자에 사전에 몇 가지 것들을 넣는 것과 같습니다!

맵(Map) 프로퍼티

맵(Map)은 유용한 프로퍼티를 가지고 있습니다:

프로퍼티	설명
size	맵(Map)에 있는 키-값 쌍의 수를 반환합니다

이를 실제로 보겠습니다:

let myMap = new Map([
['apples', 5],
['bananas', 3],
['oranges', 2]
]);

console.log(myMap.size); // 출력: 3

이 과일 예제에서 우리의 맵(Map)은 3개의 키-값 쌍을 가지고 있으므로 size는 3을 반환합니다. 마법의 상자에 몇 개의 칸이 차 있나 세는 것과 같습니다!

맵(Map) 메서드

맵(Map)은 여러 가지 유용한 메서드를 가지고 있습니다. 표 형식으로 보겠습니다:

메서드	설명
set()	새로운 키-값 쌍을 맵(Map)에 추가합니다
get()	키에 대응하는 값을 반환합니다
has()	키가 맵(Map)에 있는지 확인합니다
delete()	키-값 쌍을 맵(Map)에서 제거합니다
clear()	맵(Map)에서 모든 키-값 쌍을 제거합니다

이제 이 메서드들을 몇 가지 예제로 실제로 보겠습니다!

set() 메서드

let petMap = new Map();

petMap.set('dog', 'Buddy');
petMap.set('cat', 'Whiskers');
petMap.set('fish', 'Nemo');

console.log(petMap);
// 출력: Map(3) { 'dog' => 'Buddy', 'cat' => 'Whiskers', 'fish' => 'Nemo' }

이 예제에서 우리는 동물과 그 이름을 맵(Map)에 추가하고 있습니다. 마법의 상자에 다양한 칸을 레이블링하는 것과 같습니다!

get() 메서드

console.log(petMap.get('dog')); // 출력: Buddy
console.log(petMap.get('elephant')); // 출력: undefined

여기서 우리는 키를 사용하여 값을检索하고 있습니다. 'dog'을 요청하면 'Buddy'를 얻지만, 'elephant'을 요청하면 존재하지 않으므로 undefined를 얻습니다. 마법의 상자에 손을 넣고 무언가를 찾거나 손이 빈 손으로 돌아오는 것과 같습니다!

has() 메서드

console.log(petMap.has('cat')); // 출력: true
console.log(petMap.has('elephant')); // 출력: false

has() 메서드는 키가 맵(Map)에 있는지 확인합니다. 마법의 상자에 'cat' 레이블이 있는지 물어보는 것과 같습니다.

delete() 메서드

petMap.delete('fish');
console.log(petMap);
// 출력: Map(2) { 'dog' => 'Buddy', 'cat' => 'Whiskers' }

여기서 우리는 'fish' 항목을 맵(Map)에서 제거하고 있습니다. 가可怜한 Nemo!

clear() 메서드

petMap.clear();
console.log(petMap); // 출력: Map(0) {}

clear() 메서드는 맵(Map)을 완전히 비웁니다. 마법의 상자를 비우는 것과 같습니다!

JavaScript Map 생성자()

맵(Map) 생성자는 새로운 맵(Map) 객체를 생성할 수 있습니다:

let newMap = new Map();

이터러블 객체로 초기화할 수도 있습니다:

let initMap = new Map([
['key1', 'value1'],
['key2', 'value2']
]);

이는 마법의 상자를 열고 몇 가지 초기 칸과 아이템을 설정하는 것과 같습니다!

예제

이제 모든 것을 하나로 모아서 재미있는 예제를 보겠습니다. 가정해 봅시다. 우리는 비디오 게임 대회 점수를 추적하고 있습니다:

let gameScores = new Map();

// 점수 추가
gameScores.set('Alice', 1000);
gameScores.set('Bob', 850);
gameScores.set('Charlie', 1200);

console.log(gameScores);
// 출력: Map(3) { 'Alice' => 1000, 'Bob' => 850, 'Charlie' => 1200 }

// 점수 업데이트
gameScores.set('Bob', 900);

// 플레이어 존재 여부 확인
console.log(gameScores.has('David')); // 출력: false

// 플레이어 점수 가져오기
console.log(gameScores.get('Charlie')); // 출력: 1200

// 플레이어 제거
gameScores.delete('Alice');

console.log(gameScores);
// 출력: Map(2) { 'Bob' => 900, 'Charlie' => 1200 }

// 플레이어 수 가져오기
console.log(gameScores.size); // 출력: 2

이 예제에서 우리는 맵(Map)을 점수판처럼 사용하고 있습니다. 쉽게 플레이어를 추가하고, 점수를 업데이트하고, 플레이어가 존재하는지 확인하고, 점수를 가져오고, 플레이어를 제거하고, 플레이어 수를 확인할 수 있습니다. 마법의 점수판을 쉽게 조작할 수 있습니다!

맵(Map)과 자바스크립트 객체 비교

이제 여러분은 "왜 맵(Map)을 사용해야 하나?"라는 의문이 들 수 있습니다. 멋진 질문입니다! 비교해 보겠습니다:

키 타입: 객체는 문자열이나 심볼 타입의 키만 허용하지만, 맵(Map)은 모든 타입의 키를 허용합니다!
순서: 맵(Map)은 요소의 추가 순서를 유지하지만, 객체는 어떤 순서도 보장하지 않습니다.
크기: 맵(Map)은 size 프로퍼티를 사용하여 크기를 쉽게 얻을 수 있지만, 객체는 속성의 수를 수동으로 계산해야 합니다.
성능: 자주 추가하고 제거하는 키-값 쌍의 경우 맵(Map)이 더 나은 성능을 제공합니다.

다음은 이를 설명하는 빠른 예제입니다:

let obj = {
'string key': 'string value',
1: 'number value',
[{}]: 'object key' // 이는 '[object Object]'로 변합니다
};

let map = new Map([
['string key', 'string value'],
[1, 'number value'],
[{}, 'object key'] // 이는 예상대로 작동합니다
]);

console.log(Object.keys(obj).length); // 출력: 3
console.log(map.size); // 출력: 3

console.log(obj['[object Object]']); // 출력: 'object key'
console.log(map.get({})); // 출력: undefined (다른 객체이므로)

이 예제에서 우리는 맵(Map)이 다양한 키 타입을 더 잘 처리하는 것을 볼 수 있습니다. 마법의 상자가 더 유연하고 강력한 것처럼!

그리고 여러분, 여기까지입니다! 우리는 자바스크립트 맵(Map)을 생성하고 조작하는 방법, 그리고 객체와의 비교를 탐구했습니다. 이 마법의 상자에 대한 지식이 여러분의 코드에 유용하게 되기를 바랍니다. 연습이 완벽을 만듭니다, 그러니 맵(Map)을 자신의 코드에서 실험해 보세요. 행복한 코딩 되세요, 그리고 코드가 항상 버그 없이 잘 동작하길 바랍니다!

Credits: Image by storyset