Symbol, Map, Set 자료형

🤐 Symbol 자료형

✨ Object 자료형에 비밀스런 key값을 부여하고싶을 때 사용한다.

원래 Object 자료형에는 문자로만 키 값을 입력할 수 있었지만 ES6부터는 Symbol도 키 값으로 입력할 수 있게 되었다.

Symbol 자료형 사용법

var 심볼 = Symbol('설명아무거나적기');

주석(설명)하나만 달랑 저장할 수 있는 자료형이다.

var person = { name : 'Kim' };
person.weight = 100;

var weight = Symbol('내 진짜 몸무게'); // Symbol 자료형 생성
person[weight] = 200; // Object 자료형에 Symbol을 이름으로 가진 자료 저장

console.log(person); // {name: 'Kim', weight: 100, Symbol(내 진짜 몸무게): 200}

아래와 같이 오브젝트를 만들 때 직접 입력할 수도 있다.

var height = Symbol('내 키임');

var person = { name : 'Kim', [height] : 160 };

Symbol 자료형의 특징 1. for문에 등장하지 않는다.

그래서 비밀스런 정보를 저장하고 싶을 때 Symbol을 이용해서 자료를 저장하는 것이다.

var weight = Symbol("내 시크릿 몸무게");

var person = { name: "Kim" };
person[weight] = 100; // 반복문에서 출력 안됨

for (var key in person) {
  console.log(person[key]); // Kim만 출력됨
}

Symbol 자료형의 특징 2. 설명은 설명일 뿐

Symbol() 안에는 간단한 설명을 저장할 수 있다고 했다.
근데 같은 설명을 가졌다고 해서 같은 Symbol은 아니다.

var a = Symbol('설명1');
var b = Symbol('설명1');

console.log(a === b); // false

Symbol은 Symbol()이라고 사용할 때마다 각각 유니크한 Symbol이 생성되기 때문이다.

Symbol 자료형의 특징 3. Symbol.for()로 만드는 전역심볼

Symbol() 대신에 Symbol.for()를 사용하면 변수처럼 뭔가 같은값을 가지면 같은 변수로 취급해주는 전역 심볼을 만들 수 있다.

var a = Symbol.for('설명1');
var b = Symbol.for('설명1');

console.log(a === b); // true

Symbol.for()로 새로운 Symbol을 만들 때 설명이 같으면 이미 그 설명을 가지고 있는 Symbol을 그 자리에 집어넣기 때문에 a와 b의 심볼은 각각 다른 곳에서 만들었음에도 불구하고 같은 Symbol이 된다.

Symbol 자료형 특징4. 기본 내장 Symbol들

Array, Object 자료형을 만들 때 몰래 붙어있는 기본 Symbol 들도 있다.
예를 들면 모든 array 자료형은 [Symbol.iterator]라는 이름을 가진 심볼이 안에 있다.

근데 Symbol은 반복문을 써도 출력이 되지 않기 때문에 우리는 몰랐던 것이다.

---

🗺️ Map 자료형

Object 자료형과 똑같이 key, value 형태로 자료를 저장할 수 있는 자료형이다.

자료간의 연관성을 표현하기 위해 사용된다.

var person = new Map();

person.set('name', 'Kim');
person.set('age', 20);

// person이 Map(2) { 'name' => 'Kim', 'age' => 20 }으로 출력된다.

Object와는 다르게 화살표가 함께 출력되는데 이는 Map 자료형은 자료간의 연관성을 표현하기 위해 사용되기 때문이다.
따라서 그냥 key, value형식으로 저장하려면 Object를 사용하면 되고 name이 Kim과 연관되어있다~ 라고 저장하고 싶으면 Map을 사용하면 된다.

✨ Object 자료형은 키 값으로 글자만 가능했지만 Map 자료형은 key, value값에 모든 자료를 집어넣을 수 있다.

---

🧹 Set 자료형

중복 자료를 허용하지 않는 Array와 비슷한 자료형

var 출석부 = new Set([ 'john' , 'tom', 'andy', 'tom' ]);

console.log(출석부); // Set(3) { 'john' , 'tom', 'andy' }

Set 자료형 다루기

var 출석부 = new Set([ 'john' , 'tom', 'andy', 'tom' ]);

출석부.add('sally'); // 자료 더하기 
출석부.has('tom'); // 자료 있는지 확인
출석부.size;  // 자료 몇갠지 세기

Set 사용해서 Array 중복 데이터 제거하기

var 출석부 = [ 'john' , 'tom', 'andy', 'tom' ];

var 출석부2 = new Set(출석부); // Array를 Set으로 바꾸기

출석부 = [...출석부2]  // Set을 Array로 바꾸기