구조분해할당

자바스크립트에서는 배열이나 객체에서 값을 가져올 때, 구조분해할당을 통해서 편하게 가져올 수 있다. 

이를 활용해서 react등 다른 SPA 프레임워크에서도 정말 많이 쓰인다. 

# 01. 배열 

const food = ["🍕", "🥓", "🍙"];
const [pizza, bacon, rice] = food;
console.log(pizza); // 🍕
console.log(bacon); // 🥓
console.log(rice); // 🍙

const pizza = food[0] 이렇게 하나하나 나열하지 않아도,

음식이라는 배열을 구조분해할당을 통해서 각 음식의 변수를 손쉽게 만들 수 있다.

 

function createApple() {
    return ["apple", "🍎"];
}
const [name, emoji] = createApple();
console.log(name); // apple
console.log(emoji); // 🍎

# 02. 객체

const user = {
    name: "John",
    age: 10,
};
const { name, age } = user;
console.log(name); // John
console.log(age); // 10

객체 또한 마찬가지로 const name = user.name 과 같이 매번 만들지 않고,

간편하게 구조분해할당을 통해 변수를 한번에 생성할 수 있다. 

 

const user = {
    name: "John",
    age: 10,
};
function sayHello({ name, age }) {
    console.log(`Hello! My name is ${name} and I'm ${age} years old.`);
}
sayHello(user); // John 10

함수에서 인자로 쓸 변수의 경우에도 구조분해할당을 활용할 수 있다.

 

const user2 = {
    name: "Hong",
    address: {
        zipCode: "01234",
        city: "Seoul",
    },
};
const { address: { city } } = user2;
console.log(city); // Seoul

중첩된 객체 안의 값을 원할 경우 위와 같이 사용할 수 있다. 

(대신 address 값 사용 X)