๋์คํธ๋ญ์ฒ๋ง ํ ๋น(๊ตฌ์กฐ ๋ถํด ํ ๋น)์
๊ตฌ์กฐํ๋ ๋ฐฐ์ด๊ณผ ๊ฐ์ ์ดํฐ๋ฌ๋ธ ๋๋ ๊ฐ์ฒด๋ฅผ destructuring(๋น๊ตฌ์กฐํ, ๊ตฌ์กฐํ๊ดด)ํ์ฌ 1๊ฐ ์ด์์ ๋ณ์์ ๊ฐ๋ณ์ ์ผ๋ก ํ ๋นํ๋ ๊ฒ์ ๋งํ๋ค.
๋ฐฐ์ด๊ณผ ๊ฐ์ ์ดํฐ๋ฌ๋ธ ๋๋ ๊ฐ์ฒด ๋ฆฌํฐ๋ด์์ ํ์ํ ๊ฐ๋ง ์ถ์ถํ์ฌ ๋ณ์์ ํ ๋นํ ๋ ์ ์ฉ.
ES6์ ๋ฐฐ์ด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น์ ๋ฐฐ์ด์ ๊ฐ ์์๋ฅผ ๋ฐฐ์ด๋ก๋ถํฐ ์ถ์ถํ์ฌ 1๊ฐ ์ด์์ ๋ณ์์ ํ ๋นํ๋ค. ๋ฐฐ์ด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น์ ๋์(ํ ๋น๋ฌธ์ ์ฐ๋ณ)์ ์ดํฐ๋ฌ๋ธ์ด์ด์ผ ํ๋ฉฐ, ํ ๋น ๊ธฐ์ค์ ๋ฐฐ์ด์ ์ธ๋ฑ์ค๋ค. ์ฆ, ์์๋๋ก ํ ๋น.
const arr = [1,2,3];
// ES6 ๋ฐฐ์ด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น
// ๋ณ์ one, two, three๋ฅผ ์ ์ธํ๊ณ ๋ฐฐ์ด arr๋ฅผ ๋ง๋ํธ๋ญ์ฒ๋งํ์ฌ ํ ๋นํ๋ค.
// ์ด๋ ํ ๋น ๊ธฐ์ค์ ๋ฐฐ์ด์ ์ธ๋ฑ์ค๋ค.
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3
๋ฐฐ์ด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น์ ์ํด์๋ ํ ๋น ์ฐ์ฐ์ ์ผ์ชฝ์ ๊ฐ์ ํ ๋น๋ฐ์ ๋ณ์๋ฅผ ์ ์ธํด์ผ ํ๋ค. ์ด๋ ๋ณ์๋ฅผ ๋ฐฐ์ด ๋ฆฌํฐ๋ด ํํ๋ก ์ ์ธ
ํ๋ค.
๋ฐฐ์ด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น์ ๋ณ์ ์ ์ธ๋ฌธ์ ๋ค์์ฒ๋ผ ์ ์ธ๊ณผ ํ ๋น์ ๋ถ๋ฆฌํ ์๋ ์๋ค. const ํค์๋๋ก ๋ณ์๋ฅผ ์ ์ธํ ์ ์์ผ๋ฏ๋ก ๊ถ์ฅโ
๋ฐฐ์ด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น์ ๊ธฐ์ค์ ๋ฐฐ์ด์ ์ธ๋ฑ์ค๋ค.
์ฆ, ์์๋๋ก ํ ๋น๋๋ค. ์ด๋ ๋ณ์์ ๊ฐ์์ ์ดํฐ๋ฌ๋ธ์ ์์ ๊ฐ์๊ฐ ๋ฐ๋์ ์ผ์นํ ํ์๋ ์๋ค.
๋ฐฐ์ด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น์ ์ํ ๋ณ์์ ๊ธฐ๋ณธ๊ฐ
์ ์ค์ ํ ์ ์๋ค.
๋ฐฐ์ด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น์ ์ํ ๋ณ์์ Rest ํ๋ผ๋ฏธํฐ์ ์ ์ฌํ๊ฒ Rest ์์์ ์ฌ์ฉํ ์ ์๋ค.
Rest ์์๋ Rest ํ๋ผํฐ๋จธ์ ๋ง์ฐฌ๊ฐ์ง๋ก ๋ฐ๋์ ๋ง์ง๋ง์ ์์น
ES6์ ๊ฐ์ฒด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น์ ๊ฐ์ฒด์ ๊ฐ ํ๋กํผํฐ๋ฅผ ๊ฐ์ฒด๋ก๋ถํฐ ์ถ์ถํ์ฌ 1๊ฐ ์ด์์ ๋ณ์์ ํ ๋น. ์ด๋
๊ฐ์ฒด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น์ ๋์์ ๊ฐ์ฒด
์ด์ด์ผ ํ๋ฉฐ,ํ ๋น ๊ธฐ์ค์ ํ๋กํผํฐ ํค๋ค
. ์ฆ,์์๋ ์๋ฏธ๊ฐ ์์ผ๋ฉฐ ์ ์ธ๋ ๋ณ์ ์ด๋ฆ๊ณผ ํ๋กํผํฐ ํค๊ฐ ์ผ์นํ๋ฉด ํ ๋น.
const user = { firstName: 'Ungmo', lastName : 'Lee'};
// ES6 ๊ฐ์ฒด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น
// ๋ณ์ lastName, firstName์ ์ ์ธํ๊ณ user ๊ฐ์ฒด๋ฅผ ๋์คํธ๋ญ์ฒ๋งํ์ฌ ํ ๋นํ๋ค.
const { lastName, firstName } = user;
console.log(firstName, lastName); // Ungmo Lee
๋ฐฐ์ด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ๊ฐ์ฒด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น์ ์ํด์๋ ํ ๋น ์ฐ์ฐ์ ์ผ์ชฝ์ ํ๋กํผํฐ ๊ฐ์ ํ ๋น๋ฐ์ ๋ณ์๋ฅผ ์ ์ธ
ํด์ผ ํ๋ค. ์ด๋ ๋ณ์๋ฅผ ๊ฐ์ฒด ๋ฆฌํฐ๋ด ํํ๋ก ์ ์ธ
๊ฐ์ฒด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น์ ๊ฐ์ฒด์์ ํ๋กํผํฐ ํค๋ก ํ์ํ ํ๋กํผํฐ ๊ฐ๋ง ์ถ์ถํ์ฌ ๋ณ์์ ํ ๋นํ๊ณ ์ถ์๋ ์ ์ฉ
const str = 'Hello';
// String ๋ํผ ๊ฐ์ฒด๋ก๋ถํฐ length ํ๋กํผํฐ๋ง ์ถ์ถํ๋ค
const { length } = str;
console.log(length); // 5
const todo = { id: 1, content: 'HTML', completed: true};
// todo ๊ฐ์ฒด๋ก๋ถํฐ id ํ๋กํผํฐ๋ง ์ถ์ถํ๋ค.
const { id } = todo;
console.log(id) ; // 1
๊ฐ์ฒด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น์ ๊ฐ์ฒด๋ฅผ ์ธ์๋ก ์ ๋ฌ๋ฐ๋ ํจ์์ ๋งค๊ฐ๋ณ์์๋ ์ฌ์ฉ
๋ฐฐ์ด์ ์์๊ฐ ๊ฐ์ฒด์ธ ๊ฒฝ์ฐ ๋ฐฐ์ด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น๊ณผ ๊ฐ์ฒด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น์ ํผ์ฉ
ํ ์ ์๋ค.`
๊ฐ์ฒด ๋์คํธ๋ญ์ฒ๋ง ํ ๋น์ ์ํ ๋ณ์์ Rest ํ๋ผ๋ฏธํฐ๋ Rest ์์์ ์ ์ฌํ๊ฒ Rest ํ๋กํผํฐ ...์ ์ฌ์ฉ
ํ ์ ์๋ค. Rest ํ๋กํผํฐ๋ ๋ง์ง๋ง์ ์์น