자바스크립트 기호

기호는 ES6에서 도입된 Javascript의 기본 데이터 유형입니다.
기호는 Symbol 생성자를 사용하여 생성됩니다. 문자열은 선택 사항입니다.

let sym1 = Symbol('xyz');

기호의 중요한 동작 중 하나는 고유한 값을 반환합니다.
따라서 아래 코드는 false를 기록합니다.

let sym1 = Symbol('foo');
let sym2 = Symbol('foo');

sym1 === sym2;  // false
typeof sym1;    // symbol

참고: new 연산자를 사용하면 TypeError가 발생합니다. 이것을 incomplete constructor라고 합니다.

let sym = new Symbol('foo');

Uncaught TypeError: Symbol is not a constructor

개체에서 기호 키가 사용되는 경우 for...in를 사용하면 해당 키가 무시됩니다. 심지어 그들은 Object.keys 에 의해 무시되지만 Object.getOwnPropertySymbols 함수를 사용하여 이를 얻을 수 있습니다.

let obj = {};

obj[Symbol('foo')] = 'a'
obj[Symbol.for('bar')] = 'b';
obj['c'] = 'c';
obj.d = 'd';

for(let i in obj){
   console.log(i);   // logs c,d
}

Object.keys(obj);     // ['c', 'd']
Object.getOwnPropertySymbols(obj);  // [Symbol(foo), Symbol(bar)]

Symbol.for 및 Symbol.keyFor

Symbol.for(string)는 GSR(Global Symbol Registry)에서 심볼을 확인하고 반환하는 함수입니다. 존재하지 않으면 생성하고 반환합니다.
Symbol.keyFor(symbol) 함수는 Symbol.for를 사용하여 만든 기호의 식별자를 검색하는 데 사용됩니다.

const foo1 = Symbol.for('foo');  // this one is created
const foo2 = Symbol.for('foo');  // retrieve the already created one
const bar = Symbol.for('bar');   // this one is created


foo1 === foo2;    // true
foo1 === bar;     // false
Symbol.keyFor(foo1)  // "foo"

const empty = Symbol.for();
console.log(Symbol.keyFor(empty));  // "undefined" (string)

Symbol.keyFor는 GSR에서 심볼을 검색하므로 Symbol 생성자에서 만든 심볼은 keyFor에서 액세스할 수 없으므로 undefined를 반환합니다.

const Jam = Symbol('jam');
console.log(Symbol.keyFor(Jam));   // undefined

반응에서의 사용법

기호는 일반적으로 useEffect에서 사용되는 트리거 변경 감지에 사용할 수 있습니다.

const [key, setKey] = useState(Symbol());

const changeKey = ()=>{
  setKey(Symbol());   // new value is set
}

useEffect(()=>{
  // anything to run on change of "key"
},[key]);