[dream coding] Set, Map, Symbol 13강 TIL

sohyun·2022년 7월 7일
0

드림코딩 강의 정리

목록 보기
14/20
post-thumbnail

Map ( )

  • Map ( ) 은 key-value 쌍으로 이루어진 컬렉션, 객체와 유사함
  • key를 사용하여 value를 get, set 할 수 있다
  • key 중복 불가능 : 하나의 key에 하나의 value만
const map = new Map([
	['key1','hello'],
  	['key2','world'],
]);

//key만 다르다면(=유일한 키) 중복 가능
console.log(map) // Map(2) {'key1' => 'hello', 'key2' => 'world' }

💡 map의 길이 알기

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

💡 key-value 추가

  • set(key,value)
  • 반환값 : 맵의 참조 주소
// 추가
map.set('key3', 'JS');
console.log(map) // Map(3) {'key1' => 'hello', 'key2' => 'world', 'key3' => 'JS' }

💡 value 얻기

  • get(key)
  • 반환값 : 키가 있으면 값을 반환, 키가 없으면 undefined 반환
// 찾기
console.log(map.get('key1')); // hello
console.log(map.get('key2')); // world
console.log(map.get('key4')); // undefined

💡 key가 있는지 확인

  • has(key)
  • 반환값 : 키가 있으면 true, 없으면 false
// 존재하는지 확인
console.log(map.has('key1')); //true
console.log(map.has('key6')); //false

💡 key-value 삭제

  • delete(key)
  • 반환값 : 삭제 성공하면 true, 실패하면 false
// 삭제
console.log(map.delete('key1'));
console.log(map.delete('key7'));

💡 key-value 전체 삭제

  • clear()
  • 반환값 : undefined 반환
// 전부삭제
console.log(map.clear());
console.log(map); //Map(0) {}

key-value 순회

  • 반환값 : 새로운 Map iterator 객체
  • forEach() : 파라메터로 키-값을 각각 받아 순환
  • entries() : 키-값 쌍으로 순환
  • keys() : 키만 순환
  • values() : 값만 순환
//파라메터로 키-값을 각각 받아 순환
map.forEach((value, key) => console.log(key, value));

//키-값 쌍으로 순환
for(let [key,value] of map.entries()){
  console.log(key+' '+value);
}

//키만 순환
for(let key of map.keys()){
  console.log(key);
}

//값만 순환
for(let value of map.values()){
  console.log(value);
}

Map과 Obj의 결정적인 큰 차이점

key 값

  • Map 어떠한 데이터 값도 key로 가질 수 있다
  • Obj String, Symbol이어야 한다

key의 순서

  • Map 삽입한 순서대로 key 정렬, 이터레이터 할 경우 순서대로 나온다.
  • Obj key들이 순서대로 정렬되긴하지만, 항상 순서가 보장되는 것은 아니다.

Set ( )

  • value로 이루어진 집합
  • Array와 다르게 Set은 같은 value를 포함할 수 없음
  • 따라서 Set에 이미 존재하는 값을 추가해도 아무일이 일어나지 않음
// Set
const set = new Set([1, 2, 3]);
console.log(set); // Set(3) { 1, 2, 3 }

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

// 존재하는지 확인
console.log(set.has(2));  //true
console.log(set.has(6));  //false

// 순회
set.forEach((item) => console.log(item));
//for of 이터러블
for (const value of set.values()) {
  console.log(value);
}

// 추가
set.add(6);
console.log(set); //Set(4) { 1, 2, 3, 6 }
//있는데 또 추가하면 무시됨 => 중복이 불가능
set.add(6);
console.log(set); //Set(4) { 1, 2, 3, 6 }

// 삭제
set.delete(6);
console.log(set);

// 전부 삭제
set.clear();
console.log(set); //Set(0) {}

// 오브젝트 세트
const obj1 = { name: '🍎', price: 8 };
const obj2 = { name: '🍌', price: 5 };
const objs = new Set([obj1, obj2]);
console.log(objs);
//forSet(2) { { name: '🍎', price: 8 }, { name: '🍌', price: 5 } }


// 퀴즈
//오브젝트 얕은복사
obj1.price = 10;
objs.add(obj1);
console.log(objs); // Set(2) { { name: '🍎', price: 10 }, { name: '🍌', price: 5 } }

// 퀴즈
const obj3 = { name: '🍌', price: 5 };
//오브젝트는 메모리의 힙에 만들어지고 메모리 참조주소가 담긴다
// 그러므로 중복이아닌 서로다른 메모리이므로 추가됨
objs.add(obj3);
console.log(objs);
obj3.price = 8;
console.log(objs);

Symbol ( )

  • key의 이름이 똑같아도 유일한 키를 생성할 수 있음
const map = new Map();
const key1 = Symbol('SSO');
const key2 = Symbol('SSO');
map.set(key1, 'Hello');
console.log(map.get(key2)); //undefined

//키 이름이 SSO로 같아도 각각 다른 유일한 키임
console.log(key1 === key2); //false

💡 동일한 이름으로 하나의 key 사용하기

  • Symbol.for
  • 전역 심벌 레지스트리 (Global Symbol Registry)
const k1 = Symbol.for('key');
const k2 = Symbol.for('key');
console.log(k1 === k2); //true


console.log(Symbol.keyFor(k1)); //key
console.log(Symbol.keyFor(key1)); //undefined

const obj = { [k1]: 'Hello', [Symbol('key')]: 1 };
console.log(obj);   // { [Symbol(key)]: 'Hello', [Symbol(key)]: 1 }
console.log(obj[k1]);   //Hello
console.log(obj[Symbol('key')]);    //undefined
profile
냠소현 개발일지

0개의 댓글