심볼은 유일한 식별자를 만들 때 사용한다.
// new를 붙이지 않는다.
const a = Symbol();
const b = Symbol();
console.log(a); // Symbol()
console.log(b); // Symbol()
a === b -> false
a == b -> false
JavaScript
복사
유일성을 보장한다.
//() 안에 설명도 넣을 수 있다.
const id = Symbol('id');
const id2 = Symbol('id');
console.log(id); // Symbol(id)
console.log(id2); // Symbol(id)
id === id2 -> false
id == id2 -> false
JavaScript
복사
Object.keys(), Object.values(), Object.entries() 등은 key 가 Symbol형인 것들은 건너 뛴다.
const id = Symbol('id');
const user = {
name: 'jjw',
age: 20,
[id]: 'jjwId' // 계산된 프로퍼티(Computed property)
}
// 객체 출력은 key가 Symbol형이어도 출력된다.
console.log(user); // {name: 'jjw', age: 20, Symbol(id): 'jjwId'}
// key가 Symbol형이면 건너뛴다.
Object.keys(user); // ["name", "age"]
Object.values(user); // ["jjw", 20]
Object.entries(user); // [Array(2), Array(2)]
for(let a in user) { }
JavaScript
복사
* 이러한 성질을 이용하여 특정 객체에 원본데이터는 건드리지 않고 특성을 추가하고싶을 때 사용한다.
* 내가 추가한 프로퍼티가 어디에선가 영향이 있을것같을 때 사용한다.
Symbol.for() : 전역 심볼
•
하나의 심볼만 보장받을 수 있음
•
없으면 만들고, 있으면 가져오기 때문
•
Symbol 함수는 매번 다른 Symbol 값을 생성하지만,
•
Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유
const id1 = Symbol.for('id');
const id2 = Symbol.for('id');
console.log(id1 === id2); // true
console.log( Symbol.keyFor(id1) ); // "id"
JavaScript
복사
전역심볼이 아닌 심볼은 keyFor를 사용할 수 없는 대신 description을 사용한다.
const id = Symbol('id 입니다.');
console.log( id.description ); // "id 입니다."
JavaScript
복사
숨겨진 Symbol key 보는 법
const id = Symbol('id');
const user = {
name: 'jjw',
age: 30,
[id]: 'myid'
}
// 심볼들만 본다.
Object.getOwnPropertySymbols(user); // > [Symbol(id)]
// 심볼형 키를 포함한 객체의 모든 키를 본다.
Reflect.ownKeys(user); // ["name", "age", Symbol(id)]
JavaScript
복사
대부분의 라이브러리, 내장함수들은 위와같은 심볼형 키를 보는 메소드들을 사용하지 않는다.
그러지 걱정하지말고, 유일한 프로퍼티를 추가하고싶을 때 Symbol을 사용하면 된다.
Symbol 활용 예시
// 다른 개발자가 만들어 놓은 객체
const user = {
name: 'jjw',
age: 30
}
// 내가 작업
// user.showName = function() {} -> 사용자에게 노출된다.
const showName = Symbol('show name');
user[showName] = function() {
console.log(this.name);
}
user[showName](); // "jjw"
// 사용자가 접속하면 보는 메세지 (Symbol형 키는 건너뛴다)
for(let key in user) {
console.log(`His ${key} is ${user[key]}.`);
}
JavaScript
복사
