🚦 본론

많이 쓰는 표준 빌트인 객체들이군요!
정말 애용하기 좋은 친구들이에요 🥰

Set

유일한 값들의 집합을 값으로 가집니다.
이는 원래 수학에서 사용되는 '집합'의 개념에서 착안된 객체에요!
마치, 하나하나의 값들을 집합 요소라고 치면, 이러한 요소들이 중복해서 들어있지 않도록 하기 위함이죠.

이때, 객체의 특성을 진~하게 갖고 있는데요.
따라서 배열처럼 비슷해보여도, 요소 순서를 따로 저장하지 않아요.

const set = new Set();

// 표준 빌트인 '객체'인 `Set`이 이미 전역에 정의되어 있죠!
console.log(set.constructor.name) // 'Set'

console.log(set) // Set(0) {}

Set은 생성시 이터러블을 인수로 전달받는다.

이게 중요합니다.
Set은 아무나 받지 않아요. 오직 이터러블한 친구만 인수로 전달 받습니다.

Set은 이터러블을 반환한다.

이터러블한 친구들은 스프레드 문법과 디스트럭처링 할당이 가능해요.
이를 통해 그냥 유일한 값을 배열로 받아올 수 있어요.
실제로 알고리즘이라던지, 구현에 있어서 매~우 유용하답니다! 🥰

console.log(new Set([1,2,3,4,1,2,3,4])) // [1,2,3,4]

길이

size 프로퍼티를 통해 길이를 알 수 있어요!

console.log(new Set([1,2,3,4,1,2,3,4]).size) // 4

추가, 검색, 삭제

이는 add, has, remove를 통해 가능합니다.

const set = new Set();

// 추가
test = set.add(1) // add 메서드는 추가된 인스턴스의 결과값을 반환합니다.
console.log(test) // Set(1) {1}

// 검색
set.has(1) // true;

// 삭제
const isDeleted = set.remove(1) // 실행 후 결과 상태를 boolean으로 반환합니다.
console.log(isDeleted) // true

순회

이터러블이니, for ... of ...가 가능하며, 표중네 맞춰 forEach 메서드 역시 구현되어 있ㅅ브니다.

const set = new Set([1,2,3,4,1,2,3,4]);

// 다음은 동일하게 1 2 3 4를 반환합니다.
set.forEach(v => console.log(v))
for (let i of set) {console.log(i)}

Map

자바스크립트의 객체는 객체의 프로퍼티 키가 순서가 보장되지 않는다는 한계가 있어요.

1. 정수 프로퍼티는 크기 순서대로,
2. 문자열 프로퍼티는 들어오는 순서대로 오도록 ES6에 표준으로 정의하였습니다.

이에 대한 원인을 추적해보면, 이는 자바스크립트의 배열을 구현하기 위한 내부 로직에서 기인하게 되는 것으로 추측할 수 있습니다! 💡

const obj = { 10: 1, test: 4, hi: 2, 1: 3 };
console.log(obj) // {1: 3, 10: 1, test: 4, hi: 2}

또한 자바스크립트에서는 정수 프로퍼티, 혹은 문자열만 프로퍼티 키로 줄 수 있어요.

이러한 한계를 Map 객체는 처리해줄 수 있어요.
이는, 이터레이션 프로토콜을 준수함에 있어서 인덱스 순서를 보장해줘야 하는데, Map이 이터러블이기 때문입니다.
또한 Map은 다른 타입의 값도 프로퍼티 키로 전달이 가능해요.

const map = new Map();
map.set(10, 1)
map.set('test', 4)
map.set('hi', 2)
map.set(1, 3)

console.log(map)
// Map(4) {10 => 1, 'test' => 4, 'hi' => 2, 1 => 3}

순회

Map 객체 역시 이터러블이며, 따라서 상속받는 인스턴스 역시 이터러블입니다.
이때, 이 심볼 이터레이터의 name은 entries입니다.

const map = new Map();

map.set(10, 1)
map.set('test', 4)
map.set('hi', 2)
map.set(1, 3)

console.log([...map]) // [[10, 1], ['test', 4], ['hi', 2], [1, 3]]

// 이러블은 기본적으로 심볼 이터레이터를 갖고 있고, 이는 entries 메서드임을 확인할 수 있습니다.
console.log(map[Symbol.iterator].name); // 'entries'

// 반환된 이터레이터 객체를 통해 배열에 담아낼 수 있습니다.
console.log([...map.entries()]) // [[10, 1], ['test', 4], ['hi', 2], [1, 3]]

따라서 for ... of와 forEach 메서드로 순회가 가능합니다.
다만 차이점이라면 forEach는 값, 키로 가져올 수 있다는 점입니다.

map.forEach((v, key) => console.log(key, v)) 
// 10 1  
// test 4  
// hi 2  
// 1 3

for (let i of map) { console.log(i) }
// [10, 1]
// ['test', 4]
// ['hi', 2]
// [1, 3]

추가, 검색, 삭제

Set과 마찬가지로 set get(has) delete 메서드를 통해 추가, 검색, 삭제가 가능합니다.

const map = new Map();
map.set('key', 'value'); // key와 value를 인수로 전달하여 인스턴스에 키와 값을 갖는 프로퍼티를 생성합니다.

// map.get은 순전히 값을 얻기 위한 용도로 사용하며, 
// 키에 해당하는 값이 없다면 `undefined`입니다.
map.get('key') // 'value'

// 반면 `has`는 값을 `boolean`으로 반환하므로, 있는지 여부를 탐색할 때 유리합니다.
map.has('key') // true

// 삭제는 결과 여부를 boolean으로 반환합니다.
const deleteResult = map.delete('key')
console.log(deleteResult) // true;

Map과 Object의 연산 속도

어떻게 보면 호기심이 있는 부분이 이것일 것 같기는 해요.
만약 Map이 Object보다 성능이 좋다면? 어느순간 Object가 레거시가 될 수 있기 때문이죠.

실제로 둘은 성능상에서 미묘한 차이가 발생합니다.

• 일단 전반적으로 결과가 브라우저 엔진마다 다르다는 게 함정입니다. (저는 Chrome V8을 기준으로 하겠습니다.)
• 만약 프로퍼티 삭제가 수행된다면, Object보다 Map이 압도적으로 유리합니다.
• 만약 단순한 값 변경이 수행된다면, 원형인 Object가 좀 더 유리합니다.
• 값을 가져오는 것 역시 Object가 유리합니다.
• 하지만 값을 처음 만드는 작업은 Map이 유리합니다.
• 메모리의 경우 Map이 훨씬 더 많이 잡아먹는다.

즉 V8 기준으로 정리하자면 다음과 같네요!

1. 생성과 삭제가 빈번하다면 Map을 고려한다.
2. 메모리가 적거나, 값의 검색과 변경만 자주 일어난다면 Object를 고려한다.

추가: Map의 한계

추가로, Map은 JSON을 지원하지 않아요. 😭
따라서 뭔가 데이터를 API를 통해 주고받을 때에는, 사용을 다시 검토해보시는 것을 추천합니다!

🎉 마치며

사실 이게 다에요.
결국 빌트인 객체라는 건 용법만 파악하면 끝이긴 한데, 뭔가 아쉬워서 스택 오버플로우를 더 찾아보게 됐네요.

그래도 연산 속도를 더 깊게 이해할 수 있어서 기분 좋은 공부였습니다.

그럼, 다들 즐거운 공부하시기를 바라며. 이상! 🌈

📁 참고자료

stackoverflow - Map vs Object in JavaScript