Distructuring

✒️ 2025-05-23 15:20 내용 수정

배열이나 객체의 내용물을 한 번에 각각의 변수에 대입시킴

• 배열의 요소를 각각의 변수에 한 번에 대입할 수 있다.
• 변수 묶음을 대괄호로 묶어서 사용한다.

let [변수1, 변수2, 변수3] = 배열;

let arr = [1, 2, 3];
let [a, b, c] = arr; // let a = arr[0], let b = arr[1], let c = arr[2]와 동일

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

• 객체의 key를 각각의 변수에 한 번에 대입할 수 있다.
  • 주의사항 : 값을 저장하는 변수명은 객체의 key 이름과 동일해야 한다.
  • 일치하지 않으면 undefined가 뜬다.
• 변수 묶음을 중괄호로 묶어서 사용한다.

let {변수1, 변수2, 변수3} = 객체;

let book = {
	title: '어린왕자',
	author: '앙투안 드 셍텍쥐페리',
	price: 10000
}

let {title, author, price} = book;

console.log(title); // 어린왕자
console.log(author); // 앙투안 드 셍텍쥐페리
console.log(price); // 10000

Rest distructuring

• 배열의 나머지 요소를 한 번에 담을 수 있다.

let [변수1, ...변수2] = 배열;

let arr = [1, 2, 3, 4, 5];
let [a, b, c, ...etc] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(etc); // [4, 5]

Spread

• 배열 요소의 값을 개별적으로 추출해서 펼쳐낼 수 있다.

let 배열 = [...배열1, ...배열2, ...배열3];
let 배열 = [...배열1, ...배열2, 값1, 값2];

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];

let result = [...arr1, ...arr2, ...arr3];

console.log(result); // [1,2,3,4,5,6,7,8,9]