[Javascript] 구조 분해 할당(Destructuring Assignment)

패스트 캠퍼스의 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online 강의 중 Part 4. JavaScript Level up 내용을 정리하였습니다.

 

 

구조 분해 할당이란?

구조 분해 할당이란, 객체나 배열을 분해하여 각 속성을 개별적으로 할당하는 것을 말한다.

구조 분해 할당, 혹은 비구조화 할당이라고 부른다.

 

1. 객체

객체를 구조 분해하여 원하는 속성만 꺼내서 사용 할 수 있다.

👉 중괄호 사용. 객체의 속성명을 동일하게 명시하여 할당

 

객체 내의 속성이 아닌 다른 속성명을 사용할 경우 해당 변수는 undefined가 된다.

const user = {
   name: 'Hope',
   age: 27,
   email: 'hope772948@gmail.com'
}
const { name, age, email, address } = user // user.email과 동일

console.log(`사용자의 이름은 ${name}입니다.`)
console.log(address) // undefined

 

 

Default 값 설정하기

객체 내에 해당하는 값이 없을 경우 =(등호) 를 사용하여 Default 값을 설정해준다.

const {name, age, email, address = 'Korea'} = user

 

 

Alias - 객체에 정의된 이름이 아니라 다른 변수명으로 바꿔서 사용하고 싶을 경우 :(콜론) 를 이용하여 새로운 변수명을 지정해준다.

ex) user.userName 대신 user.nickname으로 사용하고 싶을 경우 `userName : nickname` 으로 선언

const user = {
   userName: 'Hope',
   age: 27,
   email: 'hope772948@gmail.com'
}
const {userName: nickname, age, email} = user;

console.log(`사용자의 이름은 ${nickname}입니다.`)
console.log(`사용자의 이름은 ${userName}입니다.`)

// 원래 userName대신 name을 사용했는데 name은 javascript에서 사용하는 변수인지 
// undefined가 아닌 ""로 출력되길래 일단 userName으로 사용했다. 
// 혹시 이 부분에 대해 아시는 분 있다면 댓글 부탁드립니다.

 

 

 

2. 배열

👉 대괄호 사용. 배열 내의 순서대로 할당된다.

const fruits = ['Apple', 'Banana', 'Cherry']
const [a, b, c, d] = fruits
console.log(a, b, c, d); // Apple Banana Cherry Undefined

 

배열 중에서 원하는 요소만 추출하고 싶을 경우 - 변수명을 입력하지 않고 , 만 이용

const [, b] = fruits // Banana만 추출
console.log(b) // Banana