[Javascript] Set, Map, Object 차이

Javascript Set, Map, Object 차이

 

 

Map, Set, 

 

map, set은 ES6에서 새로 도입한 자료 구조

 

Map, Set이 필요한 이유

 

- object는 문자열/심볼만 key값으로 들어간다. (map, set은 1과 '1'도 구분된다.)

- 객체의 프로퍼티 개수를 알 수 있다. 

- object는 for of 또는 spread syntax로 접근이 힘들다. (object는 not iterable)

 

Set

-Set은 중복을 허용하지 않는 데이터 집합

-Set을 사용하면 데이터에 빠르게 엑세스할 수 있다.

-1과 '1'을 다른 것으로 간주. 즉, 중복 확인을 위해 강제적으로 자료형을 변형하지 않는다.

-forEach(callback(value,key,set)[, thisArg]), for of로 값에 접근 가능하다

 

const mySet = new Set();

mySet.add(1) //{1}
mySet.add(2) //{1,2}
mySet.size //2
mySet.delete(1); //{2}
mySet.has(2) //true
mySet.has(1); //false
mySet.Clear(): //{}

let arr = [...mySet]; //Spread 연산자를 이용해 array로 만들 수 있다.

 

 

Map

 

-Map은 키-값을 저장한다.

-Set과 마찬가지로 key는 자료형을 구분한다.

-Set처럼 배열을 넣어서 초기화시킬 수도 있다.

 

let myMap = new Map(); //{}
myMap.set(1, 'hello'); //{1=>'hello'}
myMap.set('1', 'hello'); //{1=>'hello', '1'=>'hello'}
myMap.set(1, 'world'); //{1=>'world', '1'=>'hello'}
myMap.get(1); //'world'
myMap.has(1); //true
myMap.delete(1); // {'1' => 'hello'}
//clear, size 는 Set과 같다.

 

 

Map.prototype.entries()

Map 객체의 각 요소에 해당하는 키,값 쌍을 Map에 등록한 순서대로 포함한 새로운 Iterator 객체를 반환한다.

entries()를 사용해 for of문으로 쉽게 키,값에 접근할 수 있다

 

const map1 = new Map();

map1.set('0','foo');
map1.set(1,'bar');

const iterator1 = map1.entries();//MapIterator {"0" => "foo", 1 => "bar"}

console.log(map1); //Map { '0' => 'foo', 1 => 'bar' }
console.log(iterator1.next().value); //[ '0', 'foo' ]
console.log(iterator1.next().value); //[ 1, 'bar' ]
console.log(iterator1.next().value); //undefined

for (let x of map1.entries()) {
  console.log(x);
}
//[ '0', 'foo' ]
//[ 1, 'bar' ]

 

 

Object vs Map

 

Map이란?

 

-Map은 자료구조로 key-value 쌍으로 저장되는 형식이다.

-key는 unique하기 떄문에 중복이 없다.

=맵은 주로 데이터를 fast searching and looking up 하는 데 사용된다.

 

 

Object란?

 

Object 역시 key-value로 저장한다.

object에서 key를 주로 property라고 부른다.

object에서도 key는 unique하고 하나의 value와만 associated 돼 있다

 

 

 Map과 Object 차이

 

-Key Type

 > Object의 key type은 string, symbols, integer밖에 안 된다.

 > Map의 key type은 어떤 것이든 되고 서로 구분된다. (array,object...)

 

-Map은 데이터의 순서를 보존하는 반면 Object는 그렇지 않다.

 

-Map은 Object의 인스턴스이지만 Object는 그렇지 않다.

 

 

 

 TIL

 

Map, Set에 대한 강의를 들었는데, Object와의 차이가 뭔지 구체적으로 와닿지 않아서 직접 찾아보았다.

실무에 적용해본 적이 없기 때문인지 아직까지 큰 필요성은 못 느끼지만,

일단 알아놓으면 나중에 활용할 데가 있을 거라 생각하여 기록해둔다.

 

 

참고블로그 : https://velog.io/@proshy/JSSet-Map-Object-%EC%A0%95%EB%A6%AC