[javascript] 구조분해 할당

1. 배열 구조분해 할당

구조화된 배열을 구조분해하여 1개 이상의 변수에 할당하는 방법은 다음과 같다.

const arr = [1,2,3];
const [a,b,c] = arr;
a // 1
b // 2
c // 3

우변에 이터러블을 할당하지 않으면 에러가 난다.

선언과 할당을 분리할 수도 있는데, 이 경우 let의 사용을 권장한다. const는 재할당이 불가능하기 때문이다.

let [x,y]
[x,y] = [1,2]

구조분해 할당의 기준은 배열의 요소 순서, 즉 인덱스이며 순서대로 할당된다. 이때 변수의 개수와 요소의 개수가 반드시 일치할 필요는 없다. 요소가 변수보다 많기만 하면 된다.

const arr = [1,2,3,4,5,6]
cosnt [a,b,c,d] = arr
a // 1
b // 2
c // 3
d // 4

세번째 요소는 선언된 변수가 없어 건너뛸 수 있다

const arr = [1,2,3,4,5,6]
cosnt [a,b,,d] = arr
a // 1
b // 2
d // 4

...rest요소를 쓰면 첫번째와 두 번째로 선언된 변수 제외 나머지 모두를 배열로 받아온다. rest 요소는 반드시 마지막에 위치해야 한다.

const arr = [1,2,3,4,5,6]
cosnt [a,b,...c] = arr
a // 1
b // 2
c // [3,4,5,6]

변수에 초기값을 설정할 수 있다. 하지만 변수에 할당값이 들어온다면 초기값보다 할당값이 우선순위가 되어 할당값이 출력된다.

const arr = [1,2,3,4,5,6]
cosnt [a,b,c=4] = arr
a // 1
b // 2
c // 3 => 초기값이 4가 이미 있지만 할당값으로 3이 들어왔기 때문에 출력값은 3이 된다.

2. 객체 구조분해 할당

객체 구조분해 할당과 배열 구조분해할당은 크게 다르지 않다.

객체의 각 프로퍼티를 객체로부터 구조분해하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 한다.

const user = {firstname: "hyungwon", lastname: "jang"}
const {firstname, lastname} = user
firstname // hyugwon
lastname // jang

=> 이때 객체 구조분해 할당은 배열과 다르게 변수 이름을 원 객체와 다르게 할 수 없다.

const user = {firstname: "hyungwon", lastname: "jang"}
const {first, last} = user
first// undefined
last // undefined

다른 변수에 저장하고 싶다면 이렇게 할 수 있다.

const user = {firstname: "hyungwon", lastname: "jang"}
const {firstname:first, lastname: last} = user
first // hyungwon
last // jang

객체 구조분해할당 또한 변수에 기본값을 설정할 수 있고, 할당값이 있다면 할당값이 우선된다.

const user = {firstname: "hyungwon", lastname: "jang"}
const {firstname:first="chulsoo", lastname: last} = user
first // hyungwon => 기본값인 chulsoo가 있지만 할당값이 hyungwon이기에 hyungwon으로 출력한다.
last // jang

하나의 객체일때 하나의 요소를 변수에 담아 추출하는 방법

const todo = {id:1, content:"html", done:true}
const {id, content, done} = todo
id // 1
content // "html"
done // true

이 또한 다른 이름의 변수에 담고 싶다면 이렇게 하면 된다.

const todo = {id:1, content:"html", done:true}
const {id:key, content:what, done:complete} = todo
key // 1
what // "html"
complete // true

배열로 된 여러 개의 객체에서 원하는 부분의 요소를 뽑아올 수 있는 방법

const todo = [
    {id:1, content:"html", done:true},
    {id:2, content:"css", done:true},
    {id:3, content:"javascript", done:false},
    {id:4, content:"React", done:false},
    {id:5, content:"React-native", done:false}
]

const [,,{content},{id:key},{done}] = todo
=> 첫번째와 두번째는 변수가 없으니 넘어가고
세 번째 객체의 content값과 네 번째 객체의 id값(key값)과 다섯 번째 객체의 done값을 가져올 수 있다.

객체 안의 객체 요소도 받아올 수 있다.

const todo = {
    id:1,
    content:{
        name:"React",
        level: "hard"
    }, 
    done:true
}

const {content:{name}} = todo
name // React

객체 구조분해할당 또한 배열처럼 rest요소를 사용할 수 있으며, 이는 항상 마지막에 와야 한다.

const obj = {id:1, content:"jv", level:"hard", done:true"}
const {id, ...rest}
id // 1
rest // { content: 'jv', level: 'hard', done: true }