구조 분해 할당

작성자

익명

작성일

2026.08.04

조회수

버전

JavaScript 구조 분해 할당 ES6 배열 구조 분해 객체 구조 분해 나머지 패턴 옵션 객체 패턴 초급

구조 분해 할당 (Destructuring Assignment)

구조 분해 할당은 배열과 같은 반복 가능한(iterable) 객체 및 일반 객체의 패턴을 이용하여 그 값을 개별 변수에 효율적으로 분리하여 할당하는 JavaScript의 표현식입니다.

개요

구조 분해 할당은 ECMAScript 2015(ES6)에서 처음 도입되었습니다. 이전의 JavaScript에서는 배열이나 객체의 내부 값에 접근하기 위해 인덱스(array[0])나 점 표기법(object.property)을 반복적으로 사용해야 했으며, 이는 코드가 길어지고 가독성을 떨어뜨리는 원인이 되었습니다.

구조 분해 할당을 사용하면 단 한 줄의 코드로 여러 개의 변수를 선언하고 값을 할당할 수 있어, 코드의 간결함이 비약적으로 향상됩니다. 특히 API 응답 데이터와 같이 복잡한 계층 구조를 가진 데이터를 다룰 때 매우 유용합니다.

배열 구조 분해 할당

배열 구조 분해 할당은 배열의 순서(index)를 기준으로 값을 추출합니다.

기본 문법 및 건너뛰기

배열의 요소 순서에 맞춰 변수를 배치하면 해당 위치의 값이 자동으로 할당됩니다. 특정 요소를 무시하고 싶을 때는 쉼표(,)를 사용하여 빈 공간을 둡니다.

const colors = ['red', 'green', 'blue'];

// 기본 할당
const [first, second, third] = colors; 
console.log(first); // 'red'

// 특정 요소 건너뛰기 (두 번째 요소 무시)
const [primary, , tertiary] = colors;
console.log(primary);  // 'red'
console.log(tertiary); // 'blue'

기본값 설정 및 나머지 패턴

추출하려는 요소가 undefined일 경우를 대비해 기본값을 설정할 수 있습니다. 또한, 나머지 연산자(...)를 사용하여 남은 요소들을 새로운 배열로 묶을 수 있습니다.

const settings = [10, 20];

// 기본값 설정: 세 번째 요소가 없으므로 30이 할당됨
const [width, height, depth = 30] = settings;

// 나머지 패턴 (Rest syntax)
const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]

객체 구조 분해 할당

객체 구조 분해 할당은 순서가 아닌 속성 키(property key)를 기준으로 값을 추출합니다.

속성 추출 및 변수명 변경

객체 내의 키 이름과 동일한 이름의 변수를 선언하여 값을 가져옵니다. 만약 다른 이름의 변수에 할당하고 싶거나, 이미 선언된 변수와 이름이 충돌하는 경우에는 콜론(:)을 사용하여 별칭(Alias)을 지정함으로써 해결할 수 있습니다.

const user = { id: 1, name: 'Alice', email: 'alice@example.com' };
const existingName = 'Bob';

// 기본 속성 추출
const { name, email } = user;

// 변수 이름 변경 및 충돌 해결 (name 키의 값을 userName 변수에 할당)
const { name: userName, id: userId } = user;
console.log(userName); // 'Alice'

기본값 및 중첩 객체 구조 분해

객체에 해당 키가 존재하지 않을 때 사용할 기본값을 지정할 수 있으며, 객체 내부의 객체(중첩 구조) 또한 한 번에 분해할 수 있습니다.

const member = {
  info: { city: 'Seoul', zip: '12345' },
  level: 1
};

// info 객체 내부의 city, country를 추출하고, 최상위의 grade를 추출함
const { 
  info: { city, country = 'Korea' }, 
  grade = 'Silver' 
} = member;

console.log(city);    // 'Seoul'
console.log(country); // 'Korea' (기본값 적용)
console.log(grade);   // 'Silver' (기본값 적용)

주요 활용 사례

함수 파라미터에서의 활용 (옵션 객체 패턴)

함수에 많은 인자를 전달해야 할 때, 인자의 순서를 기억하는 대신 객체 하나를 전달하고 내부에서 구조 분해를 수행하는 패턴이 널리 쓰입니다.

// 옵션 객체 패턴
function createProfile({ name, age, hobby = 'Reading' }) {
  console.log(`${name}(${age})님의 취미는 ${hobby}입니다.`);
}

createProfile({ name: '철수', age: 25 }); // '철수(25)님의 취미는 Reading입니다.'

가변 인자 함수와의 결합

나머지 매개변수(...args)와 구조 분해 할당을 결합하면, 가변적인 인자 중 첫 번째 인자만 따로 분리하고 나머지를 배열로 처리하는 효율적인 로직을 짤 수 있습니다.

function sumAll(first, ...others) {
  console.log(`첫 번째 값: ${first}`);
  console.log(`나머지 합계: ${others.reduce((a, b) => a + b, 0)}`);
}

sumAll(10, 20, 30, 40); 
// 첫 번째 값: 10 / 나머지 합계: 90

변수 값 교환 (Swap)

임시 변수(temp) 없이 두 변수의 값을 즉시 교환할 수 있습니다.

let a = 1;
let b = 2;
[a, b] = [b, a]; // a=2, b=1

함수 반환값의 구조 분해

함수가 배열이나 객체를 반환할 때, 호출부에서 즉시 구조 분해하여 필요한 값만 추출할 수 있습니다. 이는 React의 useState 훅과 같은 패턴에서 매우 흔하게 사용됩니다.

function useSomething() {
  return ['someValue', (val) => console.log(`Setting value to ${val}`)];
}

const [value, setValue] = useSomething();
console.log(value); // 'someValue'
setValue('newValue'); // 'Setting value to newValue'

기존 방식 vs 구조 분해 할당 비교

구분	기존 방식 (Traditional)	구조 분해 할당 (Destructuring)	비고
배열 접근	`const a = arr[0]; const b = arr[1];`	`const [a, b] = arr;`	인덱스 기반 추출
객체 접근	`const name = obj.name; const age = obj.age;`	`const { name, age } = obj;`	키 기반 추출
값 교환	`let t = a; a = b; b = t;`	`[a, b] = [b, a];`	임시 변수 불필요
함수 인자	`function f(name, age, city) { ... }`	`function f({ name, age, city }) { ... }`	인자 순서 무관

주의 사항 및 제약 조건

TypeError 발생 가능성

구조 분해 할당의 대상이 null이나 undefined인 경우, JavaScript 엔진은 해당 값에서 속성을 추출할 수 없으므로 TypeError를 발생시킵니다.

// 1. null 대상 구조 분해
const dataNull = null;
const { name } = dataNull; // TypeError: Cannot destructure the 'null' object

// 2. undefined 대상 구조 분해
const dataUndef = undefined;
const [first] = dataUndef; // TypeError: dataUndef is not iterable

해결책: 기본값으로 빈 객체나 배열을 할당하여 방어 코드를 작성합니다. const { name } = data || {};

Falsy 값과 기본값 설정의 주의점

구조 분해 할당의 기본값은 오직 대상 값이 undefined일 때만 적용됩니다. null, 0, ""(빈 문자열), false와 같은 Falsy 값은 유효한 값으로 간주되어 기본값이 무시됩니다.

const user = { nickname: null };
const { nickname = 'Guest' } = user;

console.log(nickname); // 'Guest'가 아닌 null 출력

따라서 null까지 포함하여 기본값을 적용하고 싶다면, 할당 후 논리 연산자(||)나 널 병합 연산자(??)를 별도로 사용해야 합니다.

배열 vs 객체 구조 분해 차이점 요약

특징	배열 구조 분해	객체 구조 분해
기준	인덱스(순서) 기반	키(이름) 기반
변수명	자유롭게 지정 가능	기본적으로 키 이름과 일치해야 함
순서 영향	순서가 바뀌면 다른 값이 할당됨	순서와 상관없이 키 이름으로 매칭됨
기호	대괄호 `[]` 사용	중괄호 `{}` 사용

📝 마크다운 원본

이 문서의 마크다운 원본 내용입니다.

# 구조 분해 할당 (Destructuring Assignment)

구조 분해 할당은 배열과 같은 반복 가능한(iterable) 객체 및 일반 객체의 패턴을 이용하여 그 값을 개별 변수에 효율적으로 분리하여 할당하는 JavaScript의 표현식입니다.

## 개요
구조 분해 할당은 ECMAScript 2015(ES6)에서 처음 도입되었습니다. 이전의 JavaScript에서는 배열이나 객체의 내부 값에 접근하기 위해 인덱스(`array[0]`)나 점 표기법(`object.property`)을 반복적으로 사용해야 했으며, 이는 코드가 길어지고 가독성을 떨어뜨리는 원인이 되었습니다.

구조 분해 할당을 사용하면 단 한 줄의 코드로 여러 개의 변수를 선언하고 값을 할당할 수 있어, 코드의 간결함이 비약적으로 향상됩니다. 특히 API 응답 데이터와 같이 복잡한 계층 구조를 가진 데이터를 다룰 때 매우 유용합니다.

## 배열 구조 분해 할당
배열 구조 분해 할당은 배열의 **순서(index)**를 기준으로 값을 추출합니다.

### 기본 문법 및 건너뛰기
배열의 요소 순서에 맞춰 변수를 배치하면 해당 위치의 값이 자동으로 할당됩니다. 특정 요소를 무시하고 싶을 때는 쉼표(`,`)를 사용하여 빈 공간을 둡니다.

```javascript
const colors = ['red', 'green', 'blue'];

// 기본 할당
const [first, second, third] = colors; 
console.log(first); // 'red'

// 특정 요소 건너뛰기 (두 번째 요소 무시)
const [primary, , tertiary] = colors;
console.log(primary);  // 'red'
console.log(tertiary); // 'blue'
```

### 기본값 설정 및 나머지 패턴
추출하려는 요소가 `undefined`일 경우를 대비해 기본값을 설정할 수 있습니다. 또한, 나머지 연산자(`...`)를 사용하여 남은 요소들을 새로운 배열로 묶을 수 있습니다.

```javascript
const settings = [10, 20];

// 기본값 설정: 세 번째 요소가 없으므로 30이 할당됨
const [width, height, depth = 30] = settings;

// 나머지 패턴 (Rest syntax)
const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]
```

## 객체 구조 분해 할당
객체 구조 분해 할당은 순서가 아닌 **속성 키(property key)**를 기준으로 값을 추출합니다.

### 속성 추출 및 변수명 변경
객체 내의 키 이름과 동일한 이름의 변수를 선언하여 값을 가져옵니다. 만약 다른 이름의 변수에 할당하고 싶거나, 이미 선언된 변수와 이름이 충돌하는 경우에는 콜론(`:`)을 사용하여 별칭(Alias)을 지정함으로써 해결할 수 있습니다.

```javascript
const user = { id: 1, name: 'Alice', email: 'alice@example.com' };
const existingName = 'Bob';

// 기본 속성 추출
const { name, email } = user;

// 변수 이름 변경 및 충돌 해결 (name 키의 값을 userName 변수에 할당)
const { name: userName, id: userId } = user;
console.log(userName); // 'Alice'
```

### 기본값 및 중첩 객체 구조 분해
객체에 해당 키가 존재하지 않을 때 사용할 기본값을 지정할 수 있으며, 객체 내부의 객체(중첩 구조) 또한 한 번에 분해할 수 있습니다.

```javascript
const member = {
  info: { city: 'Seoul', zip: '12345' },
  level: 1
};

// info 객체 내부의 city, country를 추출하고, 최상위의 grade를 추출함
const { 
  info: { city, country = 'Korea' }, 
  grade = 'Silver' 
} = member;

console.log(city);    // 'Seoul'
console.log(country); // 'Korea' (기본값 적용)
console.log(grade);   // 'Silver' (기본값 적용)
```

## 주요 활용 사례

### 함수 파라미터에서의 활용 (옵션 객체 패턴)
함수에 많은 인자를 전달해야 할 때, 인자의 순서를 기억하는 대신 객체 하나를 전달하고 내부에서 구조 분해를 수행하는 패턴이 널리 쓰입니다.

```javascript
// 옵션 객체 패턴
function createProfile({ name, age, hobby = 'Reading' }) {
  console.log(`${name}(${age})님의 취미는 ${hobby}입니다.`);
}

createProfile({ name: '철수', age: 25 }); // '철수(25)님의 취미는 Reading입니다.'
```

### 가변 인자 함수와의 결합
나머지 매개변수(`...args`)와 구조 분해 할당을 결합하면, 가변적인 인자 중 첫 번째 인자만 따로 분리하고 나머지를 배열로 처리하는 효율적인 로직을 짤 수 있습니다.

```javascript
function sumAll(first, ...others) {
  console.log(`첫 번째 값: ${first}`);
  console.log(`나머지 합계: ${others.reduce((a, b) => a + b, 0)}`);
}

sumAll(10, 20, 30, 40); 
// 첫 번째 값: 10 / 나머지 합계: 90
```

### 변수 값 교환 (Swap)
임시 변수(`temp`) 없이 두 변수의 값을 즉시 교환할 수 있습니다.

```javascript
let a = 1;
let b = 2;
[a, b] = [b, a]; // a=2, b=1
```

### 함수 반환값의 구조 분해
함수가 배열이나 객체를 반환할 때, 호출부에서 즉시 구조 분해하여 필요한 값만 추출할 수 있습니다. 이는 React의 `useState` 훅과 같은 패턴에서 매우 흔하게 사용됩니다.

```javascript
function useSomething() {
  return ['someValue', (val) => console.log(`Setting value to ${val}`)];
}

const [value, setValue] = useSomething();
console.log(value); // 'someValue'
setValue('newValue'); // 'Setting value to newValue'
```

### 기존 방식 vs 구조 분해 할당 비교

| 구분 | 기존 방식 (Traditional) | 구조 분해 할당 (Destructuring) | 비고 |
| :--- | :--- | :--- | :--- |
| **배열 접근** | `const a = arr[0]; const b = arr[1];` | `const [a, b] = arr;` | 인덱스 기반 추출 |
| **객체 접근** | `const name = obj.name; const age = obj.age;` | `const { name, age } = obj;` | 키 기반 추출 |
| **값 교환** | `let t = a; a = b; b = t;` | `[a, b] = [b, a];` | 임시 변수 불필요 |
| **함수 인자** | `function f(name, age, city) { ... }` | `function f({ name, age, city }) { ... }` | 인자 순서 무관 |

## 주의 사항 및 제약 조건

### TypeError 발생 가능성
구조 분해 할당의 대상이 `null`이나 `undefined`인 경우, JavaScript 엔진은 해당 값에서 속성을 추출할 수 없으므로 `TypeError`를 발생시킵니다.

```javascript
// 1. null 대상 구조 분해
const dataNull = null;
const { name } = dataNull; // TypeError: Cannot destructure the 'null' object

// 2. undefined 대상 구조 분해
const dataUndef = undefined;
const [first] = dataUndef; // TypeError: dataUndef is not iterable
```
**해결책:** 기본값으로 빈 객체나 배열을 할당하여 방어 코드를 작성합니다.
`const { name } = data || {};`

### Falsy 값과 기본값 설정의 주의점
구조 분해 할당의 기본값은 오직 대상 값이 **`undefined`일 때만** 적용됩니다. `null`, `0`, `""`(빈 문자열), `false`와 같은 **Falsy 값**은 유효한 값으로 간주되어 기본값이 무시됩니다.

```javascript
const user = { nickname: null };
const { nickname = 'Guest' } = user;

console.log(nickname); // 'Guest'가 아닌 null 출력
```
따라서 `null`까지 포함하여 기본값을 적용하고 싶다면, 할당 후 논리 연산자(`||`)나 널 병합 연산자(`??`)를 별도로 사용해야 합니다.

### 배열 vs 객체 구조 분해 차이점 요약

| 특징 | 배열 구조 분해 | 객체 구조 분해 |
| :--- | :--- | :--- |
| **기준** | 인덱스(순서) 기반 | 키(이름) 기반 |
| **변수명** | 자유롭게 지정 가능 | 기본적으로 키 이름과 일치해야 함 |
| **순서 영향** | 순서가 바뀌면 다른 값이 할당됨 | 순서와 상관없이 키 이름으로 매칭됨 |
| **기호** | 대괄호 `[]` 사용 | 중괄호 `{}` 사용 |

AI 생성 콘텐츠 안내

이 문서는 AI 모델(gemma-4-31b)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

위키너와나