[모던 자바스크립트 Deep Dive] 36장 - 배열 디스트럭처링 할당

 

배열 디스트럭처링 할당

디스트럭처링 할당(Destructuring Assignment)은 '구조 분해 할당'이라고도 부르며, 배열이나 객체와 같은 구조화된 데이터를 해체하여 각각의 요소나 프로퍼티를 개별 변수에 할당하는 것을 의미한다. 이 기능은 ES6에서 새롭게 도입되었으며, 특히 배열이나 객체 리터럴에서 필요한 값들만 추출하여 변수로 할당하고자 할 때 매우 유용하게 사용할 수 있다.

 

ES5에서 ES6로의 진화

기존 ES5에서는 배열의 요소들을 각각의 변수에 할당하기 위해서 배열의 인덱스를 통해 하나씩 접근해야만 했다. 이는 코드가 길어지고 가독성이 떨어지는 결과를 초래했다.

// 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에서는 배열 디스트럭처링 할당을 통해 이 과정을 훨씬 간단하고 직관적으로 표현할 수 있게 되었다. 이는 코드의 가독성을 크게 향상시키고 개발자의 생산성을 높이는데 기여했다.

// ES6
const arr = [1, 2, 3];

const [one, two, three] = arr;

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

 

배열 디스트럭처링 할당의 기본 원리와 규칙

배열 디스트럭처링 할당을 사용하기 위해서는 몇 가지 중요한 규칙들을 알아야 한다. 우선 할당 연산자 왼쪽에는 값을 할당받을 변수들을 배열 리터럴 형태로 선언해야 한다. 이는 할당 연산자 오른쪽에 위치한 배열의 각 요소들이 왼쪽의 변수들에 순서대로 할당되는 구조를 만든다.

 

할당 연산자의 오른쪽에는 반드시 이터러블이 와야 하며, 이를 지키지 않으면 에러가 발생한다. 예를 들어, 이터러블이 아닌 객체를 할당하거나 초기화를 하지 않은 경우에는 문법 에러나 타입 에러가 발생할 수 있다.

const [x, y]; // SyntaxError: Missing initializer in destructuring declaration
const [a, b] = {}; // TypeError: {} is not iterable

 

유연한 할당 방식

배열 디스트럭처링 할당의 가장 큰 특징 중 하나는 배열의 인덱스를 기준으로 순서대로 할당이 이루어진다는 점이다. 이때 할당받을 변수의 개수와 배열의 요소 개수가 반드시 일치할 필요는 없다. 이러한 유연성은 다양한 상황에서 배열 디스트럭처링을 활용할 수 있게 해준다.

// 변수가 더 많은 경우
const [c, d] = [1];
console.log(c, d); // 1 undefined

// 배열 요소가 더 많은 경우
const [e, f] = [1, 2, 3];
console.log(e, f); // 1 2

// 일부 요소를 건너뛰는 경우
const [g, , h] = [1, 2, 3];
console.log(g, h); // 1 3

 

기본값 설정 메커니즘

배열 디스트럭처링 할당에서는 변수에 기본값을 설정할 수 있는 기능을 제공한다. 이는 배열의 요소가 undefined일 경우를 대비하여 안전한 값을 할당할 수 있게 해준다. 기본값 설정 시에는 할당될 값이 undefined인 경우에만 기본값이 적용되며, null을 포함한 다른 falsy 값들은 그대로 할당된다.

// 기본값 설정의 다양한 예시
const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 1 2 3

// 기본값과 할당값의 우선순위
const [e, f = 10, g = 3] = [1, 2];
console.log(e, f, g); // 1 2 3

 

Rest 요소를 활용한 나머지 요소 할당

배열 디스트럭처링 할당에서는 Rest 요소를 사용하여 명시적으로 할당되지 않은 나머지 요소들을 한 번에 배열로 할당받을 수 있다. Rest 요소는 반드시 마지막 위치에서만 사용할 수 있으며, 이를 통해 나머지 모든 요소들을 하나의 배열로 묶어 할당받을 수 있다.

const [x, ...y] = [1, 2, 3, 4, 5];
console.log(x, y); // 1 [2, 3, 4, 5]

 

활용 예시

배열 디스트럭처링 할당은 실제 프로그래밍에서 다양하게 활용될 수 있다. 특히 URL을 파싱하여 각 구성요소를 분리하는 경우와 같이 문자열을 여러 부분으로 분해해야 하는 상황에서 매우 유용하다.

function parseURL(url = '') {
  // URL을 프로토콜, 호스트, 경로로 분해하는 정규표현식
  const parsedURL = url.match(/^(\w+):\/\/([^/]+)\/(.*)$/);
  
  if (!parsedURL) return {};

  // 배열 디스트럭처링 할당을 통해 필요한 부분만 추출
  const [, protocol, host, path] = parsedURL;
  return { protocol, host, path };
}

const parsedURL = parseURL('https://developer.mozilla.org/ko/docs/Web/JavaScript');
console.log(parsedURL);
/*
{
  protocol: 'https',
  host: 'developer.mozilla.org',
  path: 'ko/docs/Web/JavaScript'
}
*/

이처럼 배열 디스트럭처링 할당은 배열의 요소를 편리하게 분해하여 변수에 할당할 수 있게 해주는 강력한 기능이다. 특히 복잡한 데이터 구조에서 필요한 값만 추출하거나, 함수의 반환값을 구조화하여 처리하는 경우에 매우 효과적으로 사용할 수 있다. 또한 기본값 설정이나 Rest 요소 활용 등 다양한 옵션을 통해 더욱 유연하고 안전한 코드 작성이 가능하다.

 

객체 디스트럭처링 할당

자바스크립트에서 객체 디스트럭처링 할당은 ES6에서 새롭게 도입된 문법으로, 객체의 프로퍼티들을 각각의 변수로 분해하여 할당하는 기능을 제공한다. 이는 코드를 더 간결하고 가독성 있게 만드는데 큰 도움을 준다.

 

ES5와 ES6의 차이점

ES5에서는 객체의 프로퍼티를 개별 변수에 할당하기 위해 다음과 같이 각각의 프로퍼티에 직접 접근해야 했다.

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

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

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

반면 ES6에서는 객체 디스트럭처링 할당을 통해 이 과정을 훨씬 간단하게 표현할 수 있게 되었다.

// ES6
const user = { firstName: 'Ungmo', lastName: 'Lee' };

const { lastName, firstName } = user;

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

 

객체 디스트럭처링 할당의 기본 원리

배열 디스트럭처링 할당과는 달리, 객체 디스트럭처링 할당에서는 순서가 무의미하다. 대신 프로퍼티 키를 기준으로 할당이 이루어진다. 즉, 선언된 변수 이름과 객체의 프로퍼티 키가 일치하는 값을 찾아 할당하는 방식으로 동작한다.

 

할당을 위해서는 변수를 객체 리터럴 형태로 선언해야 하며, 우변에는 객체나 객체로 평가될 수 있는 표현식이 와야 한다. 그렇지 않으면 에러가 발생한다.

const { lastName, firstName }; // SyntaxError
const { lastName, firstName } = null; // TypeError

 

다양한 할당 패턴

객체 디스트럭처링은 여러 가지 유용한 패턴을 제공한다.

변수 이름 변경

const user = { firstName: 'Ungmo', lastName: 'Lee' };

const { lastName: ln, firstName: fn } = user;
console.log(fn, ln); // Ungmo Lee

객체의 프로퍼티 키와 다른 이름의 변수를 사용하고 싶을 때는 콜론(:)을 사용하여 새로운 변수 이름을 지정할 수 있다.

 

기본값 설정

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

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

변수에 기본값을 설정할 수 있어 프로퍼티가 undefined인 경우에도 안전하게 값을 할당할 수 있다.

 

중첩 객체 분해

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

const { address: { city } } = user;
console.log(city); // 'Seoul'

객체 안에 중첩된 객체가 있는 경우에도 디스트럭처링을 사용할 수 있다.

 

Rest 프로퍼티

const { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 { y: 2, z: 3 }

Rest 프로퍼티를 사용하면 명시적으로 추출한 프로퍼티 이외의 나머지 프로퍼티들을 하나의 객체로 수집할 수 있다. Rest 프로퍼티는 반드시 마지막에 위치해야 한다.

 

활용 예시

객체 디스트럭처링은 실제 개발에서 다양하게 활용될 수 있다.

함수 매개변수로의 활용

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

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

객체를 함수의 인수로 전달할 때 필요한 프로퍼티만 추출하여 사용할 수 있다.

 

배열의 객체 요소 다루기

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

const [, { id }] = todos;
console.log(id); // 2

배열의 요소가 객체인 경우, 배열 디스트럭처링과 객체 디스트럭처링을 함께 사용할 수 있다. 

 

API 응답 처리

const response = {
  data: {
    items: [
      { id: 1, name: 'JavaScript' }
    ]
  }
};

const { data: { items: [{ id }] } } = response;
console.log(id); // 1

 

API 응답으로 받은 객체에서 필요한 데이터만 추출할 때 유용하게 사용할 수 있다.

 

 

요약

디스트럭처링 할당 개요

• 디스트럭처링 할당은 ES6에서 도입된 문법으로, 구조화된 배열이나 객체를 분해하여 변수에 개별적으로 할당하는 것이다.
• 배열이나 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

배열 디스트럭처링 할당

• ES6에서는 배열의 요소를 개별 변수에 간편하게 할당할 수 있게 되었다.
• 할당 연산자 왼쪽에는 배열 리터럴 형태로 변수를 선언해야 한다.
• 할당 기준은 배열의 인덱스이며, 순서대로 할당된다.
• 변수의 개수와 배열 요소의 개수가 일치하지 않아도 된다.
• 변수에 기본값을 설정할 수 있다.
• Rest 요소(...)를 사용하여 남은 요소들을 배열로 할당받을 수 있다.

객체 디스트럭처링 할당

• 객체의 프로퍼티를 변수에 개별적으로 할당할 수 있다.
• 할당 기준은 프로퍼티 키이며, 순서는 의미가 없다.
• 프로퍼티 키와 다른 변수 이름을 사용하려면 콜론(:)을 사용한다.
• 변수에 기본값을 설정할 수 있다.
• 중첩 객체의 경우에도 디스트럭처링이 가능하다.
• Rest 프로퍼티(...)를 사용하여 남은 프로퍼티들을 객체로 할당받을 수 있다.

주요 활용 사례

• 함수의 매개변수로 객체를 전달받을 때 필요한 프로퍼티만 추출할 수 있다.
• 배열의 요소가 객체인 경우 배열과 객체의 디스트럭처링을 혼용할 수 있다.
• API 응답과 같은 복잡한 객체 구조에서 필요한 데이터만 추출할 수 있다.
• URL 파싱, 문자열 분해 등 다양한 실제 프로그래밍 상황에서 활용할 수 있다.

주의사항

• 배열 디스트럭처링의 우변은 이터러블이어야 한다.
• 객체 디스트럭처링의 우변은 객체 또는 객체로 평가될 수 있는 표현식이어야 한다.
• Rest 요소나 Rest 프로퍼티는 반드시 마지막에 위치해야 한다.
• 구조화된 데이터의 분해는 코드의 간결성과 가독성을 높이는데 도움을 준다.

 

 

예상문제 [🔥]

https://github.com/junh0328/prepare_frontend_interview?tab=readme-ov-file

구조 분해 할당(디스트럭처링 할당)이 뭔가요?

구조 분해 할당은 ES6에서 도입된 문법으로, 배열이나 객체와 같이 구조화된 데이터에서 필요한 값들을 추출하여 개별 변수에 할당하는 JavaScript의 표현식입니다.

 

var user = { firstName: 'John', lastName: 'Doe' };
var firstName = user.firstName;
var lastName = user.lastName;

예를 들어, 과거 ES5에서는 객체의 프로퍼티를 변수에 할당하기 위해 각각의 프로퍼티에 일일이 접근해야 했습니다.

 

const user = { firstName: 'John', lastName: 'Doe' };
const { firstName, lastName } = user;

하지만 구조 분해 할당을 사용하면 이를 훨씬 간단하게 표현할 수 있습니다. 이는 코드의 가독성을 높이고 작성해야 할 코드의 양을 줄여주어 개발 생산성을 향상시키는 장점이 있습니다.

 

 

구조 분해 할당은 크게 어떤 종류가 있나요?

구조 분해 할당은 크게 배열 구조 분해 할당과 객체 구조 분해 할당 두 가지로 나눌 수 있습니다.

 

배열 구조 분해 할당의 경우...

const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

• 배열의 인덱스를 기준으로 순서대로 할당이 이루어집니다.
• 할당 연산자 왼쪽에 배열 형태로 변수를 선언합니다.

 

객체 구조 분해 할당의 경우...

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

• 객체의 프로퍼티 키를 기준으로 할당이 이루어지며, 순서는 상관없습니다.
• 할당 연산자 왼쪽에 객체 형태로 변수를 선언합니다.

 

두 방식 모두 다음과 같은 공통적인 특징이 있습니다.

• 기본값 설정이 가능합니다.
• Rest 문법(...)을 사용하여 나머지 요소들을 한번에 가져올 수 있습니다.
• 중첩된 구조에 대해서도 구조 분해가 가능합니다.

이러한 구조 분해 할당은 함수의 매개변수 정의, API 응답 처리, 복잡한 데이터 구조 다루기 등 실제 개발에서 매우 유용하게 사용됩니다.