[자바스크립트] 디스트럭처링 할당

디스트럭처링 할당

JS

디스트럭처링 할당은 구조화된 배열과 같은 이터러블이나 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적 할당 하는 것을 이야기합니다. 이는 배열과 같은 이터러블이나 객체 리터럴에서 필요한 값을 추출해 변수에 할당할 때 유용합니다. 이번 글에서는 디스트럭처링에 대해서 정리해보자 합니다.

배열 디스트럭처링 할당하기

ES5 에서는 구조화된 배열을 구조 분해하여 1개 이상의 변수에 할당하려면 아래와 같이 사용해야 했었습니다.

// ES5
var arr = [1, 2, 3];

var one   = arr[0];
var two   = arr[1];
var three = arr[2];

console.log(one, two, three); // 1 2 3

 

ES6 에서는 배열 디스트럭처링 할당을 통해서 각 요소를 배열로부터 추출하여 변수에 할당하는 것이 가능합니다. 배열 디스트럭처링의 할당 대상(우변)은 이터러블이어야 합니다. 할당은 순서대로 진행됩니다.

const arr = [1, 2, 3];

// ES6 배열 디스트럭처링 할당
// 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다.
// 이때 할당 기준은 배열의 인덱스다.
const [one, two, three] = arr;

console.log(one, two, three); // 1 2 3

// 우변에는 이터러블을 할당해야 한다.
const [x, y] = [1, 2];

// 이터러블을 할당하지 않을시에는 에러가 발생한다.
const [x, y]; // SyntaxError: Missing initializer in destructuring declaration
const [a, b] = {}; // TypeError: {} is not iterable

1. 개수 일치와 기본값

배열 디스트럭처링 할당은 순서대로 진행되는데 변수의 개수와 이터러블 요소 개수가 반드시 일치할 필요는 없지만 일치시켜주는것이 좋습니다. 만약 이터러블의 개수가 더 작다면 undefined 가 할당되기 때문입니다. 이때 변수에 기본값 설정이 가능하지만 기본값보다 할당된 값이 우선적으로 할당됩니다.

const [c, d] = [1];
console.log(c, d); // 1 undefined

const [e, f] = [1, 2, 3];
console.log(e, f); // 1 2

// 기본값보다 할당된 값이 우선한다.
const [e, f = 10, g = 3] = [1, 2];
console.log(e, f, g); // 1 2 3

객체 디스트럭처링 할당

ES5 에서 객체의 각 프로퍼티들을 객체로 부터 디스트럭처링해 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 합니다.

// ES5
var user = { firstName: 'Ungmo', lastName: 'Lee' };

var firstName = user.firstName;
var lastName  = user.lastName;

console.log(firstName, lastName); // Ungmo Lee

ES6 의 객체 디스트럭처링 할당은 객체로부터 프로퍼티를 추출해 1개 이상의 변수에 할당하는 것이 가능합니다. 이때 우변은 객체여야 하며 할당 기준은 배열처럼 인덱스가 아닌 프로퍼티 키입니다. 즉 순서에는 의미가 없고 선언된 변수 이름과 프로퍼티 키가 일치하면 할당됩니다.

 

const user = { firstName: 'Wonjae', lastName: 'Oh' };

// ES6 객체 디스트럭처링 할당
// 변수 lastName, firstName을 선언하고 user 객체를 디스트럭처링하여 할당한다.
// 이때 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다. 순서는 의미가 없다.
const { lastName, firstName } = user; // 아래와 똑같습니다.
// const { lastName: lastName, firstName: firstName } = user;

console.log(firstName, lastName); // Wonjae Oh

1. 다른 변수 이름으로 할당 받기

만약 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 아래와 같이 변수를 선언하면 됩니다.

const user = { firstName: 'Wonjae', lastName: 'Oh' };

// 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다.
// 프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당하고,
// 프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당한다.
const { lastName: ln, firstName: fn } = user;

console.log(fn, ln); // Wonjae Oh

2. 기본값 설정하기

배열 디스트럭처링 할당과 마찬가지로 객체 디스트럭처링 할당 또한 변수에 기본값 설정이 가능합니다.

const { firstName = 'Wonjae', lastName } = { lastName: 'Oh' };
console.log(firstName, lastName); // Wonjae Oh

const { firstName: fn = 'Wonjae', lastName: ln } = { lastName: 'Oh' };
console.log(fn, ln); // Wonjae Oh

3. 필요한 프로퍼티 값만 추출하기

객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출해서 변수에 할당하고 싶을 때 유용하게 사용이 가능합니다.

const str = 'Hello';
// String 래퍼 객체로부터 length 프로퍼티만 추출한다.
const { length } = str;
console.log(length); // 5

const todo = { id: 1, content: 'HTML', completed: true };
// todo 객체로부터 id 프로퍼티만 추출한다.
const { id } = todo;
console.log(id); // 1

4. 함수 인수로 사용하기

객체 디스트럭처링 할당은 객체를 인수로 전달받는 함수에서도 매개변수로 사용이 가능합니다. 이때 매개변수에 객체 디스트럭처링 할당을 사용하면 간단하고 가독성 좋게 표현이 가능합니다.

function printTodo(todo) {
  console.log(`할일 ${todo.content}은 ${todo.completed ? '완료' : '비완료'} 상태입니다.`);
}

printTodo({ id: 1, content: 'HTML', completed: true });
// 할일 HTML은 완료 상태입니다.

// 객체 디스트럭처링 할당을 사용하면 간단하고 가독성 좋게 표현이 가능하다.
function printTodo({ content, completed }) {
  console.log(`할일 ${content}은 ${completed ? '완료' : '비완료'} 상태입니다.`);
}

printTodo({ id: 1, content: 'HTML', completed: true });
// 할일 HTML은 완료 상태입니다.

5. 배열 디스터럭처링과의 혼용

만약 배열의 요소가 객체라면 배열 디스트럭처링 할당과 객체 디스트럭처링 할당의 혼용이 가능합니다.

const todos = [
  { id: 1, content: 'HTML', completed: true },
  { id: 2, content: 'CSS', completed: false },
  { id: 3, content: 'JS', completed: false }
];

// todos 배열의 두 번째 요소인 객체로부터 id 프로퍼티만 추출한다.
const [, { id }] = todos;
console.log(id); // 2

6. 중첩 객체에서 객체 디스트럭처링 사용하기

만약 객체가 중첩되어 있다면 아래처럼 사용 가능합니다.

const user = {
  name: 'Lee',
  address: {
    zipCode: '03068',
    city: 'Seoul'
  }
};

// address 프로퍼티 키로 객체를 추출하고 이 객체의 city 프로퍼티 키로 값을 추출한다.
const { address: { city } } = user;
console.log(city); // 'Seoul'

 

마무리

디스트럭처링 할당은 배열과 객체에서 사용이 가능합니다. 디스트럭처링 할당은 원하는 값만 추출해서 변수에 할당할 때 유용하게 동작합니다. 배열의 경우 우변이 이터러블이어야하고 객체의 경우 우변이 객체여야 하는 점을 주의하고 배열은 순서를 고려하고 객체는 프로퍼티 키를 고려한다는 점을 제대로 알고 사용하면 좋을 것 같습니다.

 

보다 더 자세한 내용은 아래 링크에서 확인 가능하고, 저 또한 내용들을 공부하며 정리하기 위한 목적으로 글을 남기는 것을 알려드립니다. 읽어주셔서 감사합니다!

출처 : https://poiemaweb.com/