πŸ”₯ 33.1 μ‹¬λ²Œμ΄λž€?

ECMAScript둜 ν‘œμ€€ν™”λœ μžλ°”μŠ€ν¬λ¦½νŠΈμ—λŠ” λ¬Έμžμ—΄, 숫자, λΆ€μšΈ, null, undefined 총 6개의 객체 νƒ€μž…μ΄ μžˆμ—ˆλ‹€.

μ‹¬λ²Œμ€ ES6μ—μ„œ λ„μž…λœ 7번째 데이터 νƒ€μž…μœΌλ‘œ λ³€κ²½ λΆˆκ°€λŠ₯ν•œ μ›μ‹œ νƒ€μž…μ˜ 값이닀. μ‹¬λ²Œ 값은 λ‹€λ₯Έ κ°’κ³Ό μ€‘λ³΅λ˜μ§€ μ•ŠλŠ” μœ μΌλ¬΄μ΄ν•œ 값이닀. λ”°λΌμ„œ 주둜 μ΄λ¦„μ˜ 좩돌 μœ„ν—˜μ΄ μ—†λŠ” μœ μΌν•œ ν”„λ‘œνΌν‹° ν‚€λ₯Όλ§Œλ“€κΈ° μœ„ν•΄ μ‚¬μš©ν•œλ‹€.

πŸ”₯ 33.2 μ‹¬λ²Œκ°’μ˜ 생성

βœ” 33.2.1 Symbol ν•¨μˆ˜

μ‹¬λ²Œ 값은 Symbol ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ—¬ μƒμ„±ν•œλ‹€. μ΄λ•Œ μƒμ„±λœ μ‹¬λ²Œ 값은 μ™ΈλΆ€λ‘œ λ…ΈμΆœλ˜μ§€ μ•Šμ•„ 확인할 수 μ—†μœΌλ©°, λ‹€λ₯Έ κ°’κ³Ό μ ˆλŒ€ μ€‘λ³΅λ˜μ§€ μ•ŠλŠ” μœ μΌλ¬΄μ΄ν•œ 값이닀.

// Symbol ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ—¬ μœ μΌλ¬΄μ΄ν•œ μ‹¬λ²Œ 값을 μƒμ„±ν•œλ‹€.
const mySymbol = Symbol();
console.log(typeof mySymbol); // symbol

// μ‹¬λ²Œ 값은 μ™ΈλΆ€λ‘œ λ…ΈμΆœλ˜μ§€ μ•Šμ•„ 확인할 수 μ—†λ‹€.
console.log(mySymbol);        // Symbol()

Symbol ν•¨μˆ˜μ—λŠ” μ„ νƒμ μœΌλ‘œ λ¬Έμžμ—΄μ„ 인수둜 전달할 수 μžˆμœΌλ‚˜ μ΄λŠ” μ‹¬λ²Œ κ°’ 생성에 μ–΄λ– ν•œ 영ν–₯도 주지 μ•ŠλŠ”λ‹€.

// μ‹¬λ²Œ 값에 λŒ€ν•œ μ„€λͺ…이 같더라도 μœ μΌλ¬΄μ΄ν•œ μ‹¬λ²Œ 값을 μƒμ„±ν•œλ‹€.
const mySymbol1 = Symbol('mySymbol');
const mySymbol2 = Symbol('mySymbol');

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

μ‹¬λ²Œ 값은 μ•”λ¬΅μ μœΌλ‘œ λ¬Έμžμ—΄μ΄λ‚˜ 숫자 νƒ€μž…μœΌλ‘œ λ³€ν™˜λ˜μ§€ μ•ŠμœΌλ‚˜ λΆˆλ¦¬μ–Έ νƒ€μž…μœΌλ‘œλŠ” λ³€ν™˜λœλ‹€.

const mySymbol = Symbol();

// μ‹¬λ²Œ 값은 μ•”λ¬΅μ μœΌλ‘œ λ¬Έμžμ—΄μ΄λ‚˜ 숫자 νƒ€μž…μœΌλ‘œ λ³€ν™˜λ˜μ§€ μ•ŠλŠ”λ‹€.
console.log(mySymbol + ''); // TypeError: Cannot convert a Symbol value to a string
console.log(+mySymbol);     // TypeError: Cannot convert a Symbol value to a string

// λΆˆλ¦¬μ–Έ νƒ€μž…μœΌλ‘œλŠ” μ•”λ¬΅μ μœΌλ‘œ νƒ€μž… λ³€ν™˜λœλ‹€.
console.log(!!mySymbol); // true

// if λ¬Έ λ“±μ—μ„œ 쑴재 확인을 μœ„ν•΄ μ‚¬μš©ν•  수 μžˆλ‹€.
if (mySymbol) console.log('mySymbol is not empty.');

βœ” 33.2.2 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.keyFor λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ μ „μ—­ μ‹¬λ²Œ λ ˆμ§€μŠ€νŠΈλ¦¬μ— μ €μž₯된 μ‹¬λ²Œ κ°’μ˜ ν‚€λ₯Ό μΆ”μΆœν•  수 μžˆλ‹€.

// μ „μ—­ μ‹¬λ²Œ λ ˆμ§€μŠ€νŠΈλ¦¬μ— mySymbolμ΄λΌλŠ” ν‚€λ‘œ μ €μž₯된 μ‹¬λ²Œ 값이 μ—†μœΌλ©΄ μƒˆλ‘œμš΄ μ‹¬λ²Œ 값을 생성
const s1 = Symbol.for('mySymbol');
// μ „μ—­ μ‹¬λ²Œ λ ˆμ§€μŠ€νŠΈλ¦¬μ— μ €μž₯된 μ‹¬λ²Œ κ°’μ˜ ν‚€λ₯Ό μΆ”μΆœ
Symbol.keyFor(s1); // -> mySymbol

// Symbol ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ—¬ μƒμ„±ν•œ μ‹¬λ²Œ 값은 μ „μ—­ μ‹¬λ²Œ λ ˆμ§€μŠ€νŠΈλ¦¬μ— λ“±λ‘λ˜μ–΄ κ΄€λ¦¬λ˜μ§€ μ•ŠλŠ”λ‹€.
const s2 = Symbol('foo');
// μ „μ—­ μ‹¬λ²Œ λ ˆμ§€μŠ€νŠΈλ¦¬μ— μ €μž₯된 μ‹¬λ²Œ κ°’μ˜ ν‚€λ₯Ό μΆ”μΆœ
Symbol.keyFor(s2); // -> undefined

πŸ”₯ 33.3 μ‹¬λ²Œκ³Ό μƒμˆ˜

// μœ„, μ•„λž˜, μ™Όμͺ½, 였λ₯Έμͺ½μ„ λ‚˜νƒ€λ‚΄λŠ” μƒμˆ˜λ₯Ό μ •μ˜ν•œλ‹€.
// μ΄λ•Œ κ°’ 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.');
}

πŸ”₯ 33.4 μ‹¬λ²Œκ³Ό ν”„λ‘œνΌν‹° ν‚€

객체의 ν”„λ‘œνΌν‹° ν‚€λŠ” 빈 λ¬Έμžμ—΄μ„ ν¬ν•¨ν•˜λŠ” λ¬Έμžμ—΄ λ˜λŠ” μ‹¬λ²Œ κ°’μœΌλ‘œ λ§Œλ“€μˆ˜ 있으며 동적 생성할 수 μžˆλ‹€. μ‹¬λ²Œ 값을 ν”„λ‘œνΌν‹° ν‚€λ‘œ μ‚¬μš©ν•˜λ €λ©΄ ν”„λ‘œνΌν‹° ν‚€λ‘œ μ‚¬μš©ν•  μ‹¬λ²Œ 값에 λŒ€κ΄„ν˜Έλ₯Ό μ‚¬μš©ν•΄μ•Ό ν•œλ‹€. μ‹¬λ²Œκ°’μ€ μœ μΌλ¬΄μ΄ν•œ κ°’μ΄λ―€λ‘œ μ‹¬λ²Œ κ°’μœΌλ‘œ ν”„λ‘œνΌν‹° ν‚€λ₯Ό λ§Œλ“€λ©΄ λ‹€λ₯Έ ν”„λ‘œνΌν‹° 킀와 μ ˆλŒ€ μΆ©λŒν•˜μ§€ μ•ŠλŠ”λ‹€.

const obj = {
  // μ‹¬λ²Œ κ°’μœΌλ‘œ ν”„λ‘œνΌν‹° ν‚€λ₯Ό 생성
  [Symbol.for('mySymbol')]: 1
};

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

πŸ”₯ 33.5 μ‹¬λ²Œκ³Ό ν”„λ‘œνΌν‹° 은닉

ν”„λ‘œνΌν‹° ν‚€κ°€ μ‹¬λ²Œ κ°’μœΌλ‘œ μƒμ„±λœ 경우 for … in λ¬Έμ΄λ‚˜ Object.keys. Object.getOwnPropertyNames λ©”μ„œλ“œλ‘œ 찾을 수 μ—†λ‹€. 이처럼 μ‹¬λ²Œ 값을 ν”„λ‘œνΌν‹° ν‚€λ‘œ μ‚¬μš©ν•˜μ—¬ ν”„λ‘œνΌν‹°λ₯Ό μƒμ„±ν•˜λ©΄ ν”„λ‘œνΌν‹°λ₯Ό 은닉할 수 μžˆλ‹€.

const obj = {
  // μ‹¬λ²Œ κ°’μœΌλ‘œ ν”„λ‘œνΌν‹° ν‚€λ₯Ό 생성
  [Symbol('mySymbol')]: 1
};

for (const key in obj) {
  console.log(key); // 아무것도 좜λ ₯λ˜μ§€ μ•ŠλŠ”λ‹€.
}

console.log(Object.keys(obj)); // []
console.log(Object.getOwnPropertyNames(obj)); // []

ν•˜μ§€λ§Œ Object.getOwnPropertySymbols λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ μ°Ύμ„μˆ˜ μžˆλ‹€.

const obj = {
  // μ‹¬λ²Œ κ°’μœΌλ‘œ ν”„λ‘œνΌν‹° ν‚€λ₯Ό 생성
  [Symbol('mySymbol')]: 1
};

// getOwnPropertySymbols λ©”μ„œλ“œλŠ” 인수둜 μ „λ‹¬ν•œ 객체의 μ‹¬λ²Œ ν”„λ‘œνΌν‹° ν‚€λ₯Ό λ°°μ—΄λ‘œ λ°˜ν™˜ν•œλ‹€.
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(mySymbol)]

// getOwnPropertySymbols λ©”μ„œλ“œλ‘œ μ‹¬λ²Œ 값도 찾을 수 μžˆλ‹€.
const symbolKey1 = Object.getOwnPropertySymbols(obj)[0];
console.log(obj[symbolKey1]); // 1

πŸ”₯ 33.6 μ‹¬λ²Œκ³Ό ν‘œμ€€ 빌트인 객체 ν™•μž₯

일반적으둜 ν‘œμ€€ 빌트인 객체에 μ‚¬μš©μž μ •μ˜ λ©”μ„œλ“œλ₯Ό 직접 μΆ”κ°€ν•˜μ—¬ ν™•μž₯ν•˜λŠ” 것은 ꢌμž₯ν•˜μ§€ μ•ŠλŠ”λ‹€. ν‘œμ€€ 빌트인 κ°μ²΄λŠ” 읽기 μ „μš©μœΌλ‘œ μ‚¬μš©ν•˜λŠ” 것이 μ’‹λ‹€. κ·Έ μ΄μœ λŠ” κ°œλ°œμžκ°€ 직접 μΆ”κ°€ν•œ λ©”μ„œλ“œμ™€ λ―Έλž˜μ— ν‘œμ€€ μ‚¬μ–‘μœΌλ‘œ 좔가될 λ©”μ„œλ“œμ˜ 이름이 쀑볡될 수 있기 λ•Œλ¬Έμ΄λ‹€.

ν•˜μ§€λ§Œ 쀑볡될 κ°€λŠ₯성이 μ—†λŠ” μ‹¬λ²Œκ°’μœΌλ‘œ ν”„λ‘œνΌν‹° ν‚€λ₯Ό μƒμ„±ν•˜μ—¬ ν‘œμ€€ 빌트인 객체λ₯Ό ν™•μž₯ν•˜λ©΄ ν‘œμ€€ 빌트인 객체의 κΈ°μ‘΄ ν”„λ‘œνΌν‹° 킀와 μΆ©λŒν•˜μ§€ μ•ŠλŠ” 것은 λ¬Όλ‘ , ν‘œμ€€ μ‚¬μ–‘μ˜ 버전이 μ˜¬λΌκ°μ— 따라 좔가될지 λͺ¨λ₯΄λŠ” μ–΄λ–€ ν”„λ‘œνΌν‹° 킀와도 μΆ©λŒν•  μœ„ν—˜μ΄ μ—†μ–΄ μ•ˆμ „ν•˜κ²Œ ν‘œμ€€ 빌트인 객체λ₯Ό ν™•μž₯ν•  수 μžˆλ‹€.

// μ‹¬λ²Œ κ°’μœΌλ‘œ ν”„λ‘œνΌν‹° ν‚€λ₯Ό 동적 μƒμ„±ν•˜λ©΄ λ‹€λ₯Έ ν”„λ‘œνΌν‹° 킀와 μ ˆλŒ€ μΆ©λŒν•˜μ§€ μ•Šμ•„ μ•ˆμ „ν•˜λ‹€.
Array.prototype[Symbol.for('sum')] = function () {
  return this.reduce((acc, cur) => acc + cur, 0);
};

[1, 2][Symbol.for('sum')](); // -> 3

πŸ”₯ 33.7 Well-known Symbol

μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ κΈ°λ³Έ μ œκ³΅ν•˜λŠ” 빌트인 μ‹¬λ²Œκ°’μ΄ μžˆλ‹€. 빌트인 μ‹¬λ²Œ 값은 Symbol ν•¨μˆ˜μ˜ ν”„λ‘œνΌν‹°μ— ν• λ‹Ήλ˜μ–΄ μžˆλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ κΈ°λ³Έ μ œκ³΅ν•˜λŠ” 빌트인 μ‹¬λ²Œ 값은 ECMAScript μ‚¬μ–‘μ—μ„œλŠ” Well-known Symbol 이라 λΆ€λ₯Έλ‹€. μ΄λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ˜ λ‚΄λΆ€ μ•Œκ³ λ¦¬μ¦˜μ— μ‚¬μš©λœλ‹€.

profile
μ΄μ‚¬μ€‘μž…λ‹ˆλ‹€!🌟https://velog.io/@devkyoung2

0개의 λŒ“κΈ€

κ΄€λ ¨ μ±„μš© 정보