[JS] 구조분해할당 Destructuring assignment

 

 

• object : 속성을 가진 값을 저장할때 객체 자료형으로 만든다.
• array : 요소들을 순서대로 저장할때 배열 자료형으로 만든다.

 

작업을 하다보면 객체나 배열 데이터 전부가 아닌, 일부만 필요한 경우가 있다고 한다.

이럴때 자료를 변수로 '분해' 할 수 있게 해주는 문법이 [ 구조분해할당 ] 이다.

 

 

 

 

Array 데이터를 변수에 담기

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

// 위 코드를 아래와 같이 바꿀 수 있다.
const [a,b,c] = arr

 

왼쪽에 선언한 변수 명의 갯수와, 배열 요소의 갯수가 맞지 않으면 값이 제대로 할당되지 않으므로

디폴트값을 넣어줄 수 있다.

const arr = [1,2]

const [a,b,c] = arr
// c는 undefined

const [a,b,c = 3] = arr
// c는 3

 

쉼표를 사용하면, 필요하지 않은 배열의 요소를 버릴 수 있다.

const arr = [1,2,3,4]

const [a,b, ,d] = arr
// 세번째 요소는 필요하지 않음
// a = 1, b = 2, d = 4

 

 

 

 

Object 데이터를 변수에 담기

const person = {
    name: 'Jessie',
    age: 30,
    like: 'keyboard'
}

const {name, age, like} = person

원래 peron.name의 형태로 호출해야하는 값을 변수로 선언해 name 으로 값을 불러올 수 있게 했다.

변수로 선언 시, 순서는 중요하지 않고 해당 속성에 들어있는 값을 가져와 변수로 저장하게 된다.

 

위 코드는 객체의 속성을 변수명으로 가지고와서 사용하게 되는데,

속성: 변수명 으로 변수명을 원하는대로 바꿀수도 있다.

const {name: n, age: a, like} = person
// n : Jessie, a : 30, like : keyboard

 

객체에 없는 값도 추가해줄 수 있는데, 배열에 디폴트 값을 줄때랑은 약간 다르다.

배열은 변수 선언 끝에 = 값의 형태로 일괄 적용할 수 있지만,

객체는 각 속성에 주고싶은 값을 각각 입력해야한다.

const person = {
    name: 'Jessie',
    age: 30
}

const {name, age, like = 'keyboard', height = 170} = person
// name: Jessie, age: 30, like: keyboard, height: 170

const person = {
    name: 'Jessie',
    age: 30,
    height: 160
}

const {name, age, like = 'keyboard', height = 170} = person
// name: Jessie, age: 30, like: keyboard, height: 160
// height의 디폴트 값으로 선언한 것은 170이지만, 객체 내부 값이 160이므로 160

 

속성이 많은 복잡한 객체에서 원하는 값만 뽑아오는 것도 가능하다.

const {name} = person 
//name: Jessie

 

 

 

 

변수를 객체에 집어넣기

기본적으로 변수를 오브젝트로 만들려면 아래와 같이 할 수 있는데,

const name = 'Jessie'
const age = 30

const obj = {
    name: name,
    age: age
}
// name: Jessie, age: 30

 

Destructuring 문법을 이용하면 아래와 같이 바꿀 수 있다.

const obj = { name, age }
// 변수명과 속성명이 동일하면 name: name을 name으로 생략 가능

 

 

 

 

 

 

함수의 파라미터에서 활용하기

함수에 객체를 활용하고 싶으면 아래와 같이 할 수 있다.

const obj = {
    name: 'Jessie',
    age: 30
}

function logText(name, age) {
    console.log(name);
    console.log(age);
}

logText(obj.name, obj.age)
// Jessie 와 30 각각 출력

 

Destructuring 문법을 활용해 정리하려면

파라미터를 { } 괄호로 묶어주고, 함수 실행 시 객체 이름만 써주면 된다. 

const obj = {
    name: 'Jessie',
    age: 30
}

function logText({name, age}) {
    console.log(name);
    console.log(age);
}

logText(obj)
// Jessie 와 30 각각 출력

 

배열도 동일하게 적용해볼 수 있다.

const arr = ['Jessie', 30]

function logText([name, age]) {
    console.log(name);
    console.log(age);
}

logText(arr)
// Jessie 와 30 각각 출력

 

 

 

 

 

지금 듣는 강의에 나오는 수준으로만 정리했는데

훨씬 디테일하게 활용하는 방법이 많다!

구조 분해 할당