[Javascript] Set과 Map에 대해 알아보자

Javascript!

 

Set이란?

사전적 정의

• 수학용어의 하나로 어떤 조건에 따라 결정되는 요소의 모임을 말하며, 그 요소를 집합의 원소라고 한다. 어떤 원소가 그 집합에 들어 있는지, 들어 있지 않은지를 식별할 수 있어야 하고, 집합에서 취한 두 원소가 서로 같은지, 같지 않은지를 식별할 수 있어야 한다. (출처: 네이버 지식백과)

 

사전적 정의에 따르면 Set내에 값은 유일성을 보장해야한다.

 

1. 설명

• 값의 컬랙션
• 컬랙션 내 값의 유일성 보장
• 삽입 순서대로 순회(iterate) 가능

let fruitSet = new Set(['apple', 'orange']);
for (fruit of fruitSet)
{
  console.log(fruit);
}
// apple
// oragne
// 출력!

2. 값의 동일성은 어느정도로 보장하나?

• +0과 -0은 같은 값!
• NaN과 undefined도 넣을 수 있다!
• NaN !== NaN여도 Set에서는 같다고 취급.

let fruitSet = new Set(['apple', 'orange', NaN]);

let result = fruitSet.has(NaN)
console.log(result)
// true 출력

fruitSet.delete(NaN)
result = fruitSet.has(NaN)
console.log(result)
// false 출력

3. 성능

• 같은 크기면, Array.includes와 Object.include보다 빠르다!

4. 생성자

• Set(iterable)
• Set()

let bagSet = new Set();
// bagSet는 비어있음!
// Set {} 출력

let fruitSet = new Set(['apple', 'orange']);
console.log(fruitSet)

// Set { 'apple', 'orange' } 출력

5. Static property

• get Set[@@species] (업데이트 예정)

6. Instance property

• size

let fruitSet = new Set(['apple', 'orange']);
console.log(fruitSet.size)

// 2출력

7. Instance method

• add(value)

let fruitSet = new Set(['apple', 'orange']);

fruitSet.add('watermelon');

console.log(fruitSet)
// Set { 'apple', 'orange', 'watermelon' } 출력
// 삽입 순서 유지!

• clear()

let fruitSet = new Set(['apple', 'orange']);
fruitSet.add('watermelon');
fruitSet.clear();

console.log(fruitSet)
// Set {} 출력!

• delete(value)

let fruitSet = new Set(['apple', 'orange']);
fruitSet.add('watermelon');
fruitSet.delete('orange')

console.log(fruitSet)
// Set { 'apple', 'watermelon' } 출력!

• has(value)

let fruitSet = new Set(['apple', 'orange']);
fruitSet.add('watermelon');

console.log(fruitSet.has('apple'))
// true 출력!

8. Instance method

• 추후 업데이트
• iteration란?
  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol

 

 

 

 

 

 

 

Map이란?

사전적 정의

• 지구의 표상을 일정한 형식을 이용해 약속된 기호로 표현한 그림. [개설] 지도는 공간의 표상을 일정한 형식을 이용해 표현한 것으로, 대부분 2차원의 평면에 그림의 형태로 그려진다.(출처: 네이버 지식백과)

 

지도라는 특성을 고려하면 하나의 장소를 하나의 심볼이 무조건 가리켜야한다. 즉 key-value가 보장되야한다!

 

1. 설명

• key-value 쌍, 삽입 순서 유지
• 모든 Value는 key와 value가 될 수 있음
• for..or loop는 [key, value]을 각 iteration마다 반환

2. 키 동일성 판단?

• === 연산으로 키 동일성 처리
  • set과 같이 NaN is considered the same as NaN(even though NaN !== NaN)
  • -0과 +0은 같다

3. 오브젝트와 뭐가 다른가?

• 실제로 Map이 없을 때는 오브젝트가 대체했었음

	Map	Object
Key type	맵은 모든 Value가 키 값 가능	문자열과 Symbol만 가능
Key order	간단한 방법으로 저장, 삽입된 순서대로 순회	오브젝트는 삽입 순서 보장x
Size	맵 객체에 사이즈 연산자 사용 가능	오브젝트는 바로x Object.keys(obj).length 등으로 사용
성능(performance)	잦은 삽입 & 삭제에 좋은 성능	잦은 삽입 & 삭제에 최적화x

 

4. 오브젝트 프로퍼티 설정 방법, 사용 방법

• 아래와 같이 사용하면 작동하는 것 처럼 보인다

const wrongMap = new Map()
wrongMap['bla'] = 'blaa'
wrongMap['bla2'] = 'blaaa2'

console.log(wrongMap)  // Map { bla: 'blaa', bla2: 'blaaa2' }

• 하지만 인스턴스 메소드를 사용하면 예상치 못한 동작 발생
• But that way of setting a property does not interact with the Map data structure. It uses the feature of the generic object. The value of 'bla' is not stored in the Map for queries.(from. WDN web doc)

wrongMap.has('bla')    // false
wrongMap.delete('bla') // false
console.log(wrongMap)  // Map { bla: 'blaa', bla2: 'blaaa2' }

• set(key, value) method 사용하자!

const contacts = new Map()
contacts.set('Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"})
let value1 = contacts.get('Jessie') // true
let value2 = contacts.get('Hilary') // undefined

console.log(value1)
// { phone: '213-555-1234', address: '123 N 1st Ave' } 출력!

console.log(value2)
// undefined 출력!

 

5. 인스턴스 메소드

• get(key)

const contacts = new Map()
contacts.set('Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"})

console.log(contacts)

// Map { 'Jessie' => { phone: '213-555-1234', address: '123 N 1st Ave' } } 출력!

• set(key, value)

const contacts = new Map()
contacts.set('Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"})

console.log(contacts)

// Map { 'Jessie' => { phone: '213-555-1234', address: '123 N 1st Ave' } } 출력!