자바스크립트 구조 분해 할당(destructuring)

자바스크립트 구조 분해 할당은 배열의 요소들이나 객체의 속성들을 각각의 개별적인 변수에 담아서 사용할 수 있는 문법입니다. 구조 분해 할당을 사용하면 원하는 요소를 가져올 때 더 편리할 수 있습니다. 왜냐하면 구조 분해 할당은 가져올 요소들에 해당하는 변수명을 나열하면 되지만 변수를 사용하면 여러 개를 생성해야 되고 관리하기가 쉽지 않기 때문입니다.

 

사용법

 

const nums = [1, 2, 3, 4, 5];
const [first, second, ...everythingElse] = nums;
console.log(first, second, everythingElse); // 1 2 [ 3, 4, 5 ]

const user = {
  id: "user01",
  pw: "123",
  isAdmin: true,
};

const { id, pw, isAdmin = false } = user;
console.log(id, pw, isAdmin); // user01 123 true

const { id: userId, pw: userPw } = user;
console.log(userId, userPw); // user01 123

function f({ id, pw }) {
  return `id : ${id} pw : ${pw}`;
}
console.log(f(user)); // id : user01 pw : 123

 

배열을 구조 분해 할당 할 때는 나열한 변수명에 배열의 요소들이 순차적으로 할당되고, ...변수명을 사용하면 할당되지 않은 나머지 변수들이 배열로 할당됩니다.

 

객체를 구조 분해 할당 할 때는 객체의 속성명을 나열하면 속성값이 할당이 되고, 속성명을 다른이름으로 재정의 하고 싶다면 속성명 뒤에 : 기호를 붙여서 재정의 하고 싶은 이름을 작명 해주면 됩니다. 그리고 기본값을 설정할 수 있어서 해당 속성에 값이 있으면 그대로 할당되고 속성이 없다면 설정된 기본값이 할당 됩니다.

 

함수의 매개변수로도 구조 분해 할당을 사용할 수 있습니다.