본문 바로가기
Language/JavaScript (Modern)

[ES6+] Map(), Set() 객체의 특징과 사용법

by 썸머워즈 2022. 1. 14.
반응형

ES6에서 새롭게 등장한 자료구조인 맵(Map) 과 셋(Set) 객체에 대해 알아보자.

1. 맵(Map)

- 맵(Map)은 키가 있는 데이터를 저장한다는 점에서 객체(obj)와 유사하다.

- 객체는 키값으로 문자열만 사용 가능하지만 맵(Map)은 다양한 자료형을 허용한다.

- 객체는 삽입된 순서를 기억하지 못하지만 맵(Map)은 삽입된 순서를 기억해 반복문 사용시 삽입 순서대로 반복된다.

 

1-1. 주요 메서드와 프로퍼티

맵(Map)에서 주요 사용되는 메서드와 프로퍼티는 다음과 같다.

  • new Map(iterable) : 맵 객체를 만든다. (매개변수로 [키, 값] 으로 이루어진 배열이나 이터러블 객체를 전달하면 그안의 값을 복사해 맵에 넣어준다.)
  • set(key, value) : key를 이용해 value를 저장한다.
  • get(key) : key에 해당하는 값을 반환한다. (key가 존재하지 않으면 undefined를 반환한다.)
  • has(key) : key가 존재하면 true, 존재하지 않으면 false를 반환한다.
  • delete(key) : key에 해당하는 값을 삭제한다. (key가 삭제되었으면 true, 키가 없는 등 삭제가 안됐으면 false 반환)
  • clear() : 맵(Map) 안의 모든 요소를 제거한다.
  • size : 맵 객체 안에 있는 요소의 개수를 반환한다.

▷ 예제 1 ) 주요 메서드와 프로퍼티 기본 사용법

let animals = new Map([
    ["wolf", "howling"]
]);

animals.set("dog", "woof");
// use set Chaining
animals.set("cat", "meow")
       .set("elephant", "toot");
       
console.log(animals);
// Map(4) {'wolf' => 'howling', 'dog' => 'woof', 'cat' => 'meow', 'elephant' => 'toot'}

animals.get("dog"); // woof
animals.get("fox"); // undefined

animals.size; // 4

animals.has("elephant"); // true
animals.has("bird"); // false

animals.delete("dog"); // true
animals.delete("bird"); // false

console.log(animals);
// Map(3) {'wolf' => 'howling', 'cat' => 'meow', 'elephant' => 'toot'}

animals.clear();
console.log(animals); // Map(0) {size: 0}

 

1-2. 맵의 요소 반복하기

맵에서는 세 가지 메서드를 통해 맵의 각 요소를 뽑아 반복 작업을 하거나, 배열처럼 내장 메서드인 forEach를 사용한다.

  • keys() : 각 요소의 키를 모은 반복 가능한 iterable(이터러블) 객체를 반환한다.
  • values() : 각 요소의 값을 모은 반복 가능한 iterable(이터러블) 객체를 반환한다.
  • entries() : 요소의 [키, 값]을 한 쌍으로 하는 iterable(이터러블) 객체를 반환한다.
  • forEach(callFuc(value, key, map)) : 배열과 유사하게 내장 메서드인 forEach 반복문을 지원한다.

▷ 예제 2 ) 반복을 위한 메서드의 기본 사용법

let animals = new Map();
animals.set("dog", "woof")
       .set("cat", "meow")
       .set("elephant", "toot");

for (let name of animals.keys()) {
    console.log(name); // dog, cat, elephant
}

for (let howling of animals.values()) {
    console.log(howling); //woof, meow, toot
}

for (let [key, value] of animals) {// animals는 animals.entries()와 동일
    console.log(`${key} goes ${value}`);
    // dog goes woof , cat goes meow, elephant goes toot
}

animals.forEach((value, key, map) => {
    console.log(`${key} : ${value}`);
    // dog : woof, cat : meow, elephant : toot
});

 

1-3. 객체를 맵으로, 맵을 객체로 변환하기

맵은 키가있는 데이터를 저장한다는 점에서 객체와 유사하다고 하였는데, 그래서 그런지 서로 변환이 가능하다.

 

▷ 예제 3 ) 객체를 맵으로 변환하기

let obj = {
    dog : "woof",
    cat : "meow",
    elephant : "toot"
}

let animals = new Map(Object.entries(obj));
console.log(animals);
// Map(3) {'dog' => 'woof', 'cat' => 'meow', 'elephant' => 'toot'}

 

▷ 예제 4 ) 맵을 객체로 변환하기

let animals = new Map();
animals.set("dog", "woof")
       .set("cat", "meow")
       .set("elephant", "toot");
       
let obj = Object.fromEntries(animals);
console.log(obj); //{dog: 'woof', cat: 'meow', elephant: 'toot'}

맵에서 객체로 변환할때는 모든 key값이 문자열로 바뀌니 주의해야한다.

2. 셋(Set)

- 셋(Set)은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션이다.

- 셋(Set)은 키가 없는 값을 저장한다는 점에서 배열(array)과 유사하다.

2-1. 주요 메서드와 프로퍼티

셋(Set)에서 주요 사용되는 메서드와 프로퍼티는 다음과 같다.

  • new Set(iterable) : 셋 객체를 만든다. (배열이나 이터러블 객체를 전달하면 그 안의 값을 복사해 셋에 넣어준다.)
  • add(value) : 값을 추가한다.
  • delete(value) : 값을 제거한다. (삭제되었으면 true, 값이 없는 등 삭제가 안됐으면 false 반환)
  • has(value) : 셋(Set) 내에 값이 존재하면 true, 아니면 false를 반환한다.
  • clear() : 셋(Set) 안의 모든 요소를 제거한다.
  • size : 셋(Set) 객체 안에 있는 요소의 개수를 반환한다.

▷ 예제 1 ) 주요 메서드와 프로퍼티 기본 사용법

let mineSet = new Set([0]);

// use add Chaining
mineSet.add(1).add(5); // Set { 1, 5 }
mineSet.add(5); // Set { 1, 5 }
mineSet.add('some text'); // Set { 1, 5, 'some text' }
let o = {a: 1, b: 2};
mineSet.add(o);
mineSet.add({a: 1, b: 2}); // o와 다른 객체를 참조하므로 괜찮음
console.log(mineSet);
// Set(6) {0, 1, 5, 'some text', {a: 1, b: 2}, {a: 1, b: 2}}

mineSet.has(1); // true
mineSet.has(o); // true
mineSet.has(3); // false

mineSet.size; // 6

mineSet.delete(5); // true
mineSet.delete(3); // false

console.log(mineSet);
// Set(5) {0, 1, 'some text', {a: 1, b: 2}, {a: 1, b: 2}}

mineSet.clear();
// Set(0) {size: 0}

 

2-2. 셋(Set)의 요소 반복하기

셋 역시도 맵과 마찬가지로 세가지의 반복 가능한 요소롤 뽑아내는 메서드와 forEach 메서드가 존재한다.

  • keys() : 셋 내의 모든 값을 포함하는 반복 가능한 iterable(이터러블) 객체를 반환한다.
  • values() : keys()와 동일한 작업을 한다. (맵과의 호환성을 위해 만들어진 메서드다.)
  • entries() : 셋 내의 각 값을 이용해 만든 [value, value] 배열을 포함하는 이터러블 객체를 반환한다. (맵과의 호환성을 위해 만들어진 메서드다.)
  • forEach(callFuc(value, valueAgain, set)) : 내장 메서드인 forEach 반복문이다. (맵과의 호환성을 위해 콜백 변수가 3개이며, 두번째 valueAgain 역시 첫번째 value 와 동일한 값을 반환하다.)

▷ 예제 2 ) 반복을 위한 메서드의 기본 사용법

let mineSet = new Set([0, 1, 2, 3]);

for (let key of mineSet.keys()) {
    console.log(key); // 0, 1, 2, 3
}

for (let value of mineSet.values()) {
    console.log(value); // 0, 1, 2, 3
}

for (let data of mineSet) {// mineSet mineSet.entries()와 동일
    console.log(data); // 0, 1, 2, 3
}

mineSet.forEach((value, valueAgain, set) => {
    console.log(`${value} : ${valueAgain}`);
    // 0 : 0, 1 : 1, 2 : 2, 3 : 3
});

 

2-3. 배열을 셋으로, 셋을 배열로 변환하기

셋은 배열과 유사하다고 말했었는데, 서로 상호작용하는것에 대해 배워보자.

 

▷ 예제 3 ) 배열을 셋으로 변환하기

const array = [0, 1, 2, 3];

let mineSet = new Set(array);
console.log(mineSet); // Set(4) {0, 1, 2, 3}

 

▷ 예제 4 ) 셋을 배열로 변환하기

let mineSet = new Set([0, 1, 2, 3]);

// 1. 전개 연산자 사용
const arr1 = [...mineSet];
console.log(arr1); // [0, 1, 2, 3]

// 2. Array.from 사용
const arr2 = Array.from(mineSet);
console.log(arr2); // [0, 1, 2, 3]

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Keyed_collections

 

키기반의 컬렉션 - JavaScript | MDN

이번 장에서는 입력된 키값을 기준으로 정렬되는 데이터의 집합(자료 구조)에 대해 소개 할 것이다. Map과 Set은 입력된 순서대로 반복적으로 접근 가능한 요소들을 포함하고 있다. 

developer.mozilla.org

참고 : https://ko.javascript.info/map-set

 

맵과 셋

 

ko.javascript.info

반응형
저작자표시


관련글

댓글

TOP

티스토리툴바