[JavaScript] 심볼

반응형

심볼 (Symbol)

 심볼은 유일한 식별자를 만들 때 사용한다.

 만드는 방법은 다음과 같다.

 new를 사용하지 않으므로 주의한다.

let a = Symbol();
let b = Symbol();

console.log(a);
console.log(b);

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

 

 위 코드의 a와 b를 출력하면 Symbol()로 같다. 하지만 일치 연산자나 동등 연산자로 확인할 경우 false가 나온다.

 심볼은 유일성을 보장해준다. 괄호 안에 문자열을 넣어서 설명을 추가할 수 있다.

 이 문자열은 심볼 생성에 어떠한 영향도 끼치지 않는다.

 

 심볼을 객체의 key로 사용할 수 있다.

let nickname = Symbol('nickname');
let user = {
	name : 'jiwoong',
	age : 4,
	[nickname] : 'bloodthirster'
}

let keys = Object.keys(user);
console.log(keys);

 

 하지만 Object.keys()로 key를 나열해보면 심볼은 보이지 않는다.

 이는 이전에 배웠던 객체 메소드인 Object.values(), Object.entries() 등도 마찬가지인데, for ... in 문도 심볼을 건너뛴다.

 이러한 특성을 가진 심볼은 특정 위치에 원본 데이터를 건드리지 않고 프로퍼티를 추가할 수 있다.

 

 아래 코드를 살펴보자.

let user = {
	name : 'jiwoong',
	age : 4
}

for (let key in user) {
	console.log(`my ${key} is ${user[key]}`);
}

 

 다른 사람이 이러한 코드를 작성했다고 가정해보자. 위 코드에서 user 객체에 함수 a를 추가해서 사용하려고 할 때, 아래와 같이 하면 다른 사람이 작성한 for ... in문의 결과에 영향을 끼친다.

let user = {
	name : 'jiwoong',
	age : 4
}

user.a = function() {
	console.log(`나는 ${this.name}이고, 나이는 ${this.age}살 입니다.`);
}
user.a();

for (let key in user) {
	console.log(`my ${key} is ${user[key]}.`);
}

 

 이러한 상황을 방지 하기 위해 심볼을 사용한다.

 아래는 같은 상황에서 심볼을 사용한 경우이다.

let user = {
	name : 'jiwoong',
	age : 4
}

let a = Symbol();
user[a] = function() {
	console.log(`나는 ${this.name}이고, 나이는 ${this.age}살 입니다.`);
}
user[a]();

for (let key in user) {
	console.log(`my ${key} is ${user[key]}.`);
}

 

 내가 작성한 a 함수도 잘 실행됐고, 다른사람이 작성한 for ... in문의 결과에 영향을 끼치지도 않았다.

 

Symbol.for()

 심볼은 이름이 같더라도 서로 다른 존재이다. 하지만 전역 변수처럼 이름이 같으면 같은 객체를 가리키는 경우가 있다.

 Symbol.for()은 이러한 경우에 사용한다.

 Symbol.for()을 사용하면 하나의 심볼만 보장받는다. 심볼이 없다면 만들고, 있다면 가져온다.

 Symbol 함수는 매번 다른 심볼값을 생성한다. 하지만 Symbol.for() 메소드는 하나의 심볼을 생성한 뒤 key를 통해 같은 심볼을 공유한다.

let a = Symbol.for('123');
let b = Symbol.for('123');
console.log(a===b);

 

 이러한 것을 전역 심볼이라고 한다. 전역 심볼은 코드 어디에서든 사용 가능하다.

 

Symbol.keyFor()

 전역 심볼의 이름을 알고 싶을 때는 Symbol.keyFor()을 사용한다.

let a = Symbol.for('123');

let name = Symbol.keyFor(a);
console.log(name);

 

description

 전역 심볼이 아닌 심볼의 이름을 알고 싶다면, description을 사용한다.

let a = Symbol('123');

let name = a.description;
console.log(name);