[JavaScript] 배열과 객체의 비구조화 할당 (구조 분해 할당)

배열의 비구조화 할당

배열 선언 및 호출

const [apple, banana, grape] = ['apple1', 'banana1', 'grape1'];

console.log(apple); // apple1
console.log(banana); // banana1
console.log(grape); // grape1

변수명과 값을 배열 형식으로 한꺼번에 선언할 수 있다.

 

나머지 패턴

const fruitList = ['apple', 'banana', 'grape'];
const [apple1, ...rest] = fruitList;

console.log(apple1); // apple
console.log(rest); // ['banana', 'grape']

전개 연산자를 통해 나머지 변수들을 따로 분리시킬 수 있다.

 

기존 배열 값을 변수에 한 번에 할당

const fruit = ['apple', 'banana', 'grape'];
const [apple1, banana1, grape1] = fruit;

console.log(apple1); // apple
console.log(banana1); // banana
console.log(grape1); // grape

배열값을 담은 변수를 이용하여 각각의 변수에 한 번에 할당시킬 수 있다.

 

객체의 비구조화 할당

객체 선언 및 호출

const {apple, banana, grape} = {
    apple: 'apple1',
    banana: 'banana1',
    grpae: 'grape1'
};

console.log(apple); // apple1
console.log(banana); // banana1
console.log(grape); // grape1

객체 형식으로도 변수에 값을 한 번에 할당시킬 수 있다.

 

나머지 패턴

const {apple, ...rest} = {
    apple: 'apple1',
    banana: 'banana1',
    grape: 'grape1'
}

console.log(apple); // apple1
console.log(rest); // {banana: 'banana1', grape: 'grape1'}

배열 형식과 비슷하게 전개 연산자를 이용하여 나머지 변수들을 한 번에 묶을 수 있다.

 

기존 객체 값을 변수에 한 번에 할당

const fruit = {
    apple: 'apple1',
    banana: 'banana1',
    grape: 'grape1'
}

const {apple, banana, grape} = fruit;

console.log(apple); // apple1
console.log(banana); // banana1
console.log(grape); // grape1

객체 값을 가진 변수를 이용하여 각각의 변수에 한 번에 할당시킬 수 있다.

 

객체의 프로퍼티 값을 새로운 이름의 변수로 할당하기

const users = {name: 'kim', age: 20, sex: 'male'};
const {name: user} = users;
console.log(user); // 'kim'

위에서는 객체 안의 key 값의 이름을 그대로 변수 이름으로 해서 저장하는 방법만 나와있었다.

하지만, 객체 안의 key 값을 그대로 변수명으로 지정하는 게 아닌 새 이름의 변수로 객체의 value 값을 할당할 수도 있다.

{name: user} 라고 변수를 선언하면, user가 새 변수명이 되고 name이 객체의 key 값이 된다.

이런 식으로 객체의 프로퍼티를 새로운 변수 이름으로 따로 저장할 수도 있구나라는 것도 알아두면 좋다.

 

1. 비구조화 할당이란, { } = { }, [ ] = [ ] 식의 변수 선언(할당)이다.
2. 배열이나 객체를 담은 기존의 변수를 이용하여 여러 변수들에게 한 번에 할당이 가능하다.