ES6์์ ๋์
๋ ์คํ๋ ๋ ๋ฌธ๋ฒ
...์ ํ๋๋ก ๋ญ์ณ ์๋ ์ฌ๋ฌ ๊ฐ๋ค์ ์งํฉ์ ํผ์ฒ์ ๊ฐ๋ณ์ ์ธ ๊ฐ๋ค์ ๋ชฉ๋ก
์ผ๋ก ๋ง๋ ๋ค.
์คํ๋ ๋ ๋ฌธ๋ฒ์ ์ฌ์ฉํ ์ ์๋ ๋์์ Array, String, Map, Set, DOM ์ปฌ๋ ์
, arguments์ ๊ฐ์ด for...of ๋ฌธ์ผ๋ก ์ํํ ์ ์๋ ์ดํฐ๋ฌ๋ธ์ ํ์
// ...[1,2,3]์ [1,2,3]์ ๊ฐ๋ณ ์์๋ก ๋ถ๋ฆฌํ๋ค(1,2,3)
console.log(...[1,2,3]); // 1 2 3
// ๋ฌธ์์ด์ ์ดํฐ๋ฌ๋ธ์ด๋ค.
console.log(...'Hello'); // H e l l o
// Map๊ณผ Set์ ์ดํฐ๋ฌ๋ธ์ด๋ค.
console.log(...new Map([['a', '1'], ['b', '2']])); // [ 'a', '1' ] [ 'b', '2' ]
//์ดํฐ๋ฌ๋ธ์ด ์๋ ์ผ๋ฐ ๊ฐ์ฒด๋ ์คํ๋ ๋ ๋ฌธ๋ฒ์ ๋์์ด ๋ ์ ์๋ค.
console.log(...[a:1, b:2]);
// TypeError
์คํ๋ ๋ ๋ฌธ๋ฒ์ ๊ฒฐ๊ณผ๋ ๊ฐ์ด ์๋๋ค. ์คํ๋ ๋ ๋ฌธ๋ฒ ...์ด ํผ์ฐ์ฐ์๋ฅผ ์ฐ์ฐํ์ฌ ๊ฐ์ ์์ฑํ๋ ์ฐ์ฐ์๊ฐ ์๋์ ์๋ฏธ ์คํ๋ ๋ ๋ฌธ๋ฒ์ ๊ฒฐ๊ณผ๋ ๋ณ์์ ํ ๋นํ ์ ์๋ค.
์คํ๋ ๋์ ๋ฌธ๋ฒ์ ๊ฒฐ๊ณผ๋ฌผ์ ๊ฐ์ผ๋ก ์ฌ์ฉํ ์ ์๊ณ , ๋ค์๊ณผ ๊ฐ์ด ์ผํ๋ก ๊ตฌ๋ถํ ๊ฐ์ ๋ชฉ๋ก์ ์ฌ์ฉํ๋ ๋ฌธ๋งฅ์์๋ง ์ฌ์ฉํ ์ ์๋ค.
const arr = [1,2,3];
// ๋ฐฐ์ด arr์ ์์ ์ค์์ ์ต๋๊ฐ์ ๊ตฌํ๊ธฐ ์ํด Math.max๋ฅผ ์ฌ์ฉํ๋ค.
const max = Math.max(arr); // NaN
Math.max ๋ฉ์๋์ ์ซ์๊ฐ ์๋ ๋ฐฐ์ด์ ์ธ์๋ก ์ ๋ฌํ๋ฉด ์ต๋๊ฐ์ ๊ตฌํ ์ ์์ผ๋ฏ๋ก NaN์ ๋ฐํํ๋ค.
์ด ๊ฐ์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ์ํด ์คํ๋ ๋ ๋ฌธ๋ฒ์ ์ฌ์ฉํด๋ณด์.
๊ฐ๊ฒฐํ๊ณ ๊ฐ๋
์ฑ โ
const arr = [1,2,3];
// ์คํ๋ ๋ ๋ฌธ๋ฒ์ ์ฌ์ฉํ์ฌ ๋ฐฐ์ด arr๋ฅผ 1,2,3์ผ๋ก ํผ์ณ์ Math.max์ ์ ๋ฌํ๋ค.
// Math.max(...[1,2,3])์ Math.max(1,2,3)๊ณผ ๊ฐ๋ค.
const max = Math.max(...arr); // 3
ํจ์์ ์ ๋ฌ๋ ์ธ์๋ค์ ๋ชฉ๋ก์ ๋ฐฐ์ด๋ก ์ ๋ฌ๋ฐ๊ธฐ ์ํด ๋งค๊ฐ๋ณ์ ์ด๋ฆ ์์ ...์ ๋ถ์ด๋ ๊ฒ
์ฌ๋ฌ ๊ฐ์ ๊ฐ์ด ํ๋๋ก ๋ญ์ณ ์๋ ๋ฐฐ์ด๊ณผ ๊ฐ์ ์ดํฐ๋ฌ๋ธ์ ํผ์ณ์ ๊ฐ๋ณ์ ์ธ ๊ฐ๋ค์ ๋ชฉ๋ก์ ๋ง๋๋ ๊ฒ.
// Rest ํ๋ผ๋ฏธํฐ๋ ์ธ์๋ค์ ๋ชฉ๋ก์ ๋ฐฐ์ด๋ก ์ ๋ฌ๋ฐ๋๋ค.
function foo(...rest) {
console.log(rest); // 1,2,3 โ [1,2,3]
}
// ์คํ๋ ๋ ๋ฌธ๋ฒ์ ๋ฐฐ์ด๊ณผ ๊ฐ์ ์ดํฐ๋ฌ๋ธ์ ํผ์ณ์ ๊ฐ๋ณ์ ์ธ ๊ฐ๋ค์ ๋ชฉ๋ก์ ๋ง๋ ๋ค.
// [1,2,3] โ 1,2,3
foo(... [1,2,3]);
์คํ๋ ๋ ๋ฌธ๋ฒ์ ๋ฐฐ์ด ๋ฆฌํฐ๋ด์์ ์ฌ์ฉํ๋ฉด ๊ธฐ์กด์ ๋ฐฉ์๋ณด๋ค ๋์ฑ ๊ฐ๊ฒฐํ๊ณ ๊ฐ๋ ์ฑ ์ข๊ฒ ํํํ ์ ์๋ค!
ES5์์ 2๊ฐ์ ๋ฐฐ์ด์ 1๊ฐ์ ๋ฐฐ์ด๋ก ๊ฒฐํฉํ๊ณ ์ถ์ ๊ฒฝ์ฐ concat ๋ฉ์๋๋ฅผ ์ฌ์ฉ
// ES5
var arr = [1,2].concat([3,4]);
console.log(arr); // [1,2,3,4]
//ES6
const arr = [...[1,2], ...[3,4]];
console.log(arr); // [1,2,3,4]
ES5์์ ์ด๋ค ๋ฐฐ์ด์ ์ค๊ฐ์ ๋ค๋ฅธ ๋ฐฐ์ด์ ์์๋ค์ ์ถ๊ฐํ๊ฑฐ๋ ์ ๊ฑฐํ๋ ค๋ฉด splice ๋ฉ์๋๋ฅผ ์ฌ์ฉ.
์คํ๋ ๋ ๋ฌธ๋ฒ์ ์ฌ์ฉํ์
// ES6
const arr1 = [1,4];
const arr2 = [2,3];
arr1.splice(1,0, ...arr2);
console.log(arr1); / [1,2,3,4]
ES5์์ ๋ฐฐ์ด์ ๋ณต์ฌํ๋ ค๋ฉด slice ๋ฉ์๋๋ฅผ ์ฌ์ฉ
// ES6
const origin = [1,2];
const copy = [...origin];
console.log(copy); // [1,2]
console.log(copy === origin); // false
์๋ณธ ๋ฐฐ์ด์ ๊ฐ ์์๋ฅผ ์์ ๋ณต์ฌํ์ฌ ์๋ก์ด ๋ณต์ฌ๋ณธ์ ์์ฑ.
ES5์์ ์ดํฐ๋ฌ๋ธ์ ๋ฐฐ์ด๋ก ๋ณํํ๋ ค๋ฉด Function.prototype.apply ๋๋ Function.prototype.call ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ slice ๋ฉ์๋๋ฅผ ํธ์ถ
์คํ๋ ๋ ๋ฌธ๋ฒ์ ์ฌ์ฉ
ํ๋ฉด ์ข ๋ ๊ฐํธํ๊ฒ ์ดํฐ๋ฌ๋ธ์ ๋ฐฐ์ด๋ก ๋ณํํ ์ ์๋ค. arguments ๊ฐ์ฒด๋ ์ดํฐ๋ฌ๋ธ์ด๋ฉด์ ์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด๋ค. ๋ฐ๋ผ์ ์คํ๋ ๋ ๋ฌธ๋ฒ์ ๋์์ด ๋ ์ ์๋ค.
function sum() {
// ์ดํฐ๋ฌ๋ธ์ด๋ฉด์ ์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด์ธ arguments๋ฅผ ๋ฐฐ์ด๋ก ๋ฐํ
return [...arguments].reduce((pre,cur) => pre + cur, 0);
}
console.log(sum(1,2,3)); // 6
๋ ๋์ ๋ฐฉ๋ฒ์ Rest ํ๋ผ๋ฏธํฐ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด๋ค
// Rest ํ๋ผ๋ฏธํฐ args๋ ํจ์์ ์ ๋ฌ๋ ์ธ์๋ค์ ๋ชฉ๋ก์ ๋ฐฐ์ด๋ก ์ ๋ฌ๋ฐ๋๋ค.
const sum = (...args) => args.reduce((pre,cur) => pre + cur, 0);
console.log(sum(1,2,3)); // 6
์ดํฐ๋ฌ๋ธ์ด ์๋ ์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด๋ ์คํ๋ ๋ ๋ฌธ๋ฒ์ ๋์์ด ๋ ์ ์๋ค.
Rest ํ๋กํผํฐ
์ ํจ๊ป ์คํ๋ ๋ ํ๋กํผํฐ
๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ์ฒด ๋ฆฌํฐ๋ด์ ํ๋กํผํฐ ๋ชฉ๋ก์์๋ ์คํ๋ ๋ ๋ฌธ๋ฒ์ ์ฌ์ฉํ ์ ์๋ค.
์คํ๋ ๋ ๋ฌธ๋ฒ์ ๋์์ ์ดํฐ๋ฌ๋ธ์ด์ด์ผ ํ์ง๋ง ์คํ๋ ๋ ํ๋กํผํฐ ์ ์์ ์ผ๋ฐ ๊ฐ์ฒด๋ฅผ ๋์์ผ๋ก๋ ์คํ๋ ๋ ๋ฌธ๋ฒ์ ์ฌ์ฉ์ ํ์ฉ
// ์คํ๋ ๋ ํ๋กํผํฐ
// ๊ฐ์ฒด ๋ณต์ฌ(์์ ๋ณต์ฌ)
const obj = { x: 1, y: 2 };
const copy = { ...obj };
console.log(copy); // { x: 1, y: 2}
console.log(obj === copy); // false
// ๊ฐ์ฒด ๋ณํฉ
const merged = { x: 1, y: 2, ...{a: 3, b: 4} };
console.log(merged); // { x: 1, y: 2, a: 3, b: 4}
์คํ๋ ๋ ํ๋กํผํฐ๊ฐ ์ ์๋๊ธฐ ์ด์ ์๋ ES6์์ ๋์
๋ Object.assign ๋ฉ์๋
๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ๋ฌ ๊ฐ์ ๊ฐ์ฒด๋ฅผ ๋ณํฉํ๊ฑฐ๋
ํน์ ํ๋กํผํฐ๋ฅผ ๋ณ๊ฒฝ
๋๋ ์ถ๊ฐ
ํ๋ค.
์คํ๋ ๋ ํ๋กํผํฐ๋ Object.assign ๋ฉ์๋๋ฅผ ๋์ฒดํ ์ ์๋ ๊ฐํธํ ๋ฌธ๋ฒ!