๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
javascript/๐Ÿ“– study

[7์ฃผ์ฐจ ์Šคํ„ฐ๋””]35์žฅ-๋””์ŠคํŠธ๋Ÿญ์ฒ˜๋ง ํ• ๋‹น

by HomieKim 2022. 3. 27.

๋””์ŠคํŠธ๋Ÿญ์ฒ˜๋ง ํ• ๋‹น

  • ๋””์ŠคํŠธ๋Ÿญ์ฒ˜๋ง ํ• ๋‹น(๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น, destructuring assignment)์€ ๊ตฌ์กฐํ™”๋œ ๋ฐฐ์—ด๊ณผ ๊ฐ™์€ ์ดํ„ฐ๋Ÿฌ๋ธ” ๋˜๋Š” ๊ฐœ์ฒด๋ฅผ destructuringํ•˜์—ฌ 1๊ฐœ ์ด์ƒ์˜ ๋ณ€์ˆ˜์— ๊ฐœ๋ณ„์ ์œผ๋กœ ํ• ๋‹นํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.
  • ๋ฐฐ์—ด๊ณผ ๊ฐ™์€ ์ดํ„ฐ๋Ÿฌ๋ธ” ๋„๋Š” ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์—์„œ ํ•„์š”ํ•œ ๊ฐ’๋งŒ ์ถ”์ถœํ•˜์—ฌ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•  ๋•Œ ์œ ์šฉ

๋ฐฐ์—ด ๋””์ŠคํŠธ๋Ÿญ์ฒ˜๋ง ํ• ๋‹น

  • ๋ฐฐ์—ด์˜ ๊ฐ ์š”์†Œ๋ฅผ ๋ฐฐ์—ด๋กœ๋ถ€ํ„ฐ ์ถ”์ถœํ•˜์—ฌ 1๊ฐœ ์ด์ƒ์˜ ๋ณ€์ˆ˜์— ํ• ๋‹น
  • ๋””์ŠคํŠธ๋Ÿญ ์ฒ˜๋ง ํ• ๋‹น์˜ ๋Œ€์ƒ(ํ• ๋‹น๋ฌธ์˜ ์šฐ๋ณ€)์€ ์ดํ„ฐ๋Ÿฌ๋ธ”์ด์–ด์•ผ ํ•œ๋‹ค.
const arr = [1,2,3];

const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3
  • ํ• ๋‹น์˜ ๊ธฐ์ค€์€ ์ธ๋ฑ์Šค์ด๋‹ค. ์ฆ‰, ์ˆœ์„œ๋Œ€๋กœ ํ• ๋‹น๋˜๊ณ  ๋ณ€์ˆ˜์˜ ๊ฐœ์ˆ˜์™€ ์ผ์น˜ํ•  ํ•„์š”๋Š” ์—†๋‹ค.
  • ํ• ๋‹น๋˜๋Š” ๋ณ€์ˆ˜์— ๊ธฐ๋ณธ ๊ฐ’์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๊ณ , ๊ธฐ๋ณธ๊ฐ’ ๋ณด๋‹ค ํ• ๋‹น๋œ ๊ฐ’์ด ์šฐ์„ ํ•œ๋‹ค.
const [a, b, c=3] = [1,2];
cosole.log(a,b,c); // 1 2 3

const [a,b,c=3] = [1,2,4];
cosole.log(a,b,c); // 1 2 4

๊ฐ์ฒด ๋””์Šคํ„ฐ๋Ÿญ์ฒ˜๋ง ํ• ๋‹น

  • ๊ฐ์ฒด์˜ ๊ฐ ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ์ฒด๋กœ ๋ถ€ํ„ฐ ์ถ”์ถœํ•˜์—ฌ 1๊ฐœ ์ด์ƒ์˜ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•œ๋‹ค.
  • ํ• ๋‹น์˜ ๋Œ€์ƒ(ํ• ๋‹น๋ฌธ์˜ ์šฐ๋ณ€)์€ ๊ฐ์ฒด์ด์–ด์•ผ ํ•˜๋ฉฐ, ํ• ๋‹น ๊ธฐ์ค€์€ ํ”„๋กœํผํ‹ฐ ํ‚ค๋‹ค. ์ฆ‰, ์ˆœ์„œ๋Š” ์˜๋ฏธ๊ฐ€ ์—†์œผ๋ฉฐ, ์„ ์–ธ๋œ ๋ณ€์ˆ˜ ์ด๋ฆ„๊ณผ ํ”„๋กœํผํ‹ฐ ํ‚ค๊ฐ€ ์ผ์น˜ํ•˜๋ฉด ํ• ๋‹น ๋œ๋‹ค.
const user = {
    firstName : 'homie',
    lastName : 'kim'
};
// ํ”„๋กœํผํ‹ฐํ‚ค๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ• ๋‹น์ด ์ด๋ฃจ์–ด์ง
const {lastName, firstName} = user;
console.log(firstName, lastName); // homie kim
// ๊ฐ์ฒด๋ฆฌํ„ฐ๋Ÿด ํ˜•ํƒœ๋กœ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ํ”„๋กœํผํ‹ฐ ์ถ•์•ฝ ํ‘œํ˜„์„ ํ†ตํ•ด ์„ ์–ธ๋œ ๊ฒƒ
const { lastName: lastName , firstName : firstName} = user;
// ํ”„๋กœํผํ‹ฐ์˜ ํ‚ค์™€ ๋‹ค๋ฅธ ์ด๋ฆ„์œผ๋กœ ๋ณ€์ˆ˜๋ฅผ ๋ฐ›์œผ๋ ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ณ€์ˆ˜ ์„ ์–ธ
const { lastName : ln, firstName : fn} = user;
console.log(fn, ln); // homie kim
  • ๋ฐฐ์—ด์˜ ์š”์†Œ๊ฐ€ ๊ฐ์ฒด์ธ ๊ฒฝ์šฐ ๋ฐฐ์—ด ๋””์ŠคํŠธ๋Ÿญ์ฒ˜๋ง ํ• ๋‹น๊ณผ ๊ฐ์ฒด ๋””์ŠคํŠธ๋Ÿญ์ฒ˜๋ง ํ• ๋‹น์„ ํ˜ผ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
const todos = [
    { id : 1, content : 'HTML', completed : true},
    { id : 2, content : 'CSS', completed : false},
    { id : 3, content : 'JS', completed : true},
];
// ๋ฐฐ์—ด ๋””์ŠคํŠธ๋Ÿญ์ฒ˜๋ง ๊ธฐ์ค€์€ ์ธ๋ฑ์Šค, ๊ฐ์ฒด ๋””์ŠคํŠธ๋Ÿญ์ฒ˜๋ง ๊ธฐ์ค€์€ ํ”„๋กœํผํ‹ฐ ํ‚ค
const [, {id},{content}] =  todos;
console.log(id, content); // 2 JS

๋Œ“๊ธ€