ES6 ์ด์ ์ ํจ์๋ ์ฌ์ฉ ๋ชฉ์ ์ ๋ฐ๋ผ ๋ช ํํ ๊ตฌ๋ถ๋์ง ์๋๋ค. ์ฆ ES6 ์ด์ ์ ๋ชจ๋ ํจ์๋ ์ผ๋ฐ ํจ์๋ก์ ํธ์ถํ ์ ์๋ ๊ฒ์ ๋ฌผ๋ก ์์ฑ์ ํจ์๋ก์ ํธ์ถํ ์ ์๋ค.
ES6 ํจ์์ ๊ตฌ๋ถ | constructor | prototype | super | arguments |
---|---|---|---|---|
์ผ๋ฐ ํจ์(Normal) | O | O | X | O |
๋ฉ์๋(Method) | X | X | O | O |
ํ์ดํ ํจ์(Normal) | X | X | X | X |
์ผ๋ฐ ํจ์๋ constructor์ด์ง๋ง ES6์ ๋ฉ์๋์ ํ์ดํ ํจ์๋ non-constructor๋ค
ES6 ์ด์ ์ฌ์์์ ๋ฉ์๋๋ ๊ฐ์ฒด์ ๋ฐ์ธ๋ฉ๋ ํจ์๋ฅผ ์ผ์ปซ๋ ์๋ฏธ๋ก ์ฌ์ฉ๋์๋ค. ES6 ์ฌ์์์ ๋ฉ์๋๋ ๋ฉ์๋ ์ถ์ฝ ํํ์ผ๋ก ์ ์๋ ํจ์๋ง์ ์๋ฏธํ๋ค.
ES6 ์ฌ์์์ ์ ์ํ ๋ฉ์๋๋ ์ธ์คํด์ค๋ฅผ ์์ฑํ ์ ์๋ non-constructor๋ค. ๋ฐ๋ผ์ ES6 ๋ฉ์๋๋ ์์ฑ์ ํจ์๋ก์ ํธ์ถํ ์ ์๋ค.
ES6 ๋ฉ์๋๋ ์ธ์คํด์ค๋ฅผ ์์ฑํ ์ ์์ผ๋ฏ๋ก prototype ํ๋กํผํฐ๊ฐ ์๊ณ ํ๋กํ ํ์ ๋ ์์ฑํ์ง ์๋๋ค.
ํ์ค ๋น๋์ธ ๊ฐ์ฒด๊ฐ ์ ๊ณตํ๋ ํ๋กํ ํ์ ๋ฉ์๋์ ์ ์ ๋ฉ์๋๋ ๋ชจ๋ non-constructor๋ค.
ES6 ๋ฉ์๋๋ ์์ ์ ๋ฐ์ธ๋ฉํ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํค๋ ๋ด๋ถ ์ฌ๋กฏ [[HomeObject]]์ ๊ฐ๋๋ค. supr ์ฐธ์กฐ๋ ๋ด๋ธ ์ฌ๋กฏ [[HomeObject]]์ ์ฌ์ฉํ์ฌ ์ํผํด๋์ค์ ๋ฉ์๋๋ฅผ ์ฐธ์กฐํ๋ฏ๋ก ๋ด๋ถ ์ฌ๋กฏ [[HomeObject]]๋ฅผ ๊ฐ๋ ES6 ๋ฉ์๋๋ super ํค์๋๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
ES6 ๋ฉ์๋๊ฐ ์๋ ํจ์๋ super ํค์๋๋ฅผ ์ฌ์ฉํ ์ ์๋ค. ๋ด๋ถ ์ฌ๋กฏ [[HomeObject]]๋ฅผ ๊ฐ์ง ์๊ธฐ ๋๋ฌธ์ด๋ค.
ํ์ดํ ํจ์๋ ๊ธฐ์กด์ ํจ์ ์ ์ ๋ฐฉ์๋ณด๋ค ๊ฐ๋ตํ๊ฒ ํจ์๋ฅผ ์ ์ํ ์ ์๋ค. ํํ๋ง ๊ฐ๋ตํ ๊ฒ์ด ์๋๋ผ ๋ด๋ถ ๋์๋ ๊ธฐ์กด์ ํจ์๋ณด๋ค ๊ฐ๋ตํ๋ค.
ํนํ ํ์ดํ ํจ์๋ ์ฝ๋ฐฑ ๋ด๋ถ์์ this๊ฐ ์ ์ญ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํค๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ๋์์ผ๋ก ์ ์ฉ
ํ์ดํ ํจ์๋ ํจ์ ์ ์ธ๋ฌธ์ผ๋ก ์ ์ํ ์ ์๊ณ ํจ์ ํํ์์ผ๋ก ์ ์ํด์ผ ํ๋ค
const multiply = (x,y) => x+y;
multiply(2,3) // 6
๋งค๊ฐ๋ณ์๊ฐ ์ฌ๋ฌ ๊ฐ์ธ ๊ฒฝ์ฐ ์๊ดํธ () ์์ ๋งค๊ฐ๋ณ์๋ฅผ ์ ์ธํ๋ค.
const multiply = (x,y) => {...};
ํจ์ ๋ชธ์ฒด๊ฐ ํ๋์ ๋ฌธ์ผ๋ก ๊ตฌ์ฑ๋๋ค๋ฉด ํจ์ ๋ชธ์ฒด๋ฅผ ๊ฐ์ธ๋ ์ค๊ดํธ {}๋ฅผ ์๋ตํ ์ ์๋ค.
const power = X => x ** 2;
power(2); // 4
1. ํ์ดํ ํจ์๋ ์ธ์คํด์ค๋ฅผ ์์ฑํ ์ ์๋ non-constructor๋ค.
2. ์ค๋ณต๋ ๋งค๊ฐ๋ณ์ ์ด๋ฆ์ ์ ์ธํ ์ ์๋ค.
3. ํ์ดํ ํจ์๋ ํจ์ ์์ฒด์ this, arguments, super, new.target ๋ฐ์ธ๋ฉ์ ๊ฐ์ง ์๋๋ค.
ํ์ดํ ํจ์๊ฐ ์ผ๋ฐ ํจ์์ ๊ตฌ๋ณ๋๋ ๊ฐ์ฅ ํฐ ํน์ง์ ๋ฐ๋ก this๋ค.
๊ทธ๋ฆฌ๊ณ ํ์ดํ ํจ์๋ ๋ค๋ฅธ ํจ์์ ์์๋ก ์ ๋ฌ๋์ด ์ฝ๋ฐฑ ํจ์๋ก ์ฌ์ฉ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค.
ES6์์๋ ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํ์ฌ "์ฝ๋ฐฑ ํจ์ ๋ด๋ถ์ this ๋ฌธ์ "๋ฅผ ํด๊ฒฐํ ์ ์๋ค.
class Prefixer {
constructor(prefix) {
this.prefix = prefix;
}
add(arr) {
return arr.map(item => this.prefix + item);
}
}
const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select'])));
ํ์ดํ ํจ์๋ ํจ์ ์์ฒด์ this ๋ฐ์ธ๋ฉ์ ๊ฐ์ง ์๋๋ค. ๋ฐ๋ผ์ ํ์ดํ ํจ์ ๋ด๋ถ์์ this๋ฅผ ์ฐธ์กฐํ๋ฉด ์์์ค์ฝํ์ this๋ฅผ ๊ทธ๋๋ก ์ฐธ์กฐํ๋ค. ์ด๋ฅผ lexical this๋ผ ํ๋ค.
ํ์ดํ ํจ์๋ ํจ์ ์์ฒด์ super ๋ฐ์ธ๋ฉ์ ๊ฐ์ง ์๋๋ค. ๋ฐ๋ผ์ ํ์ดํ ํจ์ ๋ด๋ถ์์ super๋ฅผ ์ฐธ์กฐํ๋ฉด this์ ๋ง์ฐฌ๊ฐ์ง๋ก ์์ ์ค์ฝํ์ super๋ฅผ ์ฐธ์กฐํจ.
class Base{
constructor(name) {
this.name = name;
}
sayHi() {
return `Hi! ${this.name}`;
}
}
class Derived extends Base {
// ํ์ดํ ํจ์์ super๋ ์์ ์ค์ฝํ์ธ constructor์ super๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
sayHi = () => `${super.sayHi()} how are you doing?`;
}
const derived = new Derived('Lee');
console.log(derived.sayHi()); // Hi! Lee how are you doing?
ํ์ดํ ํจ์๋ ํจ์ ์์ฒด์ super ๋ฐ์ธ๋ฉ์ ๊ฐ์ง ์๋๋ค.
this์ ๋ง์ฐฌ๊ฐ์ง๋ก ์์ ์ค์ฝํ์ super๋ฅผ ์ฐธ์กฐํ๋ค.
ํ์ดํ ํจ์๋ ํจ์ ์์ฒด์ arguments ๋ฐ์ธ๋ฉ์ ๊ฐ์ง ์๋๋ค. ๋ฐ๋ผ์ ํ์ดํ ํจ์ ๋ด๋ถ์์ arguments๋ฅผ ์ฐธ์กฐํ๋ฉด this์ ๋ง์ฐฌ๊ฐ์ง๋ก ์ฌ์ฐ์ด ์ค์ฝํ์ arguments๋ฅผ ์ฐธ์กฐํ๋ค.
ํ์ดํ ํจ์๋ก ๊ฐ๋ณ ์ธ์ ํจ์๋ฅผ ๊ตฌํํด์ผ ํ ๋๋ ๋ฐ๋์ Rest ํ๋ผ๋ฏธํฐ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.
Rest ํ๋ผ๋ฏธํฐ๋ ๋งค๊ฐ๋ณ์ ์ด๋ฆ ์์ ์ธ๊ฐ์ ์ ...์ ๋ถ์ฌ์ ์ ์ํ ๋งค๊ฐ๋ณ์๋ฅผ ์๋ฏธํ๋ค. Rest ํ๋ผ๋ฏธํฐ๋ ํจ์์ ์ ๋ฌ๋ ์ธ์๋ค์ ๋ชฉ๋ก์ ๋ฐฐ์ด๋ก ์ ๋ฌ๋ฐ๋๋ค.
function foo(...rest) {
// ๋งค๊ฐ๋ณ์ rest๋ ์ธ์๋ค์ ๋ชฉ๋ก์ ๋ฐฐ์ด๋ก ์ ๋ฌ๋ฐ๋ Rest ํ๋ผ๋ฏธํฐ๋ค.
console.log(rest); // [1,2,3,4,5]
}
foo(1,2,3,4,5)
Rest ํ๋ผ๋ฏธํฐ๋ ์ด๋ฆ ๊ทธ๋๋ก ๋จผ์ ์ ์ธ๋ ๋งค๊ฐ๋ณ์์ ํ ๋น๋ ์ธ์๋ฅผ ์ ์ธํ ๋๋จธ์ง ์ธ์๋ค๋ก ๊ตฌ์ฑ๋ ๋ฐฐ์ด์ด ํ ๋น๋๋ค. ๋ฐ๋ผ์ Rest ํ๋ผ๋ฏธํฐ๋ ๋ฐ๋์ ๋ง์ง๋ง ํ๋ผ๋ฏธํฐ์ด์ด์ผ ํ๋ค.
ES6์์๋ rest ํ๋ผ๋ฏธํฐ๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋ณ ์ธ์ ํจ์์ ์ธ์ ๋ชฉ๋ก์ ๋ฐฐ์ด๋ก ์ง์ ์ ๋ฌ๋ฐ์ ์ ์๋ค. ์ด๋ฅผ ํตํด ์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด์ธ arguments ๊ฐ์ฒด๋ฅผ ๋ฐฐ์ด๋ก ๋ณํํ๋ ๋ฒ๊ฑฐ๋ก์์ ํผํ ์ ์๋ค.
ํ์ดํ ํจ์๋ก ๊ฐ๋ณ ์ธ์ ํจ์๋ฅผ ๊ตฌํํด์ผ ํ ๋๋ ๋ฐ๋์ Rest ํ๋ผ๋ฏธํฐ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ค.
ํจ์๋ฅผ ํธ์ถํ ๋ ๋งค๊ฐ๋ณ์์ ๊ฐ์๋งํผ ์์๋ฅผ ์ ๋ฌํ๋ ๊ฒ์ด ๋ฐ๋์งํ์ง๋ง ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ์๋ ์๋ฌ๊ฐ ๋ฐ์ํ์ง ์๋๋ค. ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ์์ง์ด ๋งค๊ฐ๋ณ์์ ๊ฐ์์ ์ธ์์ ๊ฐ์๋ฅผ ์ฒดํฌํ์ง ์๊ธฐ ๋๋ฌธ์ด๋ค.
ES6์์ ๋์ ๋ ๋งค๊ฐ๋ณ์ ๊ธฐ๋ณธ๊ฐ์ ์ฌ์ฉํ๋ฉด ํจ์ ๋ด์์ ์ํํ๋ ์ธ์ ์ฒดํฌ ๋ฐ ์ด๊ธฐํ๋ฅผ ๊ฐ์ํํ ์ ์๋ค.
function sum(x = 0, y = 0) {
return x + y;
}
console.log(sum(1,2)); // 3
console.log(sum(1)); // 1
์ด๋ ๋งค๊ฐ๋ณ์์ ์ธ์๋ฅผ ์ ๋ฌํ์ง ์๋ ๊ฒฝ์ฐ์ undefined์ ์ ๋ฌํ ๊ฒฝ์ฐ๋ง ๊ฐ๋ฅํ๋ค.
๋งค๊ฐ๋ณ์ ๊ธฐ๋ณธ๊ฐ์ ํจ์ ์ ์ ์ ์ ์ธํ ๋งค๊ฐ๋ณ์ ๊ฐ์๋ฅผ ๋ํ๋ด๋ ํจ์ ๊ฐ์ฒด์ length ํ๋กํผํฐ์ arguments ๊ฐ์ฒด์ ์๋ฌด๋ฐ ์ํฅ์ ์ฃผ์ง ์๋๋ค.