Jieunny์ ๋ธ๋ก๊ทธ
Unit 9. [JS]ES6 ์ฃผ์๋ฌธ๋ฒ ๋ณธ๋ฌธ
๐ฃ ES6 (ECMAScript ): JS์ ํ์ค
โ๏ธ 2015๋ ์ ์ถ์๋ฌ์ง๋ง ๊ฐ๋ ์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ด ๋ฐ์ด๋ ๋ฌธ๋ฒ์ด ๋ง์ด ์ถ๊ฐ๋์๋ค.
โ๏ธ let, const, ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด ๋ฑ
๐ฃ spread/rest ๋ฌธ๋ฒ
โ๏ธ spread ๋ฌธ๋ฒ
๋ฐฐ์ด์ ํ์ด์ ์ธ์๋ก ์ ๋ฌํ๊ฑฐ๋, ๊ฐ๊ฐ์ ์์๋ก ๋ฃ์ ๋ ์ฌ์ฉ
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1. 2. 3];
sum(...numbers) // 6์ ๋ฆฌํด
โฐ ๋ฐฐ์ด ์์ ...์ ์ฌ์ฉํด์ x, y, x์ ๊ฐ๊ฐ 1, 2, 3 ์ ์ ๋ฌํ๋ค.
โ๏ธ rest ๋ฌธ๋ฒ
ํ๋ผ๋ฏธํฐ๋ฅผ ๋ฐฐ์ด์ ํํ๋ก ๋ฐ์์ ์ฌ์ฉํ ์ ์๋ค.
ํ๋ผ๋ฏธํฐ ๊ฐ์๊ฐ ๊ฐ๋ณ์ ์ผ ๋ ์ ์ฉ
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
sum(1,2,3) // 6
sum(1,2,3,4) // 10
โฐ ํ๋ผ๋ฏธํฐ ์์ ...์ ๋ถ์ฌ ๋ฐฐ์ด์ ๋ฐ์์ ์ฌ์ฉํ ์ ์๋ค.
โฐ ์ด์ ๊ฐ๊ณผ ํ์ฌ ๊ฐ์ ๋ํด ๋ฆฌํดํ๋ค.
๐ฃ spread/rest ๋ฐฐ์ด์์ ์ฌ์ฉํ๊ธฐ
โ๏ธ ๋ฐฐ์ด ํฉ์น๊ธฐ
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
lyrics // ['head', 'shoulders', 'knees', 'and', 'toes']
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // [0, 1, 2, 3, 4, 5]
โฐ spread ๋ฌธ๋ฒ์ ๊ธฐ์กด ๋ฐฐ์ด์ ๋ณ๊ฒฝํ์ง ์์ผ๋ฏ๋ก ์๋ก arr1=~ ์ฒ๋ผ ํ ๋นํด์ค์ผ ํ๋ค.
โ๏ธ ๋ฐฐ์ด ๋ณต์ฌ
let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() ์ ์ ์ฌ
arr2.push(4);
arr // [1, 2, 3]
arr2 // [1, 2, 3, 4]
๐ฃ spread/rest ๊ฐ์ฒด์์ ์ฌ์ฉํ๊ธฐ
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };
clonedObj // { foo: 'bar', x: 42 }
mergedObj // { foo: 'baz', x: 42, y: 13 }
โฐ spread๋ก ํฉ์น ๋, key๊ฐ์ด ๊ฐ์ผ๋ฉด ๋์ค์ ์ค๋ ๊ฐ์ด ์ ์ฉ๋๋ค.
๐ฃ spread/rest ํจ์์์ ๋๋จธ์ง ํ๋ผ๋ฏธํฐ ๋ฐ์์ค๊ธฐ
function myFun(a, b, ...manyMoreArgs) {
console.log("a", a); // a one
console.log("b", b); // b two
console.log("manyMoreArgs", manyMoreArgs); // manyMoreArgs['three', 'foue', 'five', 'six']
}
myFun("one", "two", "three", "four", "five", "six");
โฐ ํ๋ผ๋ฏธํฐ ์์๋๋ก ๋ฐฐ์ด ์์๊ฐ ํ ๋น๋๋ค.
๐ฃ ์ฐ์ต๋ฌธ์
let arr = ['code', 'states']
let value = [
...arr,
'pre',
...['course', 'student']
]
value // ['code', 'states', 'pre', 'course', 'student']
โฐ spread๋ ๋ฐฐ์ด์ ์์๋ฅผ ํผ์ณ์ ๋ฃ์ด์ฃผ๋ ๊ฒ. []๋ ๋ค์ด๊ฐ์ง ์์!
๐ฃ ๊ตฌ์กฐ๋ถํดํ ๋น
โ๏ธ ๋ถํด ํ ์ ๋ณ์์ ํ ๋น
โ๏ธ ๋ฐฐ์ด
const [a, b, ...rest] = [10, 20, 30, 40, 50];
a // 10
b // 20
rest // [30, 40, 50]
โ๏ธ ๊ฐ์ฒด
2
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a // 10
b // 20
rest // { c: 30, d: 40 }
โฐ ๊ฐ์ฒด์์ ๊ตฌ์กฐ ๋ถํด ํ ๋น์ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ, ์ ์ธ๊ณผ ํจ๊ป ์ฌ์ฉํด๋ผ
โ๏ธ ํจ์
function whois({displayName: displayName, fullName: {firstName: name}}){
console.log(displayName + " is " + name);
}
let user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe"
}
};
whois(user)
๐จ ์ฐธ์กฐ : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
๐ฃ JavaScript Koans
โ๏ธ ๊ฒฐ๋ก ์ ๋ด๋ฆฌ๊ธฐ ์ ์ ์ด๊ฒ ์ ๋ง๋์ง ๊น๊ฒ ๊ณ ๋ฏผํ์.
'CodeStates > learning contents' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Unit 10. [JS/DOM] ์ ํจ์ฑ ๊ฒ์ฌ (0) | 2022.12.27 |
---|---|
Unit 10. [JS/๋ธ๋ผ์ฐ์ ] DOM ๊ธฐ์ด (0) | 2022.12.26 |
Unit 9. [JS]ํด๋ก์ (0) | 2022.12.23 |
Unit 9. [JS]์ค์ฝํ (0) | 2022.12.22 |
Unit 9. [JS]์์ ์๋ฃํ๊ณผ ์ฐธ์กฐ ์๋ฃํ (0) | 2022.12.22 |