[JS ES6] 자바스크립트 구조 분해 할당(Destructuring assignment)

JS ES6

[JS ES6] 자바스크립트 구조 분해 할당(Destructuring assignment)

 

 

🧐 JS 구조 분해 할당(Destructuring assignment)이란?

개발할 때 키를 가진 데이터 여러 개를 하나에 저장할 땐 객체를, 데이터를 순서대로 저장할 땐 배열을 사용한다.

이 배열과 객체의 전체 또는 일부를 함수로 전달해야 할 때 사용한다.

구조 분해 할당(Destructuring assignment)을 통해 객체나 배열을 '변수'로 분해할 수 있게 도와주는 특별한 문법인 것이다.

 

 

 

 

 

1. 배열(Array) 안에 있는 데이터를 변수에 담는 방법

1-1. 기존 방법

// 배열 안에 있던 데이터를 변수에 담는 기존 방법
const arr = [1,2,3];

const a = arr[0];
const b = arr[1];

console.log(a); // 콘솔창 1 출력
console.log(b); // 콘솔창 2 출력

 

   

1-2. Destructuring 방법

//Destructuring 방법
const [a,b] = [1, 2];

console.log(a); // 콘솔창 1 출력
console.log(b); // 콘솔창 2 출력

 

1-3. 기본값 부여하기

구조 분해 할당 시, 변수의 개수와 배열의 길이가 다를 경우 제대로 할당이 되지 않게 되어 undefinde가 출력된다.

const [a,b,c] = [1, 2];

console.log(a); // 콘솔창 1 출력
console.log(b); // 콘솔창 2 출력
console.log(c); // 콘솔창 undefined 출력

위와 같이 배열의 길이가 달라 undefinde가 발생되지 않도록 기본값을 부여해 사전에 방지할 수 있다.

//기본값 부여
const [a,b,c = 3] = [1, 2];

console.log(a); // 콘솔창 1 출력
console.log(b); // 콘솔창 2 출력
console.log(c); // 콘솔창 3 출력

 

 

 

 

2. 객체(Object) 안에 있는 데이터를 변수에 담는 방법

2-1. 기존 방법

//기존 객체의 데이터를 변수에 담는 법
const obj = {
    name: "heeming",
    height: 158,
}
const name = obj.name;
const height = obj.height;

console.log(name); //heeming 출력
console.log(height); //158 출력

 

2-2. Destructuring 방법

//Destructuring 방법
const {name: a, height: b} = {name: "heeming", height: 158};

console.log(a); //heeming 출력
console.log(b); //158 출력

위와 같이 구조 분해 할당을 통해 변수 a, b가 생성되고 각각 "heeming", 158이라는 값이 할당된 것을 확인할 수 있다.

만약 변수의 이름과 객체 안의 key 이름이 동일할 경우 더욱 간결하게 작성할 수 있는데, 아래와 같이 작성해주면 된다.

//Destructuring 방법 (변수명 = obj key 이름이 같은 경우)
const {name, height} = {name: "heeming", height: 158};

console.log(name); //heeming 출력
console.log(height); //158 출력

 

2-3. 변수를 객체(Object)에 넣는 경우

객체에 있는 값을 변수로 할당하는 것이 아니라, 반대로 변수의 값을 객체로 할당하고 싶은 경우라면

//변수를 객체로 넣는 기존 방법
const name = "amy";
const age = 20;
const obj = {name: name, age: age};

console.log(obj.name); //amy 출력
console.log(obj.age); //20 출력

기존 방법은 위와 같이 작성해야 했지만,

//변수를 객체로 넣는 Destructuring 방법
const name = "amy";
const age = 20;
const obj = {name, age};

console.log(obj.name); //amy 출력
console.log(obj.age); //20 출력

위와 같이 변수명이 객체의 key와 동일하다면 간결하게 작성 가능하다.

 

 

 

 

3. 함수 파라미터 변수에 Destructuring 적용하기

3-1. 기존 방법

//함수 파라미터 변수에 객체나 배열의 값 넣는 기존 방법
function person(name, age){
    console.log(name);
    console.log(age);
}
//객체
var obj = { name : 'Kim', age : 20 }
person(obj.name, obj.age); //kim, 20 출력


//배열
var arr = ["park", 30]
person(arr[0], arr[1]); //park, 30 출력

 

3-2. Destructuring 방법(객체)

function person({name, age}){
    console.log(name);
    console.log(age);
}
var obj = { name : 'Kim', age : 20 }
person(obj); //kim, 20 출력

 

3-3. Destructuring 방법(배열)

function person([name, age]){
    console.log(name);
    console.log(age);
}
var arr = ["park", 30]
person(arr); //park, 30 출력

 

 

 

 

4. 중첩 구조 분해

객체나 배열이 또 다른 객체나 배열을 포함하는 경우 또한 중첩 배열이나 객체의 정보를 추출할 수 있다.

//중첩 구조 분해
let magician = {
    state: {
        hp: 30,
        mp: 100,
        power: 20,
        int: 80
    },
    skills: ["fireball", "flame"]
}

let {
    state: {
        hp,
        mp,
        power,
        int
    },
    skills: [skill_1, skill_2]
} = magician;

console.log(hp); // 30 출력
console.log(mp); // 100 출력
console.log(power); // 20 출력
console.log(int); // 80 출력
console.log(skill_1); // fireball 출력
console.log(skill_2); // flame 출력

위와 같이 분해하고자 하는 magician 객체나 배열의 패턴에 맞춰 작성하면 중첩 구조여도 변수를 통해 정보를 쉽게 추출할 수 있다.

 

 

 

 

 

해당 글은 코딩애플🍎 강의, MDN 공식 문서, 모던 javascript 튜토리얼 기반으로 작성하였습니다.