[JS] Map, Set(객체? 배열?)

📌 Map이란?

key:value 형태로 저장할 수 있는 자료구조이다.

 

⭐️ Map 특징

• key 값으로 다양한 자료형이 가능하다.
• 삽입 순서를 기억하고(이터러블 객체), 삽입된 순서대로 순회한다.

---

📌 Map vs 객체

⭐️ 공통점

• key-value 형태로 저장한다.
• 인덱스를 사용하지 않는다.
• key 값 중복을 허용하지 않는다.

 

⭐️ 차이점

• map은 key 값으로 다양한 자료형이 가능하지만, 객체의 key 값은 항상 string 형태이다.
• map은 삽입된 순서를 기억하지만, 객체는 삽입된 순서를 기억하지 않는다.

---

📌 Map 메서드

• new Map() - 맵을 생성한다.
• map.set(key, value) - key:value 형태로 요소를 저장한다.
• map.get(key) - key에 해당하는 value 값을 반환한다. key가 존재하지 않으면 undefined를 반환한다.
• map.has(key) - key가 존재하면 true를, 존재하지 않는다면 false를 반환한다.
• map.delete(key) - key에 해당하는 요소를 삭제한다.
• map.clear() - map의 모든 요소를 삭제한다.
• map.size - map의 요소 개수를 반환한다.(괄호 붙이지 않기!!)

만약 map을 생성과 동시에 초기화하고 싶다면, map 생성자의 인자로 이차원 배열을 넣어주면 된다.

const newMap = new Map([
  [1, "a"],
  [2, "b"],
  [3, "c"],
  [4, "d"],
]);

---

📌 Map 순회

• map.keys() - key 값들만 모아서 반복 가능한 이터러블 객체를 반환한다.
• map.values() - value 값들만 모아서 반복 가능한 이터러블 객체를 반환한다.
• map.entries() - [key, value]를 쌍으로 하는 반복 가능한 이터러블 객체를 반환한다.

위의 메서드들을 이용해서 map을 순회할 수 있다.

const newMap = new Map([
  [1, "a"],
  [2, "b"],
  [3, "c"],
  [4, "d"],
]);

for (const key of newMap.keys()) {
  console.log(key);		// 1 2 3 4 
}

for (const value of newMap.values()) {
  console.log(value);	// a b c d 
}

for (const [key, value] of newMap.entries()) {
  console.log("key : " + key + ", value : " + value);
  // key : 1, value: a
  // key : 2, value: b
  // key : 3, value: c
  // key : 4, value: d
}

 

forEach도 사용가능하다.

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

value, key 그리고 forEach를 호출한 map을 인자로 가진다.

 

📌  map -> 객체, 객체 -> map

- map을 객체로 바꾸기 -> Object.fromEntries()

map을 배열로 바꾸고, Object.fromEntries()를 시켜주면 객체로 변환된다.

const newMap = new Map([
  [1, "a"],
  [2, "b"],
  [3, "c"],
  [4, "d"],
]);

const obj = Object.fromEntries(newMap.entries());
console.log(obj);	// { '1': 'a', '2': 'b', '3': 'c', '4': 'd' }

 

- 객체를 map으로 바꾸기 -> Object.entries()

Object.entries()로 객체를 배열로 바꾸고, map의 생성자에 넣어주면  map으로 변환된다.

const obj = {
  1: "a",
  2: "b",
  3: "c",
  4: "d",
};

const newMap = new Map(Object.entries(obj));
console.log(newMap);	// { '1' => 'a', '2' => 'b', '3' => 'c', '4' => 'd' }

 

---

📌 Set이란?

중복을 허용하지 않는 자료구조이다.

⭐️ Set 특징

• 인덱스가 존재하지 않는다.
• 삽입 순서를 기억하고(이터러블 객체), 삽입된 순서대로 순회한다. (map과 동일)

---

📌 Set vs 배열

⭐️ 공통점

• 데이터 저장 순서를 유지한다.

⭐️ 차이점

• set은 중복을 허용하지 않지만, 배열은 중복을 허용한다.
• set에는 인덱스가 존재하지 않지만, 배열에는 인덱스가 존재한다.

---

📌 Set 메서드

• new Set() - Set을 생성한다.
• set.add(value) - 값을 추가하고 set을 반환한다.
• set.delete(value) - value에 해당하는 요소를 삭제한다.
  value에 해당하는 요소가 존재한다면 true, 존재하지 않는다면 false를 반환한다.
• set.has(value) - value에 해당하는 요소가 존재하면 true, 존재하지 않는다면 false를 반환한다.
• set.clear() - set의 모든 요소를 삭제한다.
• set.size - set의 요소 개수를 반환한다.(괄호 붙이지 않기!!)

만약 set을 생성과 동시에 초기화하고 싶다면, set 생성자의 인자로 이터러블 객체를 넣어주면 된다.

이터러블 객체의 값을 복사해서 set에 넣는다.

const newSet = new Set(["a", "b", "c", "d", "a"]);
console.log(newSet);	// Set(4) { 'a', 'b', 'c', 'd' }

---

📌 Set 순회

• for...of 사용

const newSet = new Set(["a", "b", "c", "d", "a"]);

for (const element of newSet) {
  console.log(element);		// a b c d 
}

• forEach 사용

const newSet = new Set(["a", "b", "c", "d", "a"]);

newSet.forEach((value, valueAgain, set) => {
  console.log(value, valueAgain, set);
});

map과 마찬가지로 3개의 인자를 가진다.

첫번째와 두번째 인자는 set의 값이고 세번째 인자는 forEach를 호출한 set이다.

 

🤔 왜 동일한 인자를 두개 가지는걸까?

map과의 호환성 때문이다. 

쉽게 말하자면 map과 set에서 동일한 인터페이스를 제공하기 위함이다.

---

📌  set -> 배열, 배열 -> set

- set을 배열로 바꾸기

Array.from에 넣어주거나 스프레드 연산자(...)을 사용하면 배열로 변환된다.

const newSet = new Set([1, 2, 3]);
const array = Array.from(newSet);
const array2 = [...newSet];

console.log(array);		// [1, 2, 3]
console.log(array2);		// [1, 2, 3]

 

- 배열을 set으로 바꾸기

배열을 set 생성자에 넣어주면 set으로 변환된다.

const array = [1, 2, 3];
const newSet = new Set(array);

console.log(newSet);	// Set(3) { 1, 2, 3 }