๐Ÿ“– 7๋ฒˆ์งธ ๋ฐ์ดํ„ฐ ํƒ€์ž… Symbol

c_yjยท2022๋…„ 7์›” 12์ผ
0

DeepDive

๋ชฉ๋ก ๋ณด๊ธฐ
30/42
post-thumbnail

์‹ฌ๋ฒŒ์ด๋ž€ โ“

์‹ฌ๋ฒŒ์€ ES6์—์„œ ๋„์ž…๋œ 7๋ฒˆ์งธ ๋ฐ์ดํ„ฐ ํƒ€์ž…์œผ๋กœ ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€๋Šฅํ•œ ์›์‹œ ํƒ€์ž…์˜ ๊ฐ’์ด๋‹ค. ์‹ฌ๋ฒŒ ๊ฐ’์€ ๋‹ค๋ฅธ ๊ฐ’๊ณผ ์ค‘๋ณต๋˜์ง€ ์•Š๋Š” ์œ ์ผ๋ฌด์ดํ•œ ๊ฐ’์ด๋‹ค. ๋”ฐ๋ผ์„œ ์ฃผ๋กœ ์ด๋ฆ„์˜ ์ถฉ๋Œ ์œ„ํ—˜์ด ์—†๋Š” ์œ ์ผํ•œ ํ”„๋กœํผํ‹ฐ ํ‚ค๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ.

์‹ฌ๋ฒŒ ๊ฐ’์˜ ์ƒ์„ฑ โ“

Symbol ํ•จ์ˆ˜ ๐Ÿ”ต

์‹ฌ๋ฒŒ๊ฐ’์€ Symbol ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ƒ์„ฑํ•ด์•ผ ํ•œ๋‹ค. ์ด ๋•Œ ์ƒ์„ฑ๋œ ์‹ฌ๋ฒŒ ๊ฐ’์€ ์™ธ๋ถ€๋กœ ๋…ธ์ถœ๋˜์ง€ ์•Š์•„ ํ™•์ธํ•  ์ˆ˜ ์—†์œผ๋ฉฐ, ๋‹ค๋ฅธ ๊ฐ’๊ณผ ์ ˆ๋Œ€ ์ค‘๋ณต๋˜์ง€ ์•Š๋Š” ์œ ์ผ๋ฌด์ดํ•œ ๊ฐ’์ด๋‹ค.

// Symbol ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์œ ์ผ๋ฌด์ดํ•œ ์‹ฌ๋ฒŒ ๊ฐ’์„ ์ƒ์„ฑํ•œ๋‹ค.
const mySymbol = Symbol();
console.log(typeof mySymbol); // symbol

// ์‹ฌ๋ฒŒ ๊ฐ’์€ ์™ธ๋ถ€๋กœ ๋…ธ์ถœ๋˜์ง€ ์•Š์•„ ํ™•์ธํ•  ์ˆ˜ ์—†๋‹ค.
console.log(mySymbol); // Symbol()
  • Symbol์€ new ์—ฐ์‚ฐ์ž์™€ ํ•จ๊ผ ํ˜ธ์ถœํ•˜์ง€ ์•Š๋Š”๋‹ค.
  • Symbol ํ•จ์ˆ˜์—๋Š” ์„ ํƒ์ ์œผ๋กœ ๋ฌธ์ž์—ด์„ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ๋ฌธ์ž์—ด์€ ์ƒ์„ฑ๋œ ์‹ฌ๋ฒŒ ๊ฐ’์— ๋Œ€ํ•œ ์„ค๋ช…์œผ๋กœ ๋””๋ฒ„๊น… ์šฉ๋„๋กœ๋งŒ ์‚ฌ์šฉ ์‹ฌ๋ฒŒ๊ฐ’ ์ƒ์„ฑ์— ์–ด๋– ํ•œ ์˜ํ–ฅ๋„โŒ
  • ์‹ฌ๋ฒŒ๊ฐ’๋„ ๋ฌธ์ž์—ด, ์ˆซ์ž, ๋ถˆ๋ฆฌ์–ธ๊ณผ ๊ฐ™์ด ๊ฐ์ฒด์ฒ˜๋Ÿผ ์ ‘๊ทผํ•˜๋ฉด ์•”๋ฌต์ ์œผ๋กœ ๋ž˜ํผ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑ
    • ๋ถˆ๋ฆฌ์–ธ ํƒ€์ž…์œผ๋กœ๋Š” ์•”๋ฌต์ ์œผ๋กœ ํƒ€์ž… ๋ณ€ํ™˜
      ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”
```javascript
// ์‹ฌ๋ฒŒ ๊ฐ’์— ๋Œ€ํ•œ ์„ค๋ช…์ด ๊ฐ™๋”๋ผ๋„ ์œ ์ผ๋ฌด์ดํ•œ ์‹ฌ๋ฒŒ ๊ฐ’์„ ์ƒ์„ฑํ•œ๋‹ค.
const mySymbol1 = Symbol('mySymbol');
const mySymbol2 = Symbol('mySymbol');

console.log(mySymbol1 === mySymbol2) ; // false

Symbol.for / Symbol.keyFor ๋ฉ”์„œ๋“œ ๐Ÿ”ต

Symbol.for ๋ฉ”์„œ๋“œ๋Š” ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด์„ ํ‚ค๋กœ ์‚ฌ์šฉํ•˜์—ฌ ํ‚ค์™€ ์‹ฌ๋ฒŒ ๊ฐ’์˜ ์Œ๋“ค์ด ์ €์žฅ๋˜์–ด ์žˆ๋Š” ์ „์—ญ์‹ฌ๋ฒŒ๋ ˆ์ฆˆ์ŠคํŠธ๋ฆฌ์—์„œ ํ•ด๋‹น ํ‚ค์™€ ์ผ์น˜ํ•˜๋Š” ์‹ฌ๋ฒŒ ๊ฐ’์„ ๊ฒ€์ƒ‰ํ•œ๋‹ค.

  • ๊ฒ€์ƒ‰์— ์„ฑ๊ณตํ•˜๋ฉด ์ƒˆ๋กœ์šด ์‹ฌ๋ฒŒ ๊ฐ’์„ ์ƒ์„ฑํ•˜์ง€ ์•Š๊ณ  ๊ฒ€์ƒ‰๋œ ์‹ฌ๋ฒŒ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
  • ๊ฒ€์ƒ‰์— ์‹คํŒจํ•˜๋ฉด ์ƒˆ๋กœ์šด ์‹ฌ๋ฒŒ ๊ฐ’์„ ์ƒ์„ฑํ•˜์—ฌ Symbol.for ๋ฉ”์„œ๋“œ์˜ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋œ ํ‚ค๋กœ ์ „์—ญ ์‹ฌ๋ฒŒ ๋ ˆ์ฆˆ์ŠคํŠธ๋ฆฌ์— ์ €์žฅํ•œ ํ›„, ์ƒ์„ฑ๋œ ์‹ฌ๋ฒŒ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ์ „์—ญ ์‹ฌ๋ฒŒ ๋ ˆ์ง€์ŠคํŠธ๋ฆฌ์— mySymbol์ด๋ผ๋Š” ํ‚ค๋กœ ์ €์žฅ๋œ ์‹ฌ๋ฒŒ๊ฐ’์ด ์—†์œผ๋ฉด ์ƒˆ๋กœ์šด ์‹ฌ๋ฒŒ ๊ฐ’์„ ์ƒ์„ฑ
const s1 = Symbol.for('mySymbol');
// ์ „์—ญ ์‹ฌ๋ฒŒ ๋ ˆ์ฆˆ์ŠคํŠธ๋ฆฌ์— mySymbol์ด๋ผ๋Š” ํ‚ค๋กœ ์ €์žฅ๋œ ์‹ฌ๋ฒŒ๊ฐ’์ด ์žˆ์œผ๋ฉด ํ•ด๋‹น ์‹ฌ๋ฒŒ๊ฐ’์„ ๋ฐ˜ํ™˜
const s2 = Symbol.for('mySymbol');

console.log(s1 === s2); // true
  • Symbol.for ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์—ญ์—์„œ ์ค‘๋ณต๋˜์ง€ ์•Š๋Š” ์œ ์ผ๋ฌด์ดํ•œ ์ƒ์ˆ˜์ธ ์‹ฌ๋ฒŒ๊ฐ’์„ ๋‹จ ํ•˜๋‚˜๋งŒ ์ƒ์„ฑํ•˜์—ฌ ์ „์—ญ ์‹ฌ๋ฒŒ๋ ˆ์ง€์ŠคํŠธ๋ฆฌ๋ฅผ ํ†ตํ•ด ๊ณต์œ 
  • Symbo.keyFor ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ „์—ญ ์‹ฌ๋ฒŒ ๋ ˆ์ง€์ŠคํŠธ๋ฆฌ์— ์ €์žฅ๋œ ์‹ฌ๋ฒŒ ๊ฐ’์˜ ํ‚ค๋ฅผ ์ถ”์ถœ
// ์ „์—ญ ์‹ฌ๋ฒŒ ๋ ˆ์ง€์ŠคํŠธ๋ฆฌ์— mySymbol์ด๋ผ๋Š” ํ‚ค๋กœ ์ €์žฅ๋œ ์‹ฌ๋ฒŒ ๊ฐ’์ด ์—†์œผ๋ฉด ์ƒˆ๋กœ์šด ์‹ฌ๋ฒŒ ๊ฐ’์„ ์ƒ์„ฑ
const s1 = Symbol.for('mySymbol');
// ์ „์—ญ ์‹ฌ๋ฒŒ ๋ ˆ์ง€์ŠคํŠธ๋ฆฌ์— ์ €์žฅ๋œ ์‹ฌ๋ฒŒ๊ฐ’์˜ ํ‚ค๋ฅผ ์ถ”์ถœ
Symbol.keyFor(s1); // mySymbol

// Symbol ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ƒ์„ฑํ•œ ์‹ฌ๋ฒŒ๊ฐ’์€ ์ „์—ญ ์‹ฌ๋ฒŒ ๋ ˆ์ฆˆ์ŠคํŠธ๋ฆฌ์— ๋“ฑ๋ก๋˜์–ด ๊ด€๋ฆฌ๋˜์ง€ ์•Š๋Š”๋‹ค.
const s2 = Symbol('foo');
// ์ „์—ญ ์‹ฌ๋ฒŒ ๋ ˆ์ง€์ŠคํŠธ๋ฆฌ์— ์ €์žฅ๋œ ์‹ฌ๋ฒŒ ๊ฐ’์˜ ํ‚ค๋ฅผ ์ถ”์ถœ
Symbol.keyFor(s2); // undefined

์‹ฌ๋ฒŒ๊ณผ ์ƒ์ˆ˜ โ“

// ์œ„, ์•„๋ž˜, ์™ผ์ชฝ, ์˜ค๋ฅธ์ชฝ์„ ๋‚˜ํƒ€๋‚ด๋Š” ์ƒ์ˆ˜๋ฅผ ์ •์˜ํ•œ๋‹ค
// ์ด๋•Œ ๊ฐ’ 1, 2, 3, 4์—๋Š” ํŠน๋ณ„ํ•œ ์˜๋ฏธ๊ฐ€ ์—†๊ณ  ์ƒ์ˆ˜ ์ด๋ฆ„์— ์˜๋ฏธ๊ฐ€ ์žˆ๋‹ค.
const Direction = {
  UP: 1,
  DOWN: 2,
  LEFT: 3,
  RIGHT: 4
};

// ๋ณ€์ˆ˜์— ์ƒ์ˆ˜๋ฅผ ํ• ๋‹น
const myDirection = Direction.UP;

if(myDirection === Direction.UP){
  console.log('You are going Up.');
}

์œ„ ์˜ˆ์ œ์™€ ๊ฐ™์ด ๊ฐ’์—๋Š” ํŠน๋ณ„ํ•œ ์˜๋ฏธ๊ฐ€ ์—†๊ณ  ์ƒ์ˆ˜ ์ด๋ฆ„ ์ž์ฒด์— ์˜๋ฏธ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. ์ด๋•Œ ๋ฌธ์ œ๋Š” ์ƒ์ˆ˜ ๊ฐ’ 1,2,3,4๊ฐ€ ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋‹ค๋ฅธ ๋ณ€์ˆ˜ ๊ฐ’๊ณผ ์ค‘๋ณต๋  ์ˆ˜๋„ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ์ด๋Ÿฌํ•œ ๊ฒฝ์šฐ ๋ณ€๊ฒฝ/์ค‘๋ณต๋  ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ๋Š” ๋ฌด์˜๋ฏธํ•œ ์ƒ์ˆ˜ ๋Œ€์‹  ์ค‘๋ณต๋  ๊ฐ€๋Šฅ์„ฑ์ด ์—†๋Š” ์œ ์ผ๋ฌด์ดํ•œ ์‹ฌ๋ฒŒ ๊ฐ’์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

// ์œ„, ์•„๋ž˜, ์™ผ์ชฝ, ์˜ค๋ฅธ์ชฝ์„ ๋‚˜ํƒ€๋‚ด๋Š” ์ƒ์ˆ˜๋ฅผ ์ •์˜ํ•œ๋‹ค.
// ์ค‘๋ณต๋  ๊ฐ€๋Šฅ์„ฑ์ด ์—†๋Š” ์‹ฌ๋ฒŒ ๊ฐ’์œผ๋กœ ์ƒ์ˆ˜ ๊ฐ’์„ ์ƒ์„ฑ
const Direction = {
  UP: Symbol('up'),
  DOWN: Symbol('down'),
  LEFT: Symbol('left'),
  RIGHT: Symbol('right')
};

const myDirection = Direction.UP;
if( myDirection === Direction.UP) {
  console.log('You are going up.');
}

enum์€ ๋ช…๋ช…๋œ ์ˆซ์ž ์ƒ์ˆ˜์˜ ์ง‘ํ•ฉ์œผ๋กœ ์—ด๊ฑฐํ˜•์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” enum์„ ์ง€์›ํ•˜์ง€ ์•Š์ง€๋งŒ C,์ž๋ฐ”,ํŒŒ์ด์ฌ ๋“ฑ ์—ฌ๋Ÿฌ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์™€ ์ž๋ฐ”์Šคํฌ๋ฆฝํ‹” ์ƒ์œ„ ํ™•์žฅ์ธ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” enum์„ ์ง€์›ํ•œ๋‹ค.

์‹ฌ๋ฒŒ๊ณผ ํ”„๋กœํผํ‹ฐ ํ‚ค โ“

๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ ํ‚ค๋Š” ๋นˆ ๋ฌธ์ž์—ด์„ ํฌํ•จํ•˜๋Š” ๋ชจ๋“  ๋ฌธ์ž์—ด ๋˜๋Š” ์‹ฌ๋ฒŒ๊ฐ’์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋™์ ์œผ๋กœ ์ƒ์„ฑํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
์‹ฌ๋ฒŒ ๊ฐ’์„ ํ”„๋กœํผํ‹ฐ ํ‚ค๋กœ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ํ”„๋กœํผํ‹ฐ ํ‚ค๋กœ ์‚ฌ์šฉํ•  ์‹ฌ๋ฒŒ ๊ฐ’์— ๋Œ€๊ด„ํ˜ธ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค. ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•  ๋–„๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋Œ€๊ด„ํ˜ธ๋ฅผ ์‚ฌ์šฉ

const obj = {
  // ์‹ฌ๋ฒŒ ๊ฐ’์œผ๋กœ ํ”„๋กœํผํ‹ฐ ํ‚ค๋ฅผ ์ƒ์„ฑ
  [Symbol.for('mySymbol')]: 1
};

obj[Symbol.for('mySymbol')]; // 1

์‹ฌ๋ฒŒ ๊ฐ’์€ ์œ ์ผ๋ฌด์ดํ•œ ๊ฐ’์ด๋ฏ€๋กœ ์‹ฌ๋ฒŒ๊ฐ’์œผ๋กœ ํ”„๋กœํผํ‹ฐ ํ‚ค๋ฅผ ๋งŒ๋“ค๋ฉด ๋‹ค๋ฅด ํ”„๋กœํผํ‹ฐ ํ‚ค์™€ ์ ˆ๋Œ€ ์ถฉ๋Œํ•˜์ง€ ์•Š๋Š”๋‹ค.

์‹ฌ๋ฒŒ๊ณผ ํ”„๋กœํผํ‹ฐ ์€๋‹‰ โ“

์‹ฌ๋ฒŒ ๊ฐ’์„ ํ”„๋กœํผํ‹ฐ ํ‚ค๋กœ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ์„ฑํ•œ ํ”„๋กœํผํ‹ฐ๋Š” for... in ๋ฌธ์ด๋‚˜ Object.keys, Object.getOwnPropertyNames ๋ฉ”์„œ๋“œ๋กœ ์ฐพ์„ ์ˆ˜ ์—†๋‹ค.
ES6์—์„œ ๋„์ž…๋œ Object.getOwnPropertySymbols ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์‹ฌ๋ฒŒ๊ฐ’์„ ํ”„๋กœํผํ‹ฐ ํ‚ค๋กœ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ์„ฑํ•œ ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ๋‹ค.

์‹ฌ๋ฒŒ๊ณผ ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด ํ™•์žฅ โ“

์ผ๋ฐ˜์ ์œผ๋กœ ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด์— ์‚ฌ์šฉ์ž ์ •์˜ ๋ฉ”์„œ๋“œ๋ฅผ ์ง์ ‘ ์ถ”๊ฐ€ํ•˜์—ฌ ํ™•์žฅํ•˜๋Š” ๊ฒƒ์€ ๊ถŒ์žฅํ•˜์ง€ ์•Š๋Š”๋‹ค. ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด๋Š” ์ฝ๊ธฐ ์ „์šฉ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

// ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด๋ฅผ ํ™•์žฅํ•˜๋Š” ๊ฒƒ์€ ๊ถŒ์žฅ XXX
Array.prototype.sum= function () {
  return this.reduce((acc,cur) => acc + cur, 0);
};
[1, 2].sum(); // 3

๊ทธ ์ด์œ ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์ง์ ‘ ์ถ”๊ฐ€ํ•œ ๋ฉ”์„œ๋“œ์™€ ๋ฏธ๋ž˜์— ํ‘œ์ค€ ์‚ฌ์–‘์œผ๋กœ ์ถ”๊ฐ€๋ ๋ฉ”์„œ๋“œ์˜ ์ด๋ฆ„์ด ์ค‘๋ณต๋  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

Well-known Symbol โ“

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๊ธฐ๋ณธ ์ œ๊ณตํ•˜๋Š” ๋นŒํŠธ์ธ ์‹ฌ๋ฒŒ ๊ฐ’์ด ์žˆ๋‹ค. ๋นŒํŠธ์ธ ์‹ฌ๋ฒŒ ๊ฐ’์€ Symbol ํ•จ์ˆ˜์˜ ํ”„๋กœํผํ‹ฐ์— ํ• ๋‹น๋˜์–ด ์žˆ๋‹ค.
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๊ธฐ๋ณธ ์ œ๊ณตํ•˜๋Š” ๋นŒํŠธ์ธ ์‹ฌ๋ฒŒ ๊ฐ’์„ ECMAScript ์‚ฌ์–‘์—์„œ๋Š” Well-Known Symbol ์ด๋ผ ๋ถ€๋ฅธ๋‹ค.
Well-Known Symbol์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์˜ ๋‚ด๋ถ€ ์•Œ๊ณ ๋ฆฌ์ฆ˜์— ์‚ฌ์šฉ

profile
FrontEnd Developer

0๊ฐœ์˜ ๋Œ“๊ธ€