์ฌ๋ฒ์ ES6์์ ๋์ ๋ 7๋ฒ์งธ ๋ฐ์ดํฐ ํ์ ์ผ๋ก
๋ณ๊ฒฝ ๋ถ๊ฐ๋ฅํ ์์ ํ์ ์ ๊ฐ
์ด๋ค. ์ฌ๋ฒ ๊ฐ์๋ค๋ฅธ ๊ฐ๊ณผ ์ค๋ณต๋์ง ์๋ ์ ์ผ๋ฌด์ดํ ๊ฐ
์ด๋ค. ๋ฐ๋ผ์ ์ฃผ๋ก ์ด๋ฆ์ ์ถฉ๋ ์ํ์ด ์๋ ์ ์ผํ ํ๋กํผํฐ ํค๋ฅผ ๋ง๋ค๊ธฐ ์ํด ์ฌ์ฉ.
์ฌ๋ฒ๊ฐ์ Symbol ํจ์๋ฅผ ํธ์ถํ์ฌ ์์ฑํด์ผ ํ๋ค. ์ด ๋ ์์ฑ๋ ์ฌ๋ฒ ๊ฐ์ ์ธ๋ถ๋ก ๋ ธ์ถ๋์ง ์์ ํ์ธํ ์ ์์ผ๋ฉฐ, ๋ค๋ฅธ ๊ฐ๊ณผ ์ ๋ ์ค๋ณต๋์ง ์๋ ์ ์ผ๋ฌด์ดํ ๊ฐ์ด๋ค.
// Symbol ํจ์๋ฅผ ํธ์ถํ์ฌ ์ ์ผ๋ฌด์ดํ ์ฌ๋ฒ ๊ฐ์ ์์ฑํ๋ค.
const mySymbol = Symbol();
console.log(typeof mySymbol); // symbol
// ์ฌ๋ฒ ๊ฐ์ ์ธ๋ถ๋ก ๋
ธ์ถ๋์ง ์์ ํ์ธํ ์ ์๋ค.
console.log(mySymbol); // Symbol()
์ฝ๋๋ฅผ ์
๋ ฅํ์ธ์
```javascript
// ์ฌ๋ฒ ๊ฐ์ ๋ํ ์ค๋ช
์ด ๊ฐ๋๋ผ๋ ์ ์ผ๋ฌด์ดํ ์ฌ๋ฒ ๊ฐ์ ์์ฑํ๋ค.
const mySymbol1 = Symbol('mySymbol');
const mySymbol2 = Symbol('mySymbol');
console.log(mySymbol1 === mySymbol2) ; // false
Symbol.for ๋ฉ์๋๋ ์ธ์๋ก ์ ๋ฌ๋ฐ์ ๋ฌธ์์ด์ ํค๋ก ์ฌ์ฉํ์ฌ ํค์ ์ฌ๋ฒ ๊ฐ์ ์๋ค์ด ์ ์ฅ๋์ด ์๋ ์ ์ญ์ฌ๋ฒ๋ ์ฆ์คํธ๋ฆฌ์์ ํด๋น ํค์ ์ผ์นํ๋ ์ฌ๋ฒ ๊ฐ์ ๊ฒ์ํ๋ค.
- ๊ฒ์์ ์ฑ๊ณตํ๋ฉด ์๋ก์ด ์ฌ๋ฒ ๊ฐ์ ์์ฑํ์ง ์๊ณ ๊ฒ์๋ ์ฌ๋ฒ ๊ฐ์ ๋ฐํํ๋ค.
- ๊ฒ์์ ์คํจํ๋ฉด ์๋ก์ด ์ฌ๋ฒ ๊ฐ์ ์์ฑํ์ฌ Symbol.for ๋ฉ์๋์ ์ธ์๋ก ์ ๋ฌ๋ ํค๋ก ์ ์ญ ์ฌ๋ฒ ๋ ์ฆ์คํธ๋ฆฌ์ ์ ์ฅํ ํ, ์์ฑ๋ ์ฌ๋ฒ ๊ฐ์ ๋ฐํํ๋ค.
// ์ ์ญ ์ฌ๋ฒ ๋ ์ง์คํธ๋ฆฌ์ mySymbol์ด๋ผ๋ ํค๋ก ์ ์ฅ๋ ์ฌ๋ฒ๊ฐ์ด ์์ผ๋ฉด ์๋ก์ด ์ฌ๋ฒ ๊ฐ์ ์์ฑ
const s1 = Symbol.for('mySymbol');
// ์ ์ญ ์ฌ๋ฒ ๋ ์ฆ์คํธ๋ฆฌ์ mySymbol์ด๋ผ๋ ํค๋ก ์ ์ฅ๋ ์ฌ๋ฒ๊ฐ์ด ์์ผ๋ฉด ํด๋น ์ฌ๋ฒ๊ฐ์ ๋ฐํ
const s2 = Symbol.for('mySymbol');
console.log(s1 === s2); // true
// ์ ์ญ ์ฌ๋ฒ ๋ ์ง์คํธ๋ฆฌ์ 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
๊ทธ ์ด์
๋ ๊ฐ๋ฐ์๊ฐ ์ง์ ์ถ๊ฐํ ๋ฉ์๋์ ๋ฏธ๋์ ํ์ค ์ฌ์์ผ๋ก ์ถ๊ฐ๋๋ฉ์๋์ ์ด๋ฆ์ด ์ค๋ณต๋ ์ ์๊ธฐ ๋๋ฌธ
์ด๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๊ธฐ๋ณธ ์ ๊ณตํ๋ ๋นํธ์ธ ์ฌ๋ฒ ๊ฐ์ด ์๋ค. ๋นํธ์ธ ์ฌ๋ฒ ๊ฐ์ Symbol ํจ์์ ํ๋กํผํฐ์ ํ ๋น๋์ด ์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๊ธฐ๋ณธ ์ ๊ณตํ๋ ๋นํธ์ธ ์ฌ๋ฒ ๊ฐ์ ECMAScript ์ฌ์์์๋ Well-Known Symbol ์ด๋ผ ๋ถ๋ฅธ๋ค.
Well-Known Symbol์ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ๋ด๋ถ ์๊ณ ๋ฆฌ์ฆ์ ์ฌ์ฉ