Symbol 이란

심볼이란 ES6에서 새롭게 추가된 원시 타입 중 하나로써, 객체 프로퍼티에 대한 식별자로 사용됩니다.
모든 심볼 값은 고유하며 중복되지 않고 한번 생성 후 값이 변경되지 않기 때문에 충돌 위험이 없는 타입입니다.

생성 방법

Symbol 일반 선언

const sym1 = Symbol();
const sym2 = Symbol();

//Symbol은 유니크 식별자이므로 다른 심볼하고 같지 않습니다.
console.log(sym1 === sym2); //false;

Symbol description 선언

const sym3 = Symbol('sym3');
console.log(sym3.description);  // sym3

활용 방법

고유한 프로퍼티 키 생성

객체의 프로퍼티 키를 생성할 때 심볼을 사용하면 다른 어떠한 프로퍼티와도 충돌하지 않는 키를 생성할 수 있습니다.

const idSym = Symbol('id');

let carA = {
	id: 1,
	name: 'morning',
  	brand: 'kia',
  	[idSym]: 100,
}

carA[idSym] = 200;

프로퍼티 키 감추기 ( for...in, Object.getOwnPropertyNames(), Object.keys() )

심볼로 만들어진 키는 for...in 루프, Object.key(), Object.getOwnPropertyNames()와
같은 객체 조사 메서드에서 무시되며,
Object.getOwnPropertySymbols()를 통해서만 가져올 수 있습니다.
이 특성을 활용하면 심볼로 선언된 키 값들을 감추는 것도 가능합니다.

const idSym = Symbol('id');

let carA = {
	id: 1,
	name: 'morning',
  	brand: 'kia',
  	[idSym]: 100,
}

console.log(Object.getOwnPropertyNames(carA));
//['id', 'name', 'brand']
console.log(Object.getOwnPropertySymbols(carA));
//[Symbol(id)]

Symbol.for()를 이용한 전역 심볼

원래는 심볼로 값을 생성하면 심볼의 description이 같더라도 다 다른 값을 가지게 됩니다.
하지만 Symbol.for()을 이용하면 같은 description을 가졌을 때 같은 값을 가집니다.

Symbol('id') === Symbol('id') // false
Symbol.for('id') === Symbol.for('id') // true

Symbol.keyFor()를 이용한 전역심볼 description 출력

let sym = Symbol.for("name");
let sym2 = Symbol.for("id");

console.log(Symbol.keyFor(sym)); //name
console.log(Symbol.keyFor(sym2)); //id

제한된 출력

class Car{
	constructor() {
    	this.length = 0;
    }
  
  	add(brand, name){
    	this[brand] = name;
      	this.length++;
    }
}

let myCars = new Car();
myCars.add('kia', 'morning');
myCars.add('hyndai', 'tucson');
myCars.add('genesis', 'gv80');

for(const car in myCars){
	console.log(car, myCars[car]);
}

//length 3
//kia morning
//hyndai tucson
//genesis gv80

여기서 length 출력을 하고 싶지 않을때, 심볼을 이용하면 됩니다.

const length = Symbol('length');

class Car{
	constructor() {
    	this[length] = 0;
    }
  
  	add(brand, name){
    	this[brand] = name;
      	this[length]++;
    }
}

let myCars = new Car();
myCars.add('kia', 'morning');
myCars.add('hyndai', 'tucson');
myCars.add('genesis', 'gv80');

for(const car in myCars){
	console.log(car, myCars[car]);
}

//kia morning
//hyndai tucson
//genesis gv80