본문 바로가기
JavaScript./Vanila JS

구조분해할당

by dev챙 2024. 2. 28.

구조분해할당

구조분해할당이란?

말 그대로 구조를 분해해서 할당한다. 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식


const obj = {
  a: 10,
  b: 20
}

function sum ({a: hello, b:world}) {
  console.log(hello+ world);
}

sum(obj); // 30

구조분해할당으로 변수값 교환을 할 수 있다.

구조분해할당 없이 변수값 교환하는 방법


let a = 10;
let b = 20;

const temp = a;

a = b;
b = temp;

console.log(a, b); // 20 10

구조분해할당으로 변수값 교환하기


let a = 123;
let b = 456;

[ a, b ] = [ b, a ]

구조분해할당으로 기본값 정하기


const [ a = 10, b = 20 ] = [10];

console.log(a, b) // 10 20

위 코드에서 b의 기본값을 설정하지 않는다면 undefined가 할당된다.

배열 내에 특정값만 가져오고 싶은 경우


const arr = [ 1, 2, 3, 4, 5 ]

const [ one, , three, ,five ] = arr

console.log(one, three, five); // 1 3 5

배열 내에 특정한 값도 받아오고 나머지도 변수에 담을 경우


const arr = [ 1, 2, 3, 4, 5 ];
const [one, two, ...others] = arr;

console.log(one, two, others) ; // 1 2 [ 3, 4, 5 ]