본문 바로가기

JS

구조분해할당(destructuring assignment)

// 구조분해할당
// destructuring assignment

// a 객체
let a = {
    name: "son",
    age: 30
};

// 기존의 객체의 값을 출력할 때 아래와 같은 방법으로 사용
console.log(a.name);
console.log(a.age);

// 또는 이렇게 할당해서 사용
let myName = a.name;
let myAge = a.age;

console.log(myName);
console.log(myAge);


// 구조분해 할당
let {name, age} = a; // 구조분해 할당은 {}안에 객체의 프로퍼티 값을 넣어주면

// 아래와 같이 사용이 가능하다
console.log(name); // son
console.log(age); // 30

모든 프로퍼티 값을 할당 안해도 된다.

// 모든 프로퍼티값을 할당 안해도 됨
let b = {
        name: "lee",
        address: "paris",
        age: 23
    };
    
let {name, address} = b; // 모든 프로퍼티값을 할당 안해도 됨

 

프로퍼티의 없는 값도 가능 / 없는 프로퍼티의 기본 값 할당 가능

let c = {
    city: "seoul",
    country: "korea"
}

// category는 c의 프로퍼티가 아님
let {city, country, category} = c;

console.log(city); // seoul
console.log(country); // korea
console.log(category) // 없어서 undefined 출력

// 프로퍼티가 없는 값에 기본 값을 주고 싶다면 ?
let {city, country, category= "1번 카테고리"} = c;

console.log(city); // seoul
console.log(country); // korea
console.log(category) // 1번 카테고리 출력

 

함수의 return 값도 할당 가능

// 구조분해할당
// destructuring assignment

// 함수가 반환한 값도 가능
function a(){
	obj = {
    	name: "son",
        age: 30
    }
    return obj;
}

// 함수의 return된 객체값도 할당
let {name, age} = a();

console.log(name); // son
console.log(age); // 30

 

배열도 구조분해 할당 가능

// 배열
let a = [30, 40, 50];

// 배열 구조분해 할당
let [b, c, d] = a;

console.log(b); // 30
console.log(c); // 40
console.log(d); // 50

// 나머지에 모두 할당하겠다
let [b, ...c] = a;

console.log(b); // 30
console.log(c); // [40, 50]