JavaScript의 지도

이 게시물은 원래 attacomsian.com/blog에 게시되었습니다.


지도는 키-값 쌍의 컬렉션을 만들 수 있는 JavaScript의 새로운 데이터 구조입니다. JavaScript와 함께 ES6(ES2015라고도 함)과 함께 도입되었습니다. 맵 개체는 개체와 기본 요소를 모두 키와 값으로 저장할 수 있습니다.

맵은 키-값 데이터를 저장하는 데에도 사용되는 객체와 유사합니다. 그러나 주요 차이점은 맵 키는 모든 유형이 될 수 있으며 문자열과 기호에만 국한되지 않는다는 것입니다. 객체와 달리 맵의 크기를 얻는 것도 더 쉽습니다.

지도 초기화

세트와 마찬가지로 Map() 생성자를 사용하여 빈 맵을 만들 수 있습니다.

const items = new Map(); 

맵을 초기화하기 위해 생성자에 iterable(예: 배열)을 전달할 수도 있습니다.

const items = new Map([['🦅', 'Eagle'], ['🐶', 'Dog']]); 

지도 방법

주요 메서드와 속성은 set() , get() , has() , size , delete() 및 clear() 입니다. 다음은 이러한 방법의 사용을 보여주는 지도의 간단한 예입니다.

const items = new Map();

// add items
items.set('🐶', 'Dog');
items.set('🦅', 'Eagle');
items.set('🚄', 'Train');
items.set(45, 'Number');
items.set(true, 'Boolean');

// get item
items.get(45); // Number
items.get('🐶'); // Dog
items.get('🐺'); // undefined

// check if key exists
items.has('🚄'); // true
items.has('🐺'); // false

// get items count
items.size; // 5

// delete item
items.delete('🦅'); // true
items.delete('🦅'); // false - already removed

// delete all items
items.clear();

세트와 마찬가지로 맵 키도 고유합니다. 동일한 키로 두 번 이상 set()를 호출하면 여러 키-값 쌍이 추가되지 않습니다. 대신 값 부분이 최신 값으로 대체됩니다.

const animals = new Map();

animals.set('🐺', 'Wolf');
animals.set('🐺', 'Wolf Face');

console.log(animals); // Map(1) {"🐺" => "Wolf Face"}

지도의 개체

맵을 사용하면 모든 데이터 유형을 키 또는 값으로 저장할 수 있으므로 객체 리터럴, 배열 및 함수와 같은 복잡한 객체도 저장할 수 있습니다.

const props = {
    browser: 'Chrome',
    os: 'Ubuntu 19.04'
};

const hamburger = () => '🍔'; 

const things = new Map();

things.set('birds', ['🦉', '🦅']);
things.set('user', {name: 'John Doe', planet: 'Earth'});
things.set(props, 59);
things.set(hamburger, 'What is the food?');

things.get(props); // 59
things.get(hamburger); // What is the food?

지도 반복

객체와 달리 맵을 반복할 때 키-값 쌍은 삽입된 것과 동일한 순서로 반환됩니다. for...of 루프를 사용하여 모든 키-값 쌍을 반복할 수 있습니다.

const foods = new Map([
    ['🍌', 'Banana'],
    ['🍕', 'Pizza'],
    ['🥒', 'Cucumber'],
    ['🌽', 'Maize'],
]);

for (const [key, value] of foods) {
    console.log(`${key}: ${value}`);
}

// 🍌: Banana
// 🍕: Pizza
// 🥒: Cucumber
// 🌽: Maize

마찬가지로 내장forEach() 메서드를 사용하여 모든 요소를 ​​반복할 수도 있습니다.

foods.forEach((key, value) => {
    console.log(`${key}: ${value}`);
});

키와 값

맵은 키와 값에만 액세스할 수 있는 keys() 및 values() 메서드를 제공합니다. 이 메서드는 모든 키 또는 값을 반복하는 데 사용할 수도 있는 새로운 반복 가능한 객체를 반환합니다.

for (const key of foods.keys()) {
    console.log(key);
}

for (const value of foods.values()) {
    console.log(value);
}

Map 객체에는 항목entries()에 대해 이터러블을 반환하는 [key, value] 메서드도 있습니다. 이 방법은 for...of 루프에서 기본적으로 사용됩니다. 다음은 예입니다.

for (const [key, value] of foods.entries()) {
    console.log(`${key}: ${value}`);
}

sets 과 유사하게 next() 메서드에서 반환된 반복 가능한 항목에서 entries() 메서드를 호출하여 키-값 쌍을 하나씩 탐색할 수 있습니다.

const entries = foods.entries();

console.log(entries.next()); // {value: ["🍌", "Banana"], done: false}

결론

맵은 키-값 쌍의 모음이며, 이를 통해 객체와 프리미티브를 키와 값으로 저장할 수 있습니다. 객체와 달리 맵 키는 객체, 배열, 함수 또는 다른 맵과 같은 모든 유형이 될 수 있습니다. 세트와 유사하게 키는 고유합니다. 맵에서 한 번만 발생할 수 있습니다. 맵 객체를 반복할 때 키-값 쌍은 맵에 삽입된 것과 동일한 순서로 반환됩니다.


✌️ 저는 최신 JavaScript, Node.js, Spring Boot 및 웹 개발의 모든 것에 대해 글을 씁니다. Subscribe to my newsletter 매주 웹 개발 튜토리얼 및 팁을 받으십시오.


이 기사가 마음에 드시나요? . 및 에서 나를 팔로우할 수도 있습니다.