구조 분해 할당

숫자, 문자열 같은 원시타입의 데이터와 다르게 배열이나 객체같은 경우엔 하나의 변수에 많은 데이터가 담기다 보니까 코드가 길어지며 지저분해 질 수 있다. 그럴 때엔 깔끔한 코드, 즉 클린 코드를 만들어서 사용해야 하는데 이미 변수를 참조하는 코드가 있거나 하는 경우엔 코드 자체를 수정하는 것은 어려운 일이다.

때문에 그런 경우에도 문제 없이 클린  클린 코드(Clean Code)를 만들기 위해 사용하는 방법 중 하나가 구조 분해 할당이다.

---

구조 분해 할당(Destructuring Assignment)은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다.

분해 할당이라는 말 때문에 원본은 찢어서 재배열 하는 것처럼 보일 수 있다. 하지만 사실 분해보다는 추출에 가깝다.

 

• 원본 유지 : 구조 분해 할당은 원본 배열이나 객체를 변경하지 않고, 원본을 유지한 채로 필요한 값만 새로운 변수에 할당한다.
• 부분적 선택 : 배열이나 객체의 모든 요소를 사용하는 것이 아니라, 필요한 특정 요소 또는 속성만 선택적으로 가져올 수 있다.

const point = { x: 10, y: 20 };

// 구조 분해 할당
const { x, y } = point;

console.log(x); // 10
console.log(y); // 20

// 실제로는 다음과 같은 코드와 동일한 결과를 가집니다.
// const x = point.x;
// const y = point.y;

// 또는, 직접 값을 할당하는 것과도 동일한 결과를 가집니다.
// const x = 10;
// const y = 20;

console.log(x);
console.log(y);

 

예를 들어 point라는 배열이 있다면 point 객체의 x와 y 속성 값을 각각 x와 y 변수에 할당할 수 있다.

실제로 해당 변수는 const x = point.x; const y = point.y; 혹은 const x = 10;, const y = 20;과 동일한 결과를 가진다.
과정만 다르지 결과값 자체는 완전히 동일하다.

 

구조 분해 할당은 애로우 함수나 삼항 연산자처럼 단순히 코드 작성 방식을 간략화하여 문법적 편의를 제공하는 것이지 실제로는 새로운 변수를 선언하는 것이다. 때문에 구조 분해 할당을 사용한 변수나 새롭게 선언한 변수나 동일한 결과값을 가지는 것이다.

 

구조 분해 할당 목적

• 코드 가독성 향상 : 배열이나 객체에서 특정 값을 추출하는 코드를 간결하게 만들어 코드의 가독성을 높인다.
• 변수 선언 간소화 : 여러 변수를 한 번에 선언하고 초기화할 수 있어 코드의 길이를 줄인다.
• 함수 반환 값 처리 : 함수가 배열이나 객체를 반환할 때 반환 값을 쉽게 처리할 수 있다.

예시

1. 배열 구조 분해 할당

// 기본 사용법
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1 2 3 (const a = 1, const b = 2, const c = 3 과 동일)

// 일부 요소 건너뛰기
const [, , third] = numbers;
console.log(third); // 3 (const third = 3 과 동일)

// 나머지 요소 추출 (rest syntax)
const [first, ...rest] = numbers;
console.log(first, rest); // 1 [2, 3] (const first = 1, const rest = [2, 3] 과 동일)

// 기본값 설정
const [x, y, z = 5] = [1, 2];
console.log(x, y, z); // 1 2 5 (const x = 1, const y = 2, const z = 5 과 동일)

// 배열 요소 교환
let num1 = 10;
let num2 = 20;
[num1, num2] = [num2, num1];
console.log(num1, num2); // 20 10 (let num1 = 20, let num2 = 10 과 동일)

• // 나머지 요소 추출 (rest syntax)
• const [first, ...rest] = numbers;
  • 여기서 ...rest는 전개 연산자가 아니라 rest syntax (나머지 구문)을 사용한 것이다.
• console.log(first, rest); // 1 [2, 3] (const first = 1, const rest = [2, 3] 과 동일)

전개 연산자와 나머지 구문의 차이

전개 연산자와 rest syntax는 ... 기호를 공유하지만, 사용되는 위치와 역할이 다르다.

• 전개 연산자 (spread operator):
  • 배열이나 객체를 "펼쳐서" 개별 요소로 만든다.
  • 주로 배열이나 객체를 복사, 병합하거나 함수 호출 시 인자를 전달할 때 사용된다.
  • 배열의 전부를 사용하며, 일부를 사용하려면 slice() 메서드와 함께 사용해야한다.
•  
• Rest syntax (나머지 구문)
  • 구조 분해 할당이나 함수 매개변수에서 "나머지" 요소들을 배열로 묶는다.
  • 배열, 객체, 함수의 나머지 값들을 한개의 배열, 객체 혹은 값으로 묶는 역할을 한다.

2. 객체 구조 분해 할당

// 기본 사용법
const person = { name: "John", age: 30 };
const { name, age } = person;
console.log(name, age); 
// John 30 (const name = person.name, const age = person.age 와 동일)

// 속성 이름 변경
const { name: userName, age: userAge } = person;
console.log(userName, userAge); 
// John 30 (const userName = person.name, const userAge = person.age 와 동일)

// 기본값 설정
const { city = "Seoul" } = person;
console.log(city); 
// Seoul (const city = person.city || "Seoul" 과 유사)

// 중첩된 객체 구조 분해 할당
const user = { info: { name: "Lee", age: 25 } };
const { info: { name: infoName, age: infoAge } } = user;
console.log(infoName, infoAge); 
// Lee 25 (const infoName = user.info.name, const infoAge = user.info.age 와 동일)

// 함수 매개변수 구조 분해 할당
function printPerson({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}
printPerson(person); 
// Name: John, Age: 30 (printPerson(person) 함수에서 const {name, age} = person 과 동일)

3. 문자열 구조 분해 할당 (배열과 유사)

const str = "Hello";
const [char1, char2] = str;
console.log(char1, char2); // H e

4. Map 및 Set 구조 분해 할당

const map = new Map([['a', 1], ['b', 2]]);
for (const [key, value] of map) {
  console.log(key, value); // a 1, b 2
}

const set = new Set([1, 2, 3]);
const [first, second] = set;
console.log(first, second); // 1 2