Study/JavaScript

[JavaScript_study] Symbol

갈푸라떼 2022. 3. 23. 00:19

* Symbol은 유일한 식별자를 만들때 사용한다. (유일성보장)

  • 특정객체에 원본데이터는 건들지않고 속성을 추가할 수 있다.

 

const a = Symbol(); // new를 붙이지 않는다.
const b = Symbol();

console.log(a) // Symbol()
console.log(b) // Symbol()

a === b; // false
a == b; // false

const id = Symbol('id');
const id = Symbol('id');

id // Symbol(id)
id2 // Symbol(id)

id === id2 // false
id == id2 // false
// 원본객체를 건들지 않고 객체를 추가가능하다.

const user = {
  name : 'Mike',
  age : 30
}

const id = Symbol('id');
user[id] = 'myid';
const id = Symbol('id');
const user = {
  name : 'Mike',
  age : 30,
  [id] : 'myid'
}

console.log(user) // {name : 'Mike', age : 30, Symbol(id) : 'myid'}
user[id] // 'myid'

// Key가 Symbol형일 경우는 건너뛴다. for in을 써도 건너뛴다
Object.keys(user); ["name", "age"]
Object.values(user); ["Mike", 30]
Object.entries(user); [Array(2), Array(2)]
for (let a in user) {}

 

* Symbol.for() : 전역 심볼

  • 하나의 심볼만 보장받을 수 있음
  • 없으면 만들고, 있으면 가져오기 때문
  • Symbol 함수는 매번 다른 Symbol 값을 생성하지만,
  • Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유
const id1 = Symbol.for('id');
const id2 = Symbol.for('id');

id1 === id2; //  true

// Symbol.for의 Symbol값을 확인하는 방법
Symbol.keyFor(id1) // "id"

// Symbol의 Symbol값을 확인하는 방법
const id = Symbol('id 입니다.');

id.description; // 'id 입니다.'

 

* 숨겨진 Symbol key보는법

 

const id = Symbol('id);

const user = {
  name : 'Mike',
  age : 30,
  [id] : 'myid'
}

Object.getOwnPropertySymbols(user); // [Symbol(id)]
Reflect.ownKeys(user); // ["name", "age", Symbol(id)]

 

* Symbol을 활용하는 예시 코드

// 다른 개발자가 만들어 놓은 객체
const user = {
  name : 'Mike',
  age : 30,
};

// 내가 작업
const showName = Symbol("show name");
user[showName] = function() {
  console.log(this.name);
};

user[showName]() // Mike

// 사용자가 접속하면 보는 메세지
for (let key in user) {
  console.log(`His ${key} is ${user[key]}.`);
}

// His name is Mike.
// His age is 30.