Javascript : 구조 분해 할당 (Destructuring Assignment)

Jong Chan·2025년 2월 24일

구조 분해 할당 ?

배열이나 객체의 값을 분해하여 개별 변수에 쉽게 할당할 수 있도록 해주는 문법이다.

✔️ 배열(Array) 구조 분해 할당

const colors = ["red", "green", "blue"];
const [first, second, third] = colors;

console.log(first);  // 결과 = red
console.log(second); // 결과 = green
console.log(third);  // 결과 = blue

배열의 각 요소들을 내가 지정한 변수에 담을 수 있다.

1) 일부 값만 할당하기

const numbers = [1, 2, 3, 4, 5];
const [first, , third] = numbers;

console.log(first);  // 결과 = 1
console.log(third);  // 결과 = 3

배열의 요소를 모두 다 변수에 담지 않고,
내가 원하는 요소만 꺼내어 담을 수 있다. (배열의 순서는 지키며 담아야 한다.)

2) 배열의 기본값 설정

const fruits = ["apple"];
const [first, second = "banana"] = fruits;

console.log(first);  // 결과 = "apple"
console.log(second); // 결과 = "banana" (기본값 적용)

배열에서 값이 하나밖에 없어도
할당시에 값을 설정할 수 있다.

3) 나머지 요소 할당 (Rest 연산자)

const [first, ...rest] = [10, 20, 30, 40];
console.log(first); // 결과 = 10
console.log(rest);  // 결과 = [20, 30, 40]

Rest 연산자를 활용하면 특정 요소를 변수에 담고
남은 요소들을 배열로 받을 수 있다.
(필요한 데이터만 추출하거나, 불필요한 데이터를 제외하는데 활용 가능하다.)

✔️ 객체(Object) 구조 분해 할당

const person = { name: "김카페", age: 25 };
const { name, age } = person;

console.log(name); // 결과 = "김카페"
console.log(age);  // 결과 = 25

객체 속성을 변수에 할당할 수 있다.

1) 변수명 변경하기

const user = { id: 1, username: "박카페" };
const { username: userName } = user;

console.log(userName); // "박카페"

객체 속성의 변수명을 원하는 변수명으로 변경할 수 있다.

2) 기본값 설정

const person = { name: "박스벅" };
const { name, age = 30 } = person;

console.log(name); // "박스벅"
console.log(age);  // 30 (기본값 적용)

객체 속성값이 없을경우 기본값 설정이 가능하다.

3) 나머지 속성 할당 (Rest 연산자)

const user = { id: 1, name: "김스벅", age: 28 };
const { id, ...rest } = user;

console.log(id);   // 1
console.log(rest); // { name: "김스벅", age: 28 }

배열에서와 마찬가지로 특정 속성을 제외한 나머지 속성값을
새로운 객체로 저장할 수 있다.
(필요한 데이터만 추출하거나, 불필요한 데이터를 제외하는데 활용 가능하다.)

✔️ 함수 매개변수에서 구조 분해 할당 사용

1) 객체 구조 분해

function introduce({ name, age }) {
    console.log(`제 이름은 ${name} 입니다. 나이는 ${age} 입니다.`);
}

const person = { name: "박투썸", age: 22 };
const human = { name: "김투썸", age: 24 };
introduce(person); // "제 이름은 박투썸 입니다. 나이는 22 입니다."
introduce(human); // "제 이름은 김투썸 입니다. 나이는 24 입니다."

함수가 객체를 매개변수로 받을 때 필요한 속성만 쉽게 추출할 수 있다.
person 과 human 처럼 객체값이 서로 다른 변수를
인자로 전달하면 간단하게 결과값을 수정할 수 있다.

2) 배열 구조 분해

function sum([a, b]) {
    return a + b;
}

console.log(sum([5, 10])); // 15
console.log(sum([7, 18])); // 25

함수의 매개변수로 배열을 받을 때
개별 요소를 손쉽게 변수로 가져올 수 있다.
배열값만 수정해주면 원하는 결과를 받을 수 있다.

✔️ 중첩 구조 분해 (Nested Destructuring)

객체나 배열이 중첩된 경우에도 구조 분해 할당을 활용할 수 있다.

const user = {
    id: 1,
    profile: {
        username: "김자바",
        email: "kimjava@example.com"
    }
};

const { profile: { username, email } } = user;

console.log(username); // "김자바"
console.log(email);    // "kimjava@example.com"