[JS] 구조분해할당

구조분해할당 또는 비구조화할당 이라고 합니다.

아래 MDN 문서를 참고해주세요.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

구조분해할당은 객체 또는 배열의 속성을 변수에 담을 수 있는 표현식입니다.

 

객체로 사용해보겠습니다.

const user = {
  id: 'hyemin',
  nickname:'혜민',
  age: 31,
  email: 'hyemin@test.test'
}

const {id, nickname, age, email} = user; 
console.log(`아이디는 ${id}의 닉네임은 ${nickname}이고 나이는 ${age}입니다. 이메일주소는 ${email}`);
// output -> 아이디는 hyemin의 닉네임은 혜민이고 나이는 31입니다. 이메일주소는 hyemin@test.test

 

만약 email 값이 없다면 어떻게 될까요?

const user = {
  id: 'hyemin',
  nickname:'혜민',
  age: 31
}

const {id, nickname, age, email} = user; 
console.log(`아이디는 ${id}의 닉네임은 ${nickname}이고 나이는 ${age}입니다. 이메일주소는 ${email}`);
// output -> 아이디는 hyemin의 닉네임은 혜민이고 나이는 31입니다. 이메일주소는 undefined

위와 같이 undefined로 뜹니다. 이 부분을 해결하기 위해 기본값을 지정해줄 수 있습니다.

const user = {
  id: 'hyemin',
  nickname:'혜민',
  age: 31
}

const {id, nickname, age, email = test} = user; 
console.log(`아이디는 ${id}의 닉네임은 ${nickname}이고 나이는 ${age}입니다. 이메일주소는 ${email}`);
// output -> 아이디는 hyemin의 닉네임은 혜민이고 나이는 31입니다. 이메일주소는 test

 

 

또한 변수명을 변경해줄 수 있습니다.

변수명 id를 변경해보겠습니다.

const user = {
  id: 'hyemin',
  nickname:'혜민',
  age: 31
}

const {id:userId, nickname, age, email = test} = user; 
console.log(`아이디는 ${userId}의 닉네임은 ${nickname}이고 나이는 ${age}입니다. 이메일주소는 ${email}`);
// output -> 아이디는 hyemin의 닉네임은 혜민이고 나이는 31입니다. 이메일주소는 test

 

 

이번에는 배열로 사용해보겠습니다.

const alphabet = ['A','B','C']; 
const [a,b,c,d] = alphabet;
console.log(a,b,c,d);
// output -> A B C undefined

배열은 순서대로 출력됩니다. d 값에 해당하는 배열의 자릿수에는 값이 없기 때문에 undefined로 출력됩니다.

 

그리고 배열에서 해당하는 값 만 가지고 오고 싶을때는 배열의 자릿수대로 , 로 구분하여 가져올 수 있습니다.

B 값만 출력해보겠습니다.

const alphabet = ['A','B','C']; 
const [,b] = alphabet;
console.log(b);
// output -> B

C 값만 출력한다면 아래와 같이 코드를 작성하면 됩니다.

const alphabet = ['A','B','C']; 
const [,,c] = alphabet;
console.log(c);
// output -> C