본문 바로가기

JavaScript

36. 맵(map)

맵(map)

- key, Value로 이루어진 데이터 집합의 자료구조

맵(map) 선언
const 맵이름 = new Map([['키1', '값1'], ['키2', '값2'],...]);

맵(map) 사용
출력
const map = new Map([
    ['apple', '🍎'], ['banana', '🍌']
]);

console.log(map); // Map(2) {'apple' => '🍎', 'banana' => '🍌'}
size

- 맵의 요소의 갯수를 반환

const map = new Map([
    ['apple', '🍎'], ['banana', '🍌']
]);

console.log(map.size); // 2
has("key")

- 키의 존재를 확인하여, boolean 값을 반환

const map = new Map([
    ['apple', '🍎'], ['banana', '🍌']
]);

console.log(map.has('apple')); // true
console.log(map.has('banana')); // true
console.log(map.has('orange')); // false
forEach

- 순회하며 key와 value 반환

const map = new Map([
    ['apple', '🍎'], ['banana', '🍌']
]);

map.forEach((value, key) => console.log(key, value));
// apple 🍎
// banana 🍌
get()

- key를 통해 value를 찾음, key가 없으면 undefined 반환

const map = new Map([
    ['apple', '🍎'], ['banana', '🍌']
]);

console.log(map.get('apple')); // 🍎
console.log(map.get('banana')); // 🍌
console.log(map.get('orange')); // undefined
set("key", "value")

- 맵.set("key", "value")를 통해 값을 추가함

const map = new Map([
	['apple', '🍎'], ['banana', '🍌']
]);

map.set('orange', '🍊');
console.log(map); // Map(3) {'apple' => '🍎', 'banana' => '🍌', 'orange' => '🍊'}
delete("key")

- key를 통해 값을 삭제함

const map = new Map([
    ['apple', '🍎'], ['banana', '🍌'], ['orange', '🍊')]
]);

map.delete('orange');
console.log(map); // Map(2) {'apple' => '🍎', 'banana' => '🍌'}
clear()

- 맵의 값을 전부 삭제

const map = new Map([
    ['apple', '🍎'], ['banana', '🍌']
]);

map.clear();
console.log(map); // Map(0) {size: 0}
Object와 Map 비교

 

// 맵 선언
const map = new Map([
    ['apple', '🍎'], ['banana', '🍌']
])'

// 오브젝트 선언
const obj = {'apple':'🍎', 'banana': '🍌'};

// Uncaught TypeError: obj.get is not a function
// console.log(obj.get('apple')); // 오브젝트는 get() 함수가 없으므로, 오류!
console.log("obj: " + obj['apple']); // 🍎
console.log("obj: " + obj.apple); // 🍎
console.log("map:" + map['apple']); // undefined
console.log("map:" + map.get('apple')); // 🍎
console.log("map:" + map.apple); // undefined

'JavaScript' 카테고리의 다른 글

38. 프로미스(Promise)  (0) 2023.04.13
37. 예외처리  (0) 2023.04.13
35. 세트(Set)  (0) 2023.04.13
34. 스프레드(Spread)  (0) 2023.04.12
33. 제너레이터(Generator)  (0) 2023.04.12