JavaScript - 구조 분해 할당

구조 분해 할당

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

 

배열 구조 분해 할당

 

1. 배열 구조 분해 할당을 사용하지 않은 할당 방법

let arr = ['1st','2nd', '3nd', '4th', '5th', '6th', '7th']
//mon, tue, wed, thu, fri, sat, sun에 배열 1번요소부터 할당하려고 한다면
//하나씩 기입해줘야했다...
const mon = arr[0]  
const tue = arr[1]  
const wed = arr[2]  
const thu = arr[3]  
const fri = arr[4]  
const sat = arr[5]  
const sun = arr[6]  

console.log(mon)
console.log(tue)
console.log(wed)
console.log(thu)
console.log(fri)
console.log(sat)
console.log(sun)
//console.log(mon, tue, wed, thu, fri, sat, sun) console.log도 줄일 수 있다.

 

2. 구조 분해 할당을 사용한다면 한 줄로 할당을 끝낼 수 있다.

let arr = ['1st','2nd', '3nd', '4th', '5th', '6th', '7th']

const [mon, tue, wed, thu, fri, sat, sun] = arr 
console.log(mon, tue, wed, thu, fri, sat, sun)

 

3. 내가 필요 없는 요소가 있다면 쉼표를 이용하여 무시할 수 있다.

let arr = ['1st','2nd', '3nd', '4th', '5th', '6th', '7th']
const [mon, tue, , thu, , sat, sun] = arr 
// 수요일, 금요일을 빼고 할당하였음.
console.log(mon) //1st
console.log(tue) //2nd
console.log(thu) //4th
console.log(sat) //6th
console.log(sun) //7th

 

 

객체 구조 분해 할당

 

1. 객체 구조 분해 할당 및 구조 분해 할당을 사용하지 않는 방법

객체도 배열과 마찬가지로 구조 분해 할당을 사용할 수 있다.

const user ={
    name:'baek',
    age:29,
    host: '127.0.0.1:3000',
}
let {name, age, host} = user
//let name = user.name
//let age = user.age
//let host = user.host
//를 줄여서 한줄로 표현이 가능하다.

// let {age,host,name } = user 순서를 바꾸어도 제대로 출력이 된다.
console.log(name) // baek 
console.log(age) // 29
console.log(host) // '127.0.0.1:3000'

 

2. 객체 구조 분해를 하면서 변수의 이름을 바꿔줄 수 있다.

:(콜론)을 이용하여 할당하면서 변수의 이름을 바꿔 줄 수 있다

const user ={
    name:'baek',
    age:29,
    host: '127.0.0.1:3000',
}
let {name:userName, age:userAge, host:userHost} = user

console.log(name) // error
console.log(age) // error
console.log(host) // error
console.log(userName) // baek 
console.log(userAge) // 29
console.log(userHost) // '127.0.0.1:3000'