정리_JavaScript/ES6 Collection - Set과 Map

Set

배열과 비슷한데, 중복을 허용하지 않는다.

- 어떤 데이터가 자신의 멤버인지 빠르게 확인할 수 있다. (mySet.has("데이터"))

- 인덱스 값으로 데이터를 조회할 수 없다. (mySet[0] → undefined)

- map, filter, some, every 내장함수 미구현

- mySet.addAll, mySet.removeall  미구현

 

var mySet = new Set()

var mySet = new Set([1, 2, 3])

var myArr = Array.from(mySet)  // [1, 2, 3]

[...mySet] // [1, 2, 3]

 

mySet.add(1).add(2).add(3)

mySet.add( 객체 )

mySet.delete(1).delete(2)

mySet.clear

mySet.size

mySet.has("값") - string일 경우 대소문자 구별O

 

Set에 추가한 순서 = 순회하는 순서

mySet.keys() - 삽입 순으로 Set 객체 내 각 요소에 대한 값을 포함하는 새로운 Iterator 객체를 반환

= mySet.values()

mySet.entries() - 삽입 순으로 Set 객체 내 각 값에 대한 [value, value] 배열을 포함하는 새로운 Iterator 객체를 반환

mySet [symbol.iterator]

 

mySet.forEach( value, value2, Set )   ※ value = value2

cf) myArray.forEach( 값, 인덱스, 배열 )

 

mySet.forEach( v => { console.log(v) } )

 1

 2

 3

 

mySet.forEach(( value1, value2, setObject ) => console.log( value1 + ', ' + value2 ));

 1, 1

 2, 2

 3, 3

 

for ( var i of mySet ) console.log(i)

= for ( var i of mySet ) {

 console.log (i);

}

 1

 2

 3

 

교집합 var intersection = new Set([...set1].filter(x => set2.has(x)));

차집합 var difference = new Set([...set1].filter(x => !set2.has(x)));

 

Map

객체와 비슷하다. 키와 값을 연결한다.

 

※ 객체의 단점

- 객체 안에 키-값이 몇 개인지 쉽게 알아내기 힘들다. (size, length가 없다.)

- 객체를 키로 써서 값과 연결할 수 없다. (키는 반드시 심볼/문자열이어야 한다.)

- 프로퍼티 순서를 보장하지 않는다.

- 트로토타입 체인 때문에 의도하지 않은 연결이 생길 수 있다.

- 객체의 키로 내장 메소드의 이름을 사용하면 충돌이 생길 수 잇다.

- iterate할 수 없다. (for..of나 ...를 사용할 수 없다.) ★

  Object를 iterate하려면 먼저 모든 키를 알아낸 후, 그 키의 배열을 iterate해야 한다.

 

 ES6 컬렉션이 데이터와 내장 메소드 이름 사이의 충돌을 피하기 위해 설계되었기 때문에,

 ES6 컬렉션은 자신의 멤버 데이터를 드러내기 위해 속성(property)을 사용하지 않는다.

 → obj.key (X)   obj [key] (X)   map.get(key) (O)

 

var myMap = new Map()

var myMap = new Map(pairs)

myMap.set( 'a', 'apple' );

myMap.set( 'b', 'banana' );

myMap.set( '객체1', '객체2' );

myMap.delete( 'a' )

myMap.clear()

myMap.size

myMap.has( 'a' )   // true

myMap.get( 'a' );   // 'apple'

myMap.keys

myMap.values

 

※ NaN도 키로서 사용할 수 있다.

 ∵ 모든 NaN은 자기 자신과 동일하지 않지만(NaN !== NaN), NaN을 서로 구분할 수도 없기 때문

 

Map에 추가한 순서 = 순회하는 순서

myMap.keys() - Map 객체 안의 모든 키(Key)들을 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환

myMap.values() - Map 객체 안의 모든 값(Value)들을 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환

myMap.entries() - Map 객체 안의 모든 요소들을 [key, value] 형태의 array 로 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환

myMap [symbol.iterator]

 

myMap.forEach( v => { console.log(v) } )

 apple, banana

 

myMap.forEach(value, key) => {

 console.log( key + ' = ' + value );

});

 a = apple

 b = banana

 

for ( var i of mySet ) { console.log(i) }

 [ 'a', 'apple' ]

 [ 'b', 'banana' ]

 

for ( var [key, value] of myMap) {

 console.log( key + ' = ' + value )

}

 a = apple

 b = banana

 

for (let [key, value] of myMap.entries()) {

 console.log( key + ' = ' + value )

}

 a = apple

 b = banana

 

for (let key of myMap.keys()) {

 console.log(key)

}

 a

 b

 

for (let value of myMap.values()) {

 console.log(value)

}

 apple

 banana

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set

Set

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

Map

 

https://velog.io/@yesdoing/JavaScript-Collections

JavaScript Collections

https://www.yceffort.kr/2019/07/18/javascript-map-weakmap/

Javascript Set 그리고 Map

https://medium.com/sjk5766/foreach-for-in-for-of-%ED%8A%B9%EC%A7%95-%EB%B0%8F-%EC%84%B1%EB%8A%A5-%EB%B9%84%EA%B5%90-47a77464b034

forEach, for in, for of 특징 및 성능 비교

https://www.yceffort.kr/2019/07/18/javascript-map-weakmap/

Javascript Set 그리고 Map