자바스크립트 강의

[JavaScript] 2주차 - 구조분해할당

notion0896 2024. 10. 10. 18:22

구조분해할당 이란?

destructing (= de + structure + ing) 구조를 쪼개서 다시 할당한다. 

 

1. 배열의 구조분해할당

let [value1, value2] = [1, "new"]
console.log(value1) // 1
console.log(value2) // new

let arr = ["val1","val2","val3"]
let [a,b,c,d] = arr

console.log(a) // val1
console.log(b) // val2
console.log(c) // val3
console.log(d) // undefined

===========================================

let arr = ["val1","val2","val3"]
let [a,b,c,d = 0] = arr

console.log(a) // val1
console.log(b) // val2
console.log(c) // val3
console.log(d) 
// 0 => d=0 이라는 초기값을 줬기 때문에 arr의 배열이 3개밖에 없지만 d에도 값이 배정된다.

만약 arr의 배열에 [3]번째 값이 있었다면 그 값이 출력됨.
초기값은 undefined 상태일때만 효력이 발생함

 

2. 객체의 경우

let user = {
    name :"kim",
    age : 30,
}

let {name, age} = user;

console.log(name) // kim
console.log(age) // 30

===========================================

새로운 이름으로도 할당이 가능

let user = {
    name :"kim",
    age : 30,
}

let {name : herName, age : herAge} = user;

console.log(herName) // kim
console.log(herAge) // 30

============================================

객체와 마찬가지로 초기값을 설정해 줄 수 있다.
let {name, age, birthday} = user;

console.log(name) // kim
console.log(age) // 30
console.log(birthday) // undefined

----------------------------------

let {name, age, birthday = "today"} = user;

console.log(name) // kim
console.log(age) // 30
console.log(birthday) // today