[JavaScript] 중급 #4 - 심볼(Symbol)

 

property key: 문자형

const obj = {
	1: ‘1입니다.’,
	false: ‘거짓’
}

Object.keys(obj); // [“1”, “false”]
obj[‘1’]; //“1입니다.”
obj[‘false’]; // “거짓”

 

Symbol: ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값

  -  유일성 보장, 유일한 식별자를 만들 때 사용

  -  new 연산자를 사용하지 않음

  -  Symbol 함수는 매번 다른 Symbol 값을 생성

  -  변수.description;을 통해 이름을 얻을 수 있음

 

ex)

const a = Symbol();
const b = Symbol();

console.log(a); //Symbol() 출력
console.log(b); //Symbol() 출력

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

 

ex)

const id = Symbol(‘id’); // Symbol안의 ‘id’는 설명 또는 이름이라고 부름
const id2 = Symbol(‘id’);

console.log(id); //Symbol(id) 출력
console.log(id2); //Symbol(id) 출력

console.log(id === id2); //false 출력
console.log(id == id2); //false 출력

 

 

property key: 심볼형

const id = Symbol(‘id’);

const user = {
	name: ‘Angel’,
	age: 30,
	[id]: ‘myId’ //심볼형 키는 대괄호로 감싸야 함
}

console.log(user); //{ name: ”Angel”, age: 30, Symbol(id):” myId” } 출력
console.log(user[id]) //“myId” 출력

ž   Object.keys(user); → [“name”, “age”]

ž   Object.values(user); → [“Angel”, 30]

ž   Object.entries(user); → [Array(2), Array(2)]

ž   for(let a in user) { }

     →  key가 Symbol형인 property는 건너 뛴다.

 

Symbol.for(): 전역 심볼

  -  하나의 심볼만 보장받을 수 있음

  -  없으면 만들고, 있으면 가져오기 때문

  -  Symbol.for 메소드는 Symbol 하나를 생성한 뒤, 키를 통해 같은 Symbol을 공유

  -  Symbol.keyFor(변수)를 통해 이름을 얻을 수 있음

 

ex)         

const id = Symbol(‘id’);
const id2 = Symbol(‘id’);

console.log(id === id2); //true 출력

Symbol.keyFor(id1) // “id”

 

 

숨겨진 Symbol key 보는 방법

const id = Symbol(‘id’);

const user = {
	name: ‘Angel’,
	age: 30,
	[id]: ‘myId’
}

Object.getOwnPropertySymbols(user); // [Symbol(id)]
//key가 Symbol형인 것들만 볼 수 있음

Reflect.ownKeys(user); //[“name”, “age”, Symbol(id)]
//Symbol형을 포함한 객체의 모든 key를 볼 수 있음

 

 

Symbol이 필요한 이유

Symbol 사용하지 않은 경우)

 

Symbol을 사용한 경우)

 →  다른 개발자가 작성한 코드에 영향을 미치지 않고 객체에 프로퍼티를 추가할 수 있다.

 

 

 

 

↓[코딩앙마] 자바스크립트 중급 강좌 링크

https://www.youtube.com/watch?v=E9uCNn6BaGQ