6. Keyd collection

• 키 컬렉션은 인덱스 대신 키로 정렬된 데이터 컬렉션으로, 키-값 쌍으로 구성된다.

• 자바스크립트에는 맵(Map)과 집합(Set)이라는 두 가지 유형의 키 컬렉션이 있다.

Map

• 키, 값 쌍으로 된 객체를 담을 수 있는 자료구조이다.

• 키는 유니크하다(중복 불가능). 키가 다르다면 값은 중복 가능하다.

• 객체에서의 키는 문자열이어야 하지만, Map 은 어떤 타입도 가능하다.

• 이터러블(순회 가능)

• 키-값이 들어간 순서대로 순서가 보장된다.

• 자바스크립트의 오브젝트와 비슷하나, Map 을 사용하면 래퍼 객체의 여러가지 기능을 사용할 수 있다. 즉, 오브젝트와 맵은 인터페이스가 다르다.

생성

const map = new Map([
  ['key1', 'k'],
  ['key2', 'k'],
]);
console.log(map); // Map(2) { 'key1' => 'k', 'key2' => 'k' }

obj1 = { key1: 'k' };
const map2 = new Map([[obj1]]);
console.log(map2);

접근

const map = new Map([
  ['key1', 'k'],
  ['key2', 'k'],
]);

console.log(map.get('key1')); // 'k;
console.log(map.get('key2')); // 'k;

// 사이즈 확인
console.log(map.size); // 2

// 존재 확인
console.log(map.has('key1')); // true

// 순회
map.forEach((value, key) => console.log(key, value));

console.log(map.entries()); // [Map Entries] { [ 'key1', 'k' ], [ 'key2', 'k' ] }
console.log(map.values()); // [Map Iterator] { 'k', 'k' }
console.log(map.keys()); // [Map Iterator] { 'key1', 'key2' }

추가

const map = new Map([
  ['key1', 'k'],
  ['key2', 'k'],
]);

map.set('key3', 'k');

삭제

const map = new Map([
  ['key1', 'k'],
  ['key2', 'k'],
]);

map.delete('key3');
map.clear();

Map 속성, 메서드

Set

• 순서가 보장되지 않는다.

• 값의 중복이 불가능하다.

• 이터러블(순회 가능)

• 순서가 보장되어있지 않다.

const set = new Set([1, 2, 3, 4, 4]);
console.log(set); // Set(4) { 1, 2, 3, 4 }

// 사이즈 확인
console.log(set.size); // 4

// 아이템 확인
console.log(set.has(2)); // true

// 아이템 추가, 이미 존재하는 아이템이라면 무시됨
set.add(10);
console.log(set); // Set(5) { 1, 2, 3, 4, 10 }

// 아이템 삭제
set.delete(1);
console.log(set); // Set(4) { 2, 3, 4, 10 }

// 아이템 전부 삭제
set.delete(1);
console.log(set); // Set(0) {}

// 객체도 set 에 들어갈 수 있다.
const obj1 = { name: 'test1', age: 1 };
const obj2 = { name: 'test1', age: 1 };
const obj = new Set([obj1, obj2]);
console.log(obj); // Set(2) { { name: 'test1', age: 1 }, { name: 'test1', age: 1 } }

Question

인터페이스란?

인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용될 수 있다. 또한, 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다.

객체의 키는 단순 문자열이 아닌 경우에는 항상 대괄호를 사용해야 한다 (Computed Property Name)

// [JavaScript] Computed Property Name // https://velog.io/@yujuck/object-key%EC%97%90-%EB%B3%80%EC%88%98%EB%A5%BC-%EB%84%A3%EC%9C%BC%EB%A0%A4%EB%A9%B4-Computed-Property-Name // https://ui.dev/computed-property-names