[JavaScript] 구조 분해 할당

1. 배열 구조 분해 할당

1-1. 기본 배열 구조 분해 할당

기존에는 배열의 특정 요소에 접근할 때 인덱스로 접근합니다.

const animals = ['강아지', '고양이', '오리'];
// 일반적인 방식: const dog = animals[0];

구조 분해 할당을 사용하면, 배열의 각 요소를 변수에 직접 할당할 수 있습니다.
예제:

// dog에는 첫 번째 요소, duck에는 세 번째 요소를 할당
const [dog, , duck] = animals;
console.log(dog, duck); // 출력: 강아지 오리

설명:

• [dog, , duck]에서 쉼표(,)는 두 번째 요소를 건너뛰겠다는 의미입니다.
• 배열의 첫 번째 값 '강아지'가 dog에, 세 번째 값 '오리'가 duck에 할당됩니다.

---

1-2. 기본값 사용하기

배열에 존재하지 않는 요소는 기본적으로 undefined가 됩니다. 이때 기본값을 지정해 줄 수 있습니다.

const fruits = ['바나나', '사과'];
// fruits 배열에는 2개의 요소만 있으므로 세 번째는 존재하지 않음
const [banana, apple = '배', lemon = '레몬'] = fruits;
console.log(banana, apple, lemon); // 출력: 바나나 사과 레몬

설명:

• apple 변수는 배열의 두 번째 요소 '사과'를 할당받습니다.
• lemon 변수는 배열에 세 번째 요소가 없으므로 기본값 '레몬'이 할당됩니다.

 

---

1-3. 나머지 요소(스프레드 연산자)를 이용한 구조 분해

스프레드 연산자(...)를 사용하여 나머지 요소들을 하나의 배열로 모을 수 있습니다.

const [dog2, ...rest] = animals;
console.log(dog2, rest); // 출력: 강아지 [ '고양이', '오리' ]

설명:

• dog2에는 배열의 첫 번째 요소가 할당되고,
• ...rest에는 나머지 요소들이 배열 형태로 저장됩니다.

---

1-4. 변수 값 교환하기

구조 분해 할당을 사용하면 임시 변수를 사용하지 않고도 두 변수의 값을 쉽게 교환할 수 있습니다.

let a = 1;
let b = 2;

// 전통적인 방법: 임시 변수를 이용
let temp = a;
a = b;
b = temp;

// 구조 분해 할당을 이용한 값 교환
[a, b] = [b, a];
console.log(a, b); // 출력: 2 1

설명:

• 배열 [b, a]를 구조 분해하여 a와 b에 각각 할당함으로써 값을 서로 교환합니다.

---

1-5. 함수의 반환값을 구조 분해 할당하기

함수가 배열을 반환할 때, 반환된 배열을 구조 분해하여 필요한 값만 바로 추출할 수 있습니다.

function getAnimals() {
  return ['강아지', '고양이', '오리'];
}
const [dog3, cat2] = getAnimals();
console.log(dog3, cat2); // 출력: 강아지 고양이

설명:

• getAnimals() 함수가 반환한 배열의 첫 번째와 두 번째 요소를 각각 dog3와 cat2에 할당합니다.

---

2. 객체 구조 분해 할당

2-1. 기본 객체 구조 분해 할당

객체의 특정 프로퍼티를 변수로 쉽게 추출할 수 있습니다.

const num = {
  c: 1,
  d: 2,
  e: 3,
  f: 4,
};

const { c, e, d } = num;
console.log(c, d, e); // 출력: 1 2 3

설명:

• 객체 num에서 프로퍼티 c, d, e의 값을 동일한 이름의 변수로 추출합니다.
• 순서는 상관없으며, 키 이름을 기준으로 매칭됩니다.

---

2-2. 변수 이름 바꾸기 (Alias)

이미 사용 중인 변수명이 있거나 다른 이름을 사용하고 싶을 때, : 뒤에 새로운 변수명을 지정할 수 있습니다.

const { c: g, d: h, e: i, f } = num;
console.log(f, g, h, i); // 출력: 4 1 2 3

설명:

• c 프로퍼티의 값은 g 변수에, d는 h 변수에, e는 i 변수에 할당됩니다.
• f는 그대로 f라는 이름으로 추출됩니다.

---

2-3. 존재하지 않는 값과 기본값

객체에 없는 프로퍼티를 구조 분해할 때 기본값을 지정할 수 있습니다.

const { j = 5, k = 6 } = num;
console.log(j, k); // 출력: 5 6

설명:

• 객체 num에는 j와 k가 없으므로, 각각 기본값 5와 6이 할당됩니다.

---

2-4. 나머지 프로퍼티 (rest 문법)를 이용한 구조 분해

특정 프로퍼티를 추출하고 나머지 프로퍼티들은 한 객체로 묶을 수 있습니다.

const { c: l, ...m } = num;
console.log(l, m); // 출력: 1 { d: 2, e: 3, f: 4 }

설명:

• c 프로퍼티는 변수 l에 할당되고,
• ...m은 나머지 프로퍼티들을 하나의 객체 m에 모읍니다.

---

3. 반복문에서 구조 분해 할당 사용하기

3-1. 기존 방식

배열의 각 요소(객체)를 순회하면서 프로퍼티에 접근하는 방법입니다.

const users = [
  { name: 'user1', age: 20 },
  { name: 'user2', age: 25 },
];

for (const user of users) {
  console.log(user.name);
}

3-2. 구조 분해 할당 방식

반복문에서 직접 객체의 특정 프로퍼티를 구조 분해하여 사용할 수 있습니다.

for (const { name } of users) {
  console.log(name);
}

설명:

• 두 방식 모두 각 객체의 name 값을 출력하지만, 구조 분해 할당을 사용하면 코드가 더 간결해집니다.

---

4. 함수 매개변수에서 구조 분해 할당

4-1. 객체를 매개변수로 전달한 후 내부에서 접근하는 방법

const user = { name: 'user3', age: 21 };

function printUser(user) {
  console.log(`${user.name}은 ${user.age}살 이에요.`);
}
printUser(user);

4-2. 매개변수 자체에서 구조 분해 할당하기

함수 선언 시, 매개변수에서 바로 필요한 프로퍼티를 추출할 수 있습니다.

function printUser2({ name, age }) {
  console.log(`${name}은 ${age}살 이에요.`);
}
printUser2(user);

설명:

• printUser2 함수는 인자로 전달받은 객체에서 name과 age를 바로 추출하여 사용합니다.
• 두 함수 모두 동일한 결과를 출력하지만, 후자는 매개변수에서 필요한 값만 선택적으로 받으므로 코드가 더 깔끔해집니다.

---

결론

구조 분해 할당은 배열이나 객체의 데이터를 쉽게 추출하고 가공할 수 있도록 도와주는 문법입니다.

• 배열 구조 분해: 특정 인덱스의 값을 변수에 할당하거나, 기본값, 나머지 요소를 쉽게 추출할 수 있습니다.
• 객체 구조 분해: 객체의 특정 프로퍼티를 변수로 추출하거나, 변수명을 바꿀 수 있고, 기본값 또는 나머지 프로퍼티를 객체로 모을 수 있습니다.
• 반복문과 함수 매개변수: 코드의 간결성과 가독성을 높여주는 효과가 있습니다.

이처럼 구조 분해 할당은 ES6 이후 자바스크립트에서 매우 유용하게 사용되는 기능으로, 코드를 더 직관적이고 유지보수하기 쉽게 만들어 줍니다.

---

// 배열 구조 분해 할당
const animals = ['강아지', '고양이', '오리'];
// const dog = animals[0]; 이런 식으로 할당 할 수도 있으나
// 일부분만 할당하기
const [dog, , duck] = animals;
console.log(dog, duck);

// 존재하지 않는 요소 = undefined, 존재하지 않는 값이라면 기본값을 가져오도록 할 수 있다.
const fruits = ['바나나', '사과'];
const [banana, apple = '배', lemon = '레몬'] = fruits;
console.log(banana, apple, lemon); // 바나나 사과 레몬

// 배열 구조 분해 할당 ... = 스프레드 연산자, 나머지 구문
const [dog2, ...rest] = animals;
console.log(dog2, rest); // 강아지 [ '고양이', '오리' ]

// 변수값 교환하기
let a = 1;
let b = 2;
// 1) 임시 변수 이용하기
let temp = a;
a = b;
b = temp;
// 2) 구조분해 할당 이용하기
[a, b] = [b, a];
console.log(a, b);

// 함수에서 반환된 배열을 구조 분해 할당하기 (리액트에서 자주 사용된다.)
function getAnimals() {
  return ['강아지', '고양이', '오리'];
}
const [dog3, cat2] = getAnimals();
console.log(dog3, cat2);

// 객체 구조 분해 할당
const num = {
  c: 1,
  d: 2,
  e: 3,
  f: 4,
};

const { c, e, d } = num;
console.log(c, d, e);
// 만약 사용중인 변수 명이라면, : newName 새로운 이름으로 할당 할 수 있다.
const { c: g, d: h, e: i, f } = num;
console.log(f, g, h, i);

// 존재하지 않는 값
const { j = 5, k = 6 } = num;

// 하나의 값과 객체 형태로 받아오기
const { c: l, ...m } = num;
console.log(c, m); // 1 { d: 2, e: 3, f: 4 }

// 반복문에서 구조분해 할당하기
const users = [
  { name: 'user1', age: 20 },
  { name: 'user2', age: 25 },
];
for (const user of users) {
  console.log(user.name);
}
for (const { name } of users) {
  console.log(name);
}
// 두 개가 같은 결과를 리턴한다.

// 함수의 매개 변수로 전달된 객체를 구조 분해 할당 하기
const user = { name: 'user3', age: 21 };

function printUser(user) {
  console.log(`${user.name}은 ${user.age}살 이에요.`);
}
// 인자를 바로 구조분해하여 할당하기
function printUser2({ name, age }) {
  console.log(`${name}은 ${age}살 이에요.`);
}
printUser(user);
printUser2(user);
// 결과는 동일하다.