ν‹°μŠ€ν† λ¦¬ λ·°

μ‹¬λ²Œμ΄λž€?

μ‹¬λ²Œμ€ ES6μ—μ„œ λ„μž…λœ 7번째 데이터 νƒ€μž…μœΌλ‘œ λ³€κ²½ λΆˆκ°€λŠ₯ν•œ μ›μ‹œ νƒ€μž…μ˜ κ°’μž…λ‹ˆλ‹€.

  • μ‹¬λ²Œ 값은 λ‹€λ₯Έ κ°’κ³Ό μ€‘λ³΅λ˜μ§€ μ•ŠλŠ” μœ μΌλ¬΄μ΄ν•œ κ°’
  • 주둜 μ΄λ¦„μ˜ 좩돌 μœ„ν—˜μ΄ μ—†λŠ” μœ μΌν•œ ν”„λ‘œνΌν‹° ν‚€λ₯Ό λ§Œλ“€κΈ° μœ„ν•΄ μ‚¬μš©
  • ν”„λ‘œνΌν‹° ν‚€λ‘œ μ‚¬μš©ν•  수 μžˆλŠ” 값은 빈 λ¬΄μžμ—΄μ„ ν¬ν•¨ν•œ λͺ¨λ“  λ¬Έμžμ—΄ λ˜λŠ” μ‹¬λ²Œ κ°’

*ES6 이전엔 6가지 νƒ€μž… (λ¬Έμžμ—΄, 숫자, λΆˆλ¦¬μ–Έ, undefined, null, 객체)이 μžˆμ—ˆμŒ


μ‹¬λ²Œ κ°’μ˜ 생성

Symbol ν•¨μˆ˜

μ‹¬λ²Œ 값은 Symbol ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜μ—¬ μƒμ„±ν•©λ‹ˆλ‹€. (λ‹€λ₯Έ μ›μ‹œκ°’μ˜ 값은 λ¦¬ν„°λŸ΄ ν‘œκΈ°λ²•μ„ 톡해 값을 생성할 수 있음)

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

 

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

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

new Symbol(); // TypeError: Symbol is not a constructor

 

이처럼 Symbol ν•¨μˆ˜λŠ” μƒμ„±μž ν•¨μˆ˜μ™€ 달리 new μ—°μ‚°μžμ™€ ν•¨κ»˜ ν˜ΈμΆœν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. new μ—°μ‚°μžμ™€ ν•¨κ»˜ μƒμ„±μž ν•¨μˆ˜ λ˜λŠ” 클래슀λ₯Ό ν˜ΈμΆœν•˜λ©΄ 객체(μΈμŠ€ν„΄μŠ€)κ°€ μƒμ„±λ˜μ§€λ§Œ μ‹¬λ²Œ 값은 λ³€κ²½ λΆˆκ°€λŠ₯ν•œ μ›μ‹œ 값이기 λ•Œλ¬Έμž…λ‹ˆλ‹€.

 

 

Symbol ν•¨μˆ˜λŠ” λ‹€μŒκ³Ό 같은 νŠΉμ§•μ„ 가지고 μžˆμŠ΅λ‹ˆλ‹€.

  • Symbol ν•¨μˆ˜μ—λŠ” μ„ νƒμ μœΌλ‘œ λ¬Έμžμ—΄μ„ 인수둜 전달 ν•  수 있음 (λ¬Έμžμ—΄μ€ μƒμ„±λœ μ‹¬λ²Œ 값에 λŒ€ν•œ μ„€λͺ…μœΌλ‘œ 디버깅 μš©λ„λ‘œλ§Œ μ‚¬μš©λ¨)
  • μ‹¬λ²Œ 값도 λ¬Έμžμ—΄, 숫자, λΆˆλ¦¬μ–Έκ³Ό 같이 객체처럼 μ ‘κ·Όν•˜λ©΄ μ•”λ¬΅μ μœΌλ‘œ 래퍼 객체λ₯Ό 생성함
  • μ‹¬λ²Œ 값은 μ•”λ¬΅μ μœΌλ‘œ λ¬Έμžμ—΄μ΄λ‚˜ 숫자 νƒ€μž…μœΌλ‘œ λ³€ν™˜λ˜μ§€ μ•Šμ§€λ§Œ, λΆˆλ¦¬μ–Έ νƒ€μž…μœΌλ‘œλŠ” 암묡적 νƒ€μž… λ³€ν™˜μ΄ κ°€λŠ₯
// 1. μ‹¬λ²Œ 값에 λŒ€ν•œ μ„€λͺ…이 같더라도 μœ μΌλ¬΄μ΄ν•œ μ‹¬λ²Œ 값을 μƒμ„±ν•œλ‹€.
const mySymbol1 = Symbol('mySymbol');
const mySymbol2 = Symbol('mySymbol');

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


//2. μ‹¬λ²Œλ„ 레퍼 객체λ₯Ό μƒμ„±ν•œλ‹€
const mySymbol = Symbol('mySymbol');

console.log(mySymbol.description); // mySymbol
console.log(mySymbol.toString());  // Symbol(mySymbol)


// 3. μ‹¬λ²Œ κ°’μ˜ 암묡적 νƒ€μž… λ³€ν™˜
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 number

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

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

 

Symbol.for λ©”μ„œλ“œ

Symbol.for λ©”μ„œλ“œλŠ” 인수둜 전달받은 λ¬Έμžμ—΄μ˜ ν‚€λ‘œ μ‚¬μš©ν•˜μ—¬ 킀와 μ‹¬λ²Œ κ°’μ˜ μŒλ“€μ΄ μ €μž₯λ˜μ–΄ μžˆλŠ” μ „μ—­ μ‹¬λ²Œ λ ˆμ§€μŠ€νŠΈλ¦¬μ—μ„œ ν•΄λ‹Ή 킀와 μΌμΉ˜ν•˜λŠ” μ‹¬λ²Œ 값을 κ²€μƒ‰ν•©λ‹ˆλ‹€.

  • 검색에 μ„±κ³΅ν•˜λ©΄ μƒˆλ‘œμš΄ μ‹¬λ²Œ 값을 μƒμ„±ν•˜μ§€ μ•Šκ³  κ²€μƒ‰λœ μ‹¬λ²Œ 값을 λ°˜ν™˜
  • 검색에 μ‹€νŒ¨ν•˜λ©΄ μƒˆλ‘œμš΄ μ‹¬λ²Œ 값을 μƒμ„±ν•˜μ—¬ Symbol.for λ©”μ„œλ“œμ˜ 인수둜 μ „λ‹¬λœ ν‚€λ‘œ μ „μ—­ μ‹¬λ²Œ λ ˆμ§€μŠ€νŠΈλ¦¬μ— μ €μž₯ν•œ ν›„, μƒμ„±λœ μ‹¬λ²Œ 값을 λ°˜ν™˜

*μ „μ—­ μ‹¬λ²Œ λ ˆμ§€μŠ€νŠΈλ¦¬(global symbol registry) : μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 κ΄€λ¦¬ν•˜λŠ” μ‹¬λ²Œ κ°’ μ €μž₯μ†Œ

 

// μ „μ—­ μ‹¬λ²Œ λ ˆμ§€μŠ€νŠΈλ¦¬μ— mySymbolμ΄λΌλŠ” ν‚€λ‘œ μ €μž₯된 μ‹¬λ²Œ 값이 μ—†μœΌλ©΄ μƒˆλ‘œμš΄ μ‹¬λ²Œ 값을 생성
const s1 = Symbol.for('mySymbol');
// μ „μ—­ μ‹¬λ²Œ λ ˆμ§€μŠ€νŠΈλ¦¬μ— mySymbolμ΄λΌλŠ” ν‚€λ‘œ μ €μž₯된 μ‹¬λ²Œ 값이 있으면 ν•΄λ‹Ή μ‹¬λ²Œ 값을 λ°˜ν™˜
const s2 = Symbol.for('mySymbol');

console.log(s1 === s2); // true

 

Symbol ν•¨μˆ˜λŠ” 호좜될 λ•Œλ§ˆλ‹€ μœ μΌλ¬΄μ΄ν•œ μ‹¬λ²Œ 값을 μƒμ„±ν•œλ‹€λ©΄ μ „μ—­ μ‹¬λ²Œ λ ˆμ§€μŠ€νŠΈλ¦¬μ—μ„œ μ‹¬λ²Œ 값을 검색할 수 μžˆλŠ” ν‚€λ₯Ό 지정할 수 μ—†μœΌλ―€λ‘œ μ „μ—­ μ‹¬λ²Œ λ ˆμ§€μŠ€νŠΈλ¦¬μ— λ“±λ‘λ˜μ–΄ κ΄€λ¦¬λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

 

ν•˜μ§€λ§Œ, Symbol.for λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ μ• ν”Œλ¦¬μΌ€μ΄μ…˜ μ „μ—­μ—μ„œ μ€‘λ³΅λ˜μ§€ μ•ŠλŠ” μœ μΌλ¬΄μ΄ν•œ μƒμˆ˜μΈ μ‹¬λ²Œ 값을 단 ν•˜λ‚˜λ§Œ μƒμ„±ν•˜μ—¬ μ „μ—­ μ‹¬λ²Œ λ ˆμ§€μŠ€νŠΈλ¦¬λ₯Ό 톡해 κ³΅μœ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

 

Symbol.keyFor λ©”μ„œλ“œ

Symbol.keyFor λ©”μ„œλ“œλŠ” μ „μ—­ μ‹¬λ²Œ λ ˆμ§€μŠ€νŠΈλ¦¬μ— μ €μž₯된 μ‹¬λ²Œ κ°’μ˜ ν‚€λ₯Ό μΆ”μΆœν•  수 μžˆμŠ΅λ‹ˆλ‹€.

 

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

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

μ‹¬λ²Œκ³Ό μƒμˆ˜

λ³€κ²½/쀑볡될 κ°€λŠ₯성이 μžˆλŠ” λ¬΄μ˜λ―Έν•œ μƒμˆ˜ λŒ€μ‹  쀑볡될 κ°€λŠ₯성이 μ—†λŠ” μœ μΌλ¬΄μ΄ν•œ μ‹¬λ²Œ 값을 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

 

예λ₯Ό λ“€μ–΄, 4λ°©ν–₯, 즉 μœ„, μ•„λž˜, μ™Όμͺ½, 였λ₯Έμͺ½μ„ λ‚˜νƒ€λ‚΄λŠ” μƒμˆ˜λ₯Ό μ •μ˜ν•œλ‹€κ³  ν–ˆμ„λ•Œ

 

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

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

객체의 ν”„λ‘œνΌν‹° ν‚€λŠ” 빈 λ¬Έμžμ—΄μ„ ν¬ν•¨ν•˜λŠ” λͺ¨λ“  λ¬Έμžμ—΄ λ˜λŠ” μ‹¬λ²Œ κ°’μœΌλ‘œ λ§Œλ“€ 수 있고, λ™μ μœΌλ‘œ 생성할 μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

 

λ§Œμ•½, μ‹¬λ²Œ κ°’μœΌλ‘œ ν”„λ‘œνΌν‹° ν‚€λ₯Ό 동적 μƒμ„±ν•˜μ—¬ ν”„λ‘œνΌν‹° ν‚€λ‘œ μ‚¬μš©ν•˜λ €λ©΄ ν”„λ‘œνΌν‹° ν‚€λ‘œ μ‚¬μš©ν•  μ‹¬λ²Œ 값에 λŒ€κ΄„ν˜Έλ₯Ό μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€. λ˜ν•œ ν”„λ‘œνΌν‹°μ— μ ‘κ·Όν•  λ•Œλ„ λŒ€κ΄„ν˜Έλ₯Ό μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€.

 

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

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

 

이처럼 μ‹¬λ²Œ κ°’μœΌλ‘œ ν”„λ‘œνΌν‹° ν‚€λ₯Ό λ§Œλ“€λ©΄ μ‹¬λ²Œ 값은 μœ μΌλ¬΄μ΄ν•œ κ°’μ΄λ―€λ‘œ κΈ°μ‘΄μ˜ λ‹€λ₯Έ ν”„λ‘œνΌν‹° 킀와 μ ˆλŒ€ μΆ©λŒν•˜μ§€ μ•Šκ³ , λ―Έλž˜μ— 좔가될 μ–΄λ– ν•œ ν”„λ‘œνΌν‹° 킀와도 μΆ©λŒν•  μœ„ν—˜μ΄ μ—†μŠ΅λ‹ˆλ‹€.


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

μ‹¬λ²Œ 값을 ν”„λ‘œνΌν‹° ν‚€λ‘œ μ‚¬μš©ν•˜μ—¬ μƒμ„±ν•œ ν”„λ‘œνΌν‹°λŠ” 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)); // []

 

ν•˜μ§€λ§Œ ν”„λ‘œνΌν‹°λ₯Ό μ™„μ „ν•˜κ²Œ 숨길 수 μžˆλŠ” 것은 μ•„λ‹ˆλΌ ES6μ—μ„œ λ„μž…λœ 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

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

일반적으둜 ν‘œμ€€ 빌트인 객체에 μ‚¬μš©μž μ •μ˜ λ©”μ„œλ“œλ₯Ό 직접 μΆ”κ°€ν•˜μ—¬ ν™•μž₯ν•˜λŠ” 것은 ꢌμž₯ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

  • ν‘œμ€€ 빌트인 객체의 κΈ°μ‘΄ ν”„λ‘œνΌν‹° 킀와 이름이 μ€‘λ³΅λ˜μ–΄ μΆ©λŒν•  수 있음
  • λ―Έλž˜μ— ν‘œμ€€ 사양을 좔가될 λ©”μ„œλ“œμ˜ 이름이 μ€‘λ³΅λ˜λŠ” λ¬Έμ œκ°€ λ°œμƒν•  μˆ˜λ„ 있음
  • ν‘œμ€€ 빌트인 κ°μ²΄λŠ” 읽기 μ „μš©μœΌλ‘œ μ‚¬μš©ν•˜λŠ” 것이 μ’‹μŒ

ν•˜μ§€λ§Œ 쀑볡될 κ°€λŠ₯성이 μ—†λŠ” μ‹¬λ²Œ κ°’μœΌλ‘œ ν”„λ‘œνΌν‹° ν‚€λ₯Ό μƒμ„±ν•˜μ—¬ ν‘œμ€€ 빌트인 객체λ₯Ό ν™•μž₯ν•˜λ©΄ μ–΄λ–€ ν”„λ‘œνΌν‹° 킀와도 μΆ©λŒν•  μœ„ν—˜μ΄ μ—†μ–΄ μ•ˆμ „ν•˜κ²Œ ν‘œμ€€ 빌트인 객체λ₯Ό ν™•μž₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

 

// ν‘œμ€€ 빌트인 객체λ₯Ό ν™•μž₯ν•˜λŠ” 것은 ꢌμž₯ν•˜μ§€ μ•ŠλŠ”λ‹€.
Array.prototype.sum = function () {
  return this.reduce((acc, cur) => acc + cur, 0);
};

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

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

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

Well-known Symbol

μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ κΈ°λ³Έ μ œκ³΅ν•˜λŠ” 빌트인 μ‹¬λ²Œ 값을 ECMAScript μ‚¬μ–‘μ—μ„œλŠ” Well-known Symbol이라 λΆ€λ¦…λ‹ˆλ‹€.

  • Symbol ν•¨μˆ˜μ˜ ν”„λ‘œνΌν‹°μ— ν• λ‹Ήλ˜μ–΄ 있음
  • μžλ°”μŠ€ν¬λ¦½νŠΈ μ—”μ§„μ˜ λ‚΄λΆ€ μ•Œκ³ λ¦¬μ¦˜μ— μ‚¬μš©λ¨

 

μ΄ν„°λ ˆμ΄μ…˜ ν”„λ‘œν† μ½œ

μ΄ν„°λ ˆμ΄μ…˜ ν”„λ‘œν† μ½œμ΄λž€ 빌트인 μ΄ν„°λŸ¬λΈ”μ€ Well-Known Symbol인 Symbol.iteratorλ₯Ό ν‚€λ‘œ κ°–λŠ” λ©”μ„œλ“œλ₯Ό 가지며, Symbol.iterator λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•˜λ©΄ μ΄ν„°λ ˆμ΄ν„°λ₯Ό λ°˜ν™˜ν•˜λ„λ‘ ν•˜λŠ” ECMAScript μ‚¬μ–‘μ˜ κ·œμ •μ„ μ˜λ―Έν•©λ‹ˆλ‹€.

 

*빌트인 μ΄ν„°λŸ¬λΈ” : Array, String, Map, Set, TypedArray, arguments, NodeList, HTMLCollectionκ³Ό 같이 for ... of 문으둜 순회 κ°€λŠ₯ν•œ μ΄ν„°λŸ¬λΈ”

 

λ§Œμ•½, 빌트인 μ΄ν„°λŸ¬λΈ”μ΄ μ•„λ‹Œ 일반 객체λ₯Ό μ΄ν„°λŸ¬λΈ”μ²˜λŸΌ λ™μž‘ν•˜λ„λ‘ κ΅¬ν˜„ν•˜κ³  μ‹Άλ‹€λ©΄ μ΄ν„°λ ˆμ΄μ…˜ ν”„λ‘œν† μ½œμ„ 따라 Well-Known Symbol인 Symbol.iteratorλ₯Ό ν‚€λ‘œ κ°–λŠ” λ©”μ„œλ“œλ₯Ό 객체에 μΆ”κ°€ν•˜κ³  μ΄ν„°λ ˆμ΄ν„°λ₯Ό λ°˜ν™˜ν•˜λ„λ‘ κ΅¬ν˜„ν•˜λ©΄ κ·Έ κ°μ²΄λŠ” μ΄ν„°λŸ¬λΈ”μ΄ λ©λ‹ˆλ‹€.

 

// 1 ~ 5 λ²”μœ„μ˜ μ •μˆ˜λ‘œ 이루어진 μ΄ν„°λŸ¬λΈ”
const iterable = {
  // Symbol.iterator λ©”μ„œλ“œλ₯Ό κ΅¬ν˜„ν•˜μ—¬ μ΄ν„°λŸ¬λΈ” ν”„λ‘œν† μ½œμ„ μ€€μˆ˜
  [Symbol.iterator]() {
    let cur = 1;
    const max = 5;
    // Symbol.iterator λ©”μ„œλ“œλŠ” next λ©”μ„œλ“œλ₯Ό μ†Œμœ ν•œ μ΄ν„°λ ˆμ΄ν„°λ₯Ό λ°˜ν™˜
    return {
      next() {
        return { value: cur++, done: cur > max + 1 };
      }
    };
  }
};

for (const num of iterable) {
  console.log(num); // 1 2 3 4 5
}

 

μ΄λ•Œ μ΄ν„°λ ˆμ΄μ…˜ ν”„λ‘œν† μ½œμ„ μ€€μˆ˜ν•˜κΈ° μœ„ν•΄ μΆ”κ°€ν•œ Symbol.iteratorλŠ” λ‹€λ₯Έ ν”„λ‘œνΌν‹° 킀와 μ ˆλŒ€ μ€‘λ³΅λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

 

이처럼 μ‹¬λ²Œμ€ μ€‘λ³΅λ˜μ§€ μ•ŠλŠ” μƒμˆ˜ 값을 μƒμ„±ν•˜λŠ” 것은 λ¬Όλ‘  기쑴에 μž‘μ„±λœ μ½”λ“œμ— 영ν–₯을 주지 μ•Šκ³  μƒˆλ‘œμš΄ ν”„λ‘œνΌν‹° ν‚€λ₯Ό μΆ”κ°€ν•˜κΈ° μœ„ν•΄, 즉 ν•˜μœ„ ν˜Έκ΄€μ„±μ„ 보μž₯ν•˜κΈ° μœ„ν•΄ λ„μž…λ˜μ—ˆμŠ΅λ‹ˆλ‹€.


[좜처] λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive

https://wikibook.co.kr/mjs/

 

λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive: μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ κΈ°λ³Έ κ°œλ…κ³Ό λ™μž‘ 원리

269개의 κ·Έλ¦Όκ³Ό 원리λ₯Ό νŒŒν—€μΉ˜λŠ” μ„€λͺ…μœΌλ‘œ ‘μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ κΈ°λ³Έ κ°œλ…κ³Ό λ™μž‘ 원리’λ₯Ό μ΄ν•΄ν•˜μž! μ›ΉνŽ˜μ΄μ§€μ˜ λ‹¨μˆœν•œ 보쑰 κΈ°λŠ₯을 μ²˜λ¦¬ν•˜κΈ° μœ„ν•œ μ œν•œμ μΈ μš©λ„λ‘œ νƒœμ–΄λ‚œ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” 과도

wikibook.co.kr

 

'JavaScript > λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ Deep Dive' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[JavaScript] μŠ€ν”„λ ˆλ“œ 문법  (0) 2022.08.05
[JavaScript] μ΄ν„°λŸ¬λΈ”  (0) 2022.08.05
[JavaScript] String  (0) 2022.08.03
[JavaScript] RegExp  (0) 2022.08.03
[JavaScript] Date  (0) 2022.08.02