[Javascript] 요소 활용 총정리 ② | 구조 분해 할당

1. 구조 분해 할당?

구조 분해 할당은 쉽게 얘기해서 ES6에 추가된, 자바스크립트의 묶음 데이터를 추출한 후 특정 변수들에 한 번에 할당하는 방법을 의미하며, 이러한 방법을 이용하면 배열 및 객체의 데이터를 손 쉽게 부분 및 전체 추출하여 할당할 수 있습니다.

// 1-1 기존에 사용되던 객체 데이터 추출 방법
const person = { name: 'Re_Go', age: 30, city: 'Seoul' };
>
const name = person.name;
const age = person.age;
const city = person.city;
>
// 1-2 구조 분해 할당을 이용한 객체 데이터 추출 방법
const { name, age, city } = person;
>
>
// 2-1 기존의 배열의 특정 요소 추출법
const numbers = [1, 2, 3, 4, 5];
>
const firstNumber = numbers[0];
const secondNumber = numbers[1];
>
// 2-2 구조 분해 할당을 이용한 배열 요소 추출 방법
const [firstNumber, secondNumber] = numbers;

2. 객체와 배열의 추출 차이점

배열은 이터러블 이기도 한데요. 그래서 추출을 할 때 순서대로 추출 할 수 있는 반면, 객체의 경우 이터러블이 아니기 때문에 순서에 상관 없이 데이터가 추출 된다는 차이점을 가지고 있습니다.

어떻게 보면 객체는 구조 분해 할당에 있어서 경우가 없어 보일 수 있겠지만, 객체는 구조 분해 할당의 경우 값을 할당할 변수의 순서를 지키지 않고 키만 적으면 되는 반면, 배열의 경우 순서에 맞게 변수를 작성해야 한다는 점도 존재하긴 합니다.

// 1. 배열의 경우 추출한 데이터의 순서를 신경써주어야 합니다.
const numbers = [1, 'name', boolean];
const [c, a, b] = numbers; // 

console.log(a, b, c); // 'name', boolean, 1 출력

// 2. 객체의 경우 추출한 데이터의 순서를 굳이 신경쓸 필요가 없습니다.
const person = { name: 'Re_Go', age: 30 }; 
const { age, name } = person;

console.log(name, age); // 'Re_Go', 30 출력

또한 배열의 경우 할당 받는 변수를 일부 스킵할 경우 (콤마로 구분할 경우) 할당을 생략 처리하여 순서적으로 값이 할당되고, 객체의 경우 키의 이름을 바꿔 지정하는 것 또한 가능합니다.

// 1. 배열의 경우 콤마로 생략할 요소를 지정 가능.
const numbers = [1, 2, 3, 4, 5];
const [a, , b, , c] = numbers; // 배열 요소 중 2와 4를 제외하고 할당.

console.log(a); // 1
console.log(b); // 3
console.log(c); // 5


// 2. 객체의; 경우 할당 할 변수의 이름을 재설정 하는 것도 가능합니다.
const person = { name: 'again_go', age: 30, city: 'town' };
const { name: fullName, age: personAge, city: residence } = person; // name과 age, city의 이름을 재설정

console.log(fullName);    // 'again_go'
console.log(personAge);   // 30
console.log(residence);   // 'town'

3. 기본값 지정 방법

이러한 구조 분해 할당으로 변수들에 한 번에 값을 지정할 경우, 배열에서 추출된 요소가 할당 될 변수들의 개수에 비해 모자를 경우나, 값이 undefined일 경우 설정 되어있는 기본값으로 해당 할당 작업을 대신 처리할 수 있는데요.

이러한 기본값의 경우 배열 및 객체의 사용법이 동일하며, 앞서 말씀드린대로 undefined를 제외한 나머지 데이터 타입의 값들은 기본값이 설정되어 있을 경우에는 기본값을 대체하여 입력되므로, 기본값의 용도는 어디까지나 할당 될 값들이 모자를 경우나, 할당 되는 값이 undefined인 경우에 대비하여 사용됩니다.

객체의 경우 키 이름과 동일한 변수가 없을 때 기본값 지정으로 대신 할 수 있겠습니다.

const person = { name: 'Re_Go', age: 30, city: null, marrieage : undefined };

// 기본값이 설정된 객체 구조 분해 할당
const { name, age = 25, city = 'Unknown', marrieage , job} = person;

console.log(name); // 'Re_Go' (person 객체의 name 프로퍼티에는 정상적으로 값이 존재하므로 name에 반영.)
console.log(age);  // 25 (person에는 age의 값이 할당되어 있으므로 25를 무시하고 30을 할당)
console.log(city); // null (undefined를 제외한 값이 존재하므로 기본값을 무시하고 할당)
console.log(marrieage); // undefined (값이 undefined 이므로 amrrieage에 할당됨.)
console.log(job); // undefined (값 자체를 받지도 못했고, 기본값도 지정되어 있지 않으므로 정상적으로 undefined가 할당됨)

4. rest 연산자와의 조합

스프레드 연산자라고도 불리며, 데이터를 추출할 때 할당할 변수에 레스트 연산자를 사용하여 나머지 값을 받는 것 또한 가능합니다. 이 경우 할당 되는 요소의 개수가 할당 받는 변수의 개수에 비해 많을 때 사용되며, 이때의 형태는 배열(배열 요소의 경우) 및 객체(객체 요소의 경우)로 재할당 됩니다.

단 주의할 점은 레스트 연산자를 이용해 요소들을 받을 변수는 해당 매개변수 위치에서 마지막 자리에 와야 한다는 것입니다. 만약 처음이나 중간 자리에 지정된다면 문법 오류가 발생하니 주의해야 합니다.

// 1. 배열을 구조 분해 할당시 rest 연산자 활용법
const numbers = [1, 2, 3, 4, 5]; // 5개의 요소
const [a, b, ...restNumbers] = numbers; // a와 b에는 각각 하나의 값이, 나머지 3,4,5는 restNumbers에 '배열' 형태로 할당 됩니다.

console.log(a); // 1
console.log(b); // 2
console.log(restNumbers); // [3, 4, 5]


// 2. 객체를 구조 분해 할당시 rest 연산자 활용법
const person = { name: 'Re_Go', age: 30, city: 'Seoul', job: 'Programmer' };
const { name, age, ...otherInfo } = person;

console.log(name);       // 'Re_Go'
console.log(age);        // 30
console.log(otherInfo);  // { city: 'Seoul', job: 'Programmer' }