JavaScript 구조 분해 할당 (Destructuring Assignment) 예제로 알아 보는 다양한 활용

JavaScript에서 ES6부터 도입된 구조 분해 할당은 배열의 값이나 객체의 속성을 별개의 변수로 쉽게 할당할 수 있게 해줍니다. 예를 들어,

ES6 이전:

// 객체 속성을 변수에 할당하기
const person = {
  name: 'Sara',
  age: 25,
  gender: 'female'
};

let name = person.name;
let age = person.age;
let gender = person.gender;

console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

ES6부터는:

// 객체 속성을 변수에 할당하기
const person = {
  name: 'Sara',
  age: 25,
  gender: 'female'
};
// 구조 분해 할당
let { name, age, gender } = person;
console.log(name); // Sara
console.log(age); // 25
console.log(gender); // female

중요: 객체에서 구조 분해를 사용할 때 순서는 중요하지 않습니다.

let { age, gender, name } = person;
console.log(name); // Sara

중요: 객체를 구조 분해할 때 변수 이름은 객체의 키와 동일해야 합니다.

let { name1, age, gender } = person;
console.log(name1); // undefined

만약 객체 키에 다른 변수 이름을 할당하고 싶다면 다음과 같이 사용할 수 있습니다:

// 구조 분해 할당을 이용해 다른 변수 이름 사용하기
let { name: name1, age: age1, gender: gender1 } = person;
console.log(name1); // Sara
console.log(age1); // 25
console.log(gender1); // female

배열 구조 분해

비슷한 방식으로 배열에도 구조 분해 할당을 사용할 수 있습니다.

const arrValue = ['one', 'two', 'three'];
// 배열에서의 구조 분해 할당
const [x, y, z] = arrValue;
console.log(x); // one
console.log(y); // two
console.log(z); // three

기본값 할당
구조 분해를 사용할 때 변수에 기본값을 할당할 수도 있습니다.

let arrValue = [10];
// 기본값 5와 7을 할당하기
let [x = 5, y = 7] = arrValue;
console.log(x); // 10
console.log(y); // 7

위 예제에서 arrValue에는 단 하나의 요소만 있기 때문에:

– 변수 x는 10이 됩니다.
– 변수 y는 기본값 7을 가집니다.

객체에서 구조 분해를 할 때도 비슷한 방식으로 기본값을 전달할 수 있습니다.

const person = {
  name: 'Jack',
};
// age가 undefined일 경우 기본값 26 할당하기
const { name, age = 26 } = person;
console.log(name); // Jack
console.log(age); // 26

변수 교환

이 예제에서는 구조 분해 할당 문법을 사용하여 두 변수의 값을 교환합니다.

// 변수 교환 프로그램
let x = 4;
let y = 7;
// 변수 교환
[x, y] = [y, x];
console.log(x); // 7
console.log(y); // 4

원치 않는 항목 건너뛰기
배열에서 원치 않는 항목을 지역 변수에 할당하지 않고 건너뛸 수 있습니다.

const arrValue = ['one', 'two', 'three'];
// 배열에서의 구조 분해 할당
const [x, , z] = arrValue;
console.log(x); // one
console.log(z); // three

위 예제에서는 쉼표 구분자(,)를 사용하여 두 번째 요소를 생략합니다.

나머지 요소를 단일 변수에 할당
나머지 배열 요소를 변수에 할당하기 위해 전개 구문(…)을 사용할 수 있습니다.

const arrValue = ['one', 'two', 'three', 'four'];
// 배열에서의 구조 분해 할당
// 나머지 요소를 y에 할당하기
const [x, ...y] = arrValue;
console.log(x); // one
console.log(y); // ["two", "three", "four"]

여기서 one은 변수 x에 할당되고, 배열의 나머지 요소는 y 변수에 할당됩니다.

객체의 나머지 속성도 단일 변수에 할당할 수 있습니다.

// 구조 분해 할당을 이용해 나머지 속성을 rest에 할당하기
let { name, ...rest } = person;
console.log(name); // Sara
console.log(rest); // {age: 25, gender: "female"}

중요: 전개 구문을 사용하는 변수 뒤에는 쉼표를 사용할 수 없습니다. 전개 구문을 사용하는 이 나머지 요소(rest 요소)는 마지막 변수로 사용해야 합니다.

예를 들어,

// 에러가 발생합니다
const [ ...x, y] = arrValue;
console.log(x); // error

중첩된 구조 분해 할당

중첩된 배열 요소에 대해서도 구조 분해 할당을 수행할 수 있습니다.

// 중첩된 배열 요소
const arrValue = ['one', ['two', 'three']];
// 배열에서 중첩된 구조 분해 할당
const [x, [y, z]] = arrValue;
console.log(x); // one
console.log(y); // two
console.log(z); // three

여기서 변수 y와 z는 중첩된 요소 two와 three에 할당됩니다.

중첩된 구조 분해 할당을 수행하기 위해서는 변수를 배열 구조 내에 넣어야 합니다(대괄호 내부에 넣음).

객체 속성에 대해서도 중첩된 구조 분해 할당을 수행할 수 있습니다.

// 중첩된 구조 분해
const { name, hobbies: { read, playGame } } = person;
console.log(name); // Jack
console.log(read); // true
console.log(playGame); // true

객체에 대한 중첩된 구조 분해 할당을 수행하기 위해서는 변수를 객체 구조 내에 넣어야 합니다(중괄호 내부에 넣음).