๋ชฉ์ฐจ
- Restructing(๊ตฌ์กฐ ๋ถํด ํ ๋น)
- Spread Operator(์ ๊ฐ ๊ตฌ๋ฌธ)
- Default Parameters(๊ธฐ๋ณธ ๊ฐ ๋งค๊ฐ๋ณ์)
- Template Literal(ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด)
- Arrow Function(ํ์ดํ ํจ์)
- for of ... loop
1. Restructuring(๊ตฌ์กฐ ๋ถํด ํ ๋น)
๋ฐฐ์ด์ด๋ ๊ฐ์ฒด์ ์์ฑ์ ํด์ฒดํ์ฌ ๊ทธ ๊ฐ์ ๊ฐ๋ณ ๋ณ์์ ๋ด์ ์ ์๊ฒ ํ๋ ํํ์
1-1. ๊ฐ์ฒด
โ ๊ตฌ๋ฌธ
ES5 ์์๋ ๊ฐ ๋ณ์์ ๊ฐ์ ํ ๋นํด์ผ ํ๋ค.
var info = {
myName: 'Anna',
myAge: 10
};
var myName = info.myName;
var myAge = info.myAge;
console.log(myName, myAge); // Anna 10
ES6 ์์๋ ์ค๊ดํธ ์์ ๋ฃ์ด ํ๋๋ก ๋ฌถ์ด์ ๊ฐ์ฒด์ ์์ฑ์ ๊ฐ์ ธ์ฌ ์ ์๋ค.
const info = {
myName: 'Anna',
myAge: 10
};
let {myName, myAge} = info;
console.log(myName, myAge); // Anna 10
โ ์์ฑ๋ช ๊ณผ ๋ณ์๋ช
์์ฑ ์ด๋ฆ๊ณผ ๋ณ์ ์ด๋ฆ์ ๋์ผํ๊ฒ ์ง์ ํด์ผ ํ๋ฉฐ ๋ณ์ ์ด๋ฆ์ ๋ฐ๊พธ๋ ค๋ฉด ์ฝ๋ก (:)์ ์ฌ์ฉํ๋ค.
์์ฑ ์ด๋ฆ๊ณผ ๋ค๋ฅธ ๋ณ์ ์ด๋ฆ์ ์ฌ์ฉํ๋ฉด undefined ๊ฐ ํ ๋น๋๋ค.
const info = {
myName: 'Anna',
myAge: 10
};
let {myName: otherName, myAge, myHobby} = info;
console.log(myHobby); // undefined
console.log(otherName, myAge); // Anna 10
console.log(myName); // Uncaught ReferenceError: myName is not defined
โ ๊ฐ์ฒด ๊ตฌ์กฐ ๋ถํด ํ์ฉ
- ๊ฐ์ฒด ํค, ๊ฐ ์ ์ฒด ์ถ๋ ฅํ๊ธฐ
Object.entries() ๋ฉ์๋๋ ์์๋ก ์ด๋ฃจ์ด์ง ๊ฐ์ฒด์ ์์ฑ [key, value] ์ ๋ฐฐ์ด์ ๋ฐํํ๋ค.
const user = {
userName: 'jane',
userAge: 20
}
for (let [key, val] of Object.entries(user)) {
console.log(key, val);
// userName jane
// userAge 20
}
- ๊ฐ์ฒด ๋ฐฐ์ด ์ ์ฒด ์ถ๋ ฅํ๊ธฐ
const userList = [{
userName: 'jane',
userAge: 20
},{
userName: 'anna',
userAge: 19
}];
const printUser = arr => {
for (let {userName: n, userAge: a} of arr) {
console.log(n, a)
}
};
printUser(userList);
// jane 20
// anna 19
1-2. ๋ฐฐ์ด
โ ๊ตฌ๋ฌธ
ES5 ์์๋ ์ธ๋ฑ์ค๋ก ๋ฐฐ์ด์ ์ ๊ทผํ์ฌ ์์๋ฅผ ๊ฐ ๋ณ์์ ํ ๋นํ๋ค.
const numbers = [1, 2, 3];
let one = numbers[0];
let tow = numbers[1];
let three = numbers[2];
console.log(one, two, three); // 1 2 3
ES6 ๋ ๊ฐ์ฒด์ ๋์ผํ ๊ตฌ๋ฌธ์ ์ฌ์ฉํ์ง๋ง ์ค๊ดํธ({}) ๋์ ๋๊ดํธ([])๋ฅผ ์ฌ์ฉํ์ฌ ํ๋๋ก ๋ฌถ์ด์ ์ฌ์ฉํ ์ ์๋ค.
const numbers = [1, 2, 3];
let [one, two, three] = numbers;
console.log(one, two, three); // 1 2 3
โ ๊ธฐ๋ณธ ๊ฐ
๋ถํดํ์ฌ ๋ณ์์ ํ ๋น๋ ๊ฐ์ด undefined ์ผ ๋ ๋ณ์์ ์ค์ ๋ ๊ธฐ๋ณธ ๊ฐ์ ์ฌ์ฉ(ํ ๋น)ํ๋ค.
let [x=1, y=2] = [];
console.log(x, y); // 1 2
let [x=1, y=2] = [3];
console.log(x, y); // 3 2
let [x=1, y=2] = [3, 4];
console.log(x, y); // 3 4
โ ๋ถํดํ๊ณ ๋จ์ ๋ถ๋ถ ํ๋์ ๋ณ์์ ํ ๋นํ๊ธฐ(rest ๊ตฌ๋ฌธ)
const numbers = [0, 1, 2, 3];
let [zero, ...rest] = numbers;
console.log(zero); // 0
console.log(rest); // [1, 2, 3]
2. Spread Operator(์ ๊ฐ ๊ตฌ๋ฌธ)
Spread Operator ๋ ... ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ์ฌ ํน์ ๊ฐ์ฒด ๋๋ ๋ฐฐ์ด์ ๊ฐ์ ๋ณํฉํ๊ฑฐ๋ ๋ค๋ฅธ ๊ฐ์ฒด, ๋ฐฐ์ด๋ก ๋ณต์ฌํ ์ ์๋ค.
- ๋ฐฐ์ด์์์ Spread Operator
- ๊ฐ์ฒด์์์ Spread Operator
- ํจ์์์์ Spread Operator
โ ๊ตฌ๋ฌธ
๋ฐฐ์ด์ ์๋ฆฌ๋จผํธ๋ฅผ ํจ์์ ์ธ์๋ก ์ฌ์ฉํ๊ณ ์ ํ ๋ apply()๋ฅผ ์ฌ์ฉํ๋๋ฐ, ์ด๋ฅผ ํผ์นจ ์ฐ์ฐ์(...)๋ก ๋์ฒดํ ์ ์๋ค.
์๋ฅผ ๋ค์ด, Math.max() ์ argument ์๋ ์ซ์๋ง ๋ค์ด๊ฐ ์ ์๊ธฐ ๋๋ฌธ์ ๋ฐฐ์ด์ ๋ฃ๊ณ ์ถ์ ๋๋ apply() ๋ฅผ ์ฌ์ฉํ๋ค.
Math.max(1, 3, 4, 2, 9); // 9
let arr = [1, 3, 4, 2, 9];
Math.max(arr) ; // NaN
Math.max.apply(null, arr); // 9
ํผ์นจ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ๋ฉด ์ฌ๋ฌ ๊ฐ์ ์ธ์๋ฅผ ๋ฐ๋ ํจ์์ ํธ์ถ ์ธ์๋ก ๋ฐฐ์ด ์์๋ฅผ ์ ๋ฌํ ์ ์๋ค.
function add(x, y) {
return x + y;
}
const numbers = [3, 5];
console.log(add.apply(null, numbers)); // 6
console.log(add(...numbers)); // 6
โ ๋ฐฐ์ด
์ด๋ฏธ ์กด์ฌํ๋ ๋ฐฐ์ด์ ์ผ๋ถ๋ฅผ ์ถ๊ฐํ์ฌ ์๋ก์ด ๋ฐฐ์ด์ ์์ฑํ๊ฑฐ๋ push(), splice(), concat() ๋ฑ์ ์กฐํฉ์ ๋์ ํ ์ ์๋ค.
- ๋ฐฐ์ด ๋ณํฉ
concat() ์ผ๋ก ๋ฐฐ์ด ๋ ๊ฐ๋ฅผ ์ฐ๊ฒฐํ์ฌ ์๋ก์ด ๋ฐฐ์ด์ ๋ด๋ ๊ธฐ์กด ๋ฐฉ์์ด๋ค.
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
let arr = arr1.concat(arr2);
console.log(arr); // [1, 2, 3, 4, 5, 6]
์ด๋ฅผ Spread Operator๋ก ๋ฐ๊พธ๋ฉด ์๋์ ๊ฐ์ด ... ์ฐ์ฐ์๋ก ๋ ๋ฐฐ์ด์ ์ฝ๊ฒ ๋ณํฉํ ์ ์๋ค.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
let arr = [...arr1, ...arr2];
console.log(arr); // [1, 2, 3, 4, 5, 6]
- ๋ฐฐ์ด ๋ณต์ฌ
์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ฐฐ์ด์ ์๋ก์ด ๋ณ์์ ๋จ์ ํ ๋นํ๋ฉด ์๋ก์ด ๋ฐฐ์ด์ ๊ธฐ์กด ๋ฐฐ์ด์ ์ฐธ์กฐํ๊ธฐ ๋๋ฌธ์ ์๋ก์ด ๋ฐฐ์ด์ ๋ณ๊ฒฝํ๋๋ผ๋ ์๋ณธ ๋ฐฐ์ด๊น์ง ๋ณ๊ฒฝ๋๋ค.
var arr1 = [1, 2, 3];
var arr2 = arr1;
arr2.push(4);
console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3, 4]
// ๋๋ ๊ฐ ์์์ ์ ๊ทผํ์ฌ ๋ณต์ฌ
var arr1 = [1, 2, 3];
var arr2 = [arr1[0], arr1[1], arr1[2]];
ES6์์๋ ์๋์ ๊ฐ์ด ๋ณต์ฌ๋ ๋ฐฐ์ด์ ๋ง๋ค ์ ์๋ค. (๋ฐฐ์ด ์์ ๊ฐ์ฒด๊ฐ ์๋ ๊ฒฝ์ฐ ๋ณต์ฌ๋ ๋ฐฐ์ด์ ๊ฐ์ฒด๋ ์๋ณธ ๊ฐ์ ์ฐธ์กฐํ๋ค. = ์์ ๋ณต์ )
let arr1 = [1, 2, 3];
let arr2 = [...arr1];
arr2.push(4);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4]
๊ทธ๋ฆฌ๊ณ ๋ฐฐ์ด์ ์์๋ฅผ ๋ง๋ถ์ฌ ๋ณต์ฌํ ์๋ ์๋ค.
let arr1 = [1, 2, 3];
let arr2 = [0, ...arr1, 4, 5];
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [0, 1, 2, 3, 4, 5]
โ ๊ฐ์ฒด
- ๊ฐ์ฒด ๋ณํฉ
let obj1 = {id: 'tom', name: '์๋'};
let obj2 = {id: 'angela', age: 17};
let mergedObj = {...obj1, ...obj2};
console.log(mergedObj); // {id: 'angela', name: '์๋', age: 17}
- ๊ฐ์ฒด ๋ณต์ฌ
let obj1 = {x: 1, y: 3};
let obj2 = {...obj1};
let obj3 = {...obj1, z: 7};
console.log(obj2); // {x: 1, y: 3}
console.log(obj3); // {x: 1, y: 3, z: 7}
โ ํจ์
- ๋งค๊ฐ๋ณ์๋ฅผ Spread Operator๋ก ์์ฑํ๋ ๊ฒฝ์ฐ (Rest Parameter)
ํ๋ผ๋ฏธํฐ๋ก ์ค๋ ๊ฐ๋ค์ ๋ฐฐ์ด์ ๋ฃ์ด์ ํ ๋ฒ์ ๋ฐ๋๋ค.
function sum(...rest) {
let sum = 0;
for (let item of rest) {
sum += item;
}
return sum;
}
console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6
- ํจ์ ํธ์ถ ์ธ์๋ก ์ฌ์ฉํ๋ ๊ฒฝ์ฐ
function sum(x, y, z) {
return x + y + z;
}
var args = [0, 1, 2];
console.log(sum(...args)); // 3
3. Default Parameters(๊ธฐ๋ณธ ๊ฐ ๋งค๊ฐ๋ณ์)
๋งค๊ฐ๋ณ์๊ฐ ๋๋ฝ๋ ๊ฒฝ์ฐ์ ์ฌ์ฉํ ๊ธฐ๋ณธ ๊ฐ์ ์ง์ ํ๋ค. ํจ์์ ์ ๋ฌ๋ ๊ฐ์ด undefined ๊ฑฐ๋ ์์ ๋ ์ด๊ธฐํ๋ ์ค์ ๊ฐ์ด๋ค.
function add(a, b = 1) {
return a + b;
}
console.log(add(3, 4)); // 7
console.log(add(3)); // 4, b์๋ 1์ด ๋ค์ด๊ฐ
4. Template Literal(ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด)
์ด์ค ๋ฐ์ดํ๋ ๋ฐ์ดํ ๋์ ๋ฐฑํฑ(` `)๊ณผ ํ๋ ์ด์ค ํ๋(${expression})๋ฅผ ์ด์ฉํ์ฌ ๋จ์ผ ๋ฌธ์์ด๋ก ์ฐ๊ฒฐํ๋ ๋ฐฉ๋ฒ์ด๋ค.
const func1 = (name, age) => {
return `์๋
๋๋ ${name}, ${age}์ด ์ด์ผ.`;
};
console.log(func1('๊ฐ์', 10)); // ์๋
๋๋ ๊ฐ์, 10์ด ์ด์ผ.
5. Arrow Function(ํ์ดํ ํจ์)
์ผ๋ฐ ํจ์์์ ๊ฐํธํ๊ณ ์งง๊ฒ ํํํ๋ ๋ฐฉ๋ฒ์ด๋ค. this ๊ฐ์ ๋ฐ์ธ๋ฉํ์ง ์์ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋๋ค.
๊ธฐ์กด์๋ ์๋์ ๊ฐ์ด ํจ์๋ฅผ ์ ์ํ๋ค.
var add = function (x) { return x + x; };
console.log(add(10)); // 20
ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ๋ ๊ฐ๋จํ๊ฒ ํํํ ์ ์๋ค.
const add = x => x + x;
console.log(add(10)); // 20
ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํ ๋์ ๊ท์น์ ์๋์ ๊ฐ๋ค.
// ๋งค๊ฐ๋ณ์ ์ง์ ๋ฐฉ๋ฒ
// 1. ๋งค๊ฐ๋ณ์๊ฐ ์์ ๋
() => { ... }
// 2. ๋งค๊ฐ๋ณ์๊ฐ ํ ๊ฐ์ผ ๋ ์๊ดํธ ์๋ต ๊ฐ๋ฅ
x => { ... }
// ๋งค๊ฐ๋ณ์๊ฐ ๋ ๊ฐ ์ด์์ผ ๋ ์๊ดํธ ์๋ต ๋ถ๊ฐ๋ฅ
(x, y) => { ... }
// ํจ์ ๋ธ๋ก ์ง์ ๋ฐฉ๋ฒ
// 1. ํ๋์ ๋ผ์ธ๋ง ์์ ๋ ์ค๊ดํธ ์๋ต ๊ฐ๋ฅ, ์๋ตํ ๊ฒฝ์ฐ ์๋์ผ๋ก return
x => { return x * x }
x => x * x
// 2. ์ฌ๋ฌ ๋ผ์ธ์ด ์์ ๋๋ ์ค๊ดํธ ์๋ต ๋ถ๊ฐ๋ฅ
x => {
let add = x + x;
return add;
}
6. for of ... loop
์์๋ฅผ ์ํํ๊ธฐ ์ํด ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ง์ํ๋ ๋ฐ๋ณต๋ฌธ์ ์๋์ ๊ฐ๋ค.
- for ๋ฌธ
- do...while ๋ฌธ
- while ๋ฌธ
- for...in ๋ฌธ
- for...of ๋ฌธ
์ผ๋ฐ์ ์ผ๋ก๋ Array ์์๋ฅผ ๋ฐ๋ณตํ๊ธฐ ์ํด ์ฌ์ฉํ์ง๋ง Array ๋ฟ๋ง ์๋๋ผ String, Sets, Maps, arguments, NodeList ๋ฑ์ ๊ฐ์ฒด๋ค๋ Iteration์ด๊ธฐ ๋๋ฌธ์ ๋ฐ๋ณต์ ๋์์ด ๋ ์ ์๋ค.
for in ๊ณผ for of ๋ ๋ฐ๋ณต ๊ฐ๋ฅํ ๊ฐ์ฒด์ ๋ชจ๋ ์์๋ฅผ ๋ฐ๋ณตํ๋๋ฐ ์ด ๋์ ๋ฐ๋ณตํ๋ ๋์์ด ๋ค๋ฅด๋ค.
โ for...in
iterable object ๋ผ๋ฉด ๋ชจ๋ ๋ฐ๋ณต์ ๋์์ด ๋๋ค. ์ด๊ฑฐ ๊ฐ๋ฅํ ๋ชจ๋ ์์ฑ์ด ๋์์ด๋ค.
๊ฐ์ฒด์ key ๊ฐ์ ์ ๊ทผํ ์ ์๋ค.
โ for...of
Symbol.iterator ์์ฑ์ ๊ฐ์ง๊ณ ์๋ ์ปฌ๋ ์ ๊ฐ์ฒด๋ฅผ ๋ฐ๋ณตํ๋ค. iterable object ์ฌ๋ prototype chain์ ์ํ iterable์ ๋์์์ ์ ์ธํ๋ค. ๊ฐ์ฒด์ value๋ฅผ ๋ฐํํ๋ค.
let arr = [1, 2, 3];
arr.foo = "hello";
for (let i in arr) {
console.log(i); // 0 1 2 foo
}
for (let i of arr) {
console.log(i); // 1 2 3
}
์ฐธ๊ณ ์๋ฃ ๋ฐ ์ถ์ฒ ๐โ๏ธ
https://velog.io/@shaqok/ES6-ES6-Syntax-%EC%A0%95%EB%A6%AC
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference
'๊ฐ๋ฐ > Javascript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
javascript byte ์ ๊ณ์ฐ (0) | 2022.06.21 |
---|---|
Object.freeze ๊ฐ์ฒด ๋๊ฒฐ / ๊ฐ์ฒด ์ฝ๊ธฐ ์๋ (0) | 2022.05.12 |
TypeScript (0) | 2022.04.28 |
์๋ฐ์คํฌ๋ฆฝํธ ๋น๋๊ธฐ ์ฒ๋ฆฌ / Promise / async / await / fetch (0) | 2022.04.20 |
Promise ํจํด (0) | 2022.04.14 |
๋๊ธ