ν°μ€ν 리 λ·°
[JavaScript] 7λ²μ§Έ λ°μ΄ν° νμ Symbol
κ°λ°κ°κ΅΄πΈ 2022. 8. 5. 01:37μ¬λ²μ΄λ?
μ¬λ²μ 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
'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 |
- Total
- Today
- Yesterday
- λ μ컬 νκ²½
- λ°±μ€
- http
- λ°±μ€ javascript
- ν¬ν¬μΈν°
- μΉ΄μΉ΄μ€ μΈν΄
- λ€νΈμν¬
- μκ³ λ¦¬μ¦
- μ΄μ체μ
- λμμΈ ν¨ν΄
- λ€μ΄λλ―Ή νλ‘κ·Έλλ°
- map
- νλ‘νΌν°
- JavaScript
- μλ°μ€ν¬λ¦½νΈ
- μ μ λ³μ
- TDD
- νλ‘κ·Έλλ¨Έμ€
- λͺ¨λ μλ°μ€ν¬λ¦½νΈ deep dive
- fp
- 2019 μΉ΄μΉ΄μ€ κ°λ°μ κ²¨μΈ μΈν΄
- μ½λ©ν μ€νΈ
- κ°μ²΄μ§ν₯ νλ‘κ·Έλλ°
- νλ‘ν μ½
- λ°±μ€ node.js
- Baekjoon
- git
- μλ°
- μ΄λΆνμ
- ν¨μν νλ‘κ·Έλλ°
μΌ | μ | ν | μ | λͺ© | κΈ | ν |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |