thumbnail
36.디스트럭처링 할당
JavaScript
2022.03.26.

제로베이스 네카라쿠배 온라인스쿨 1기 과정(2021. 11 ~ 2021. 12)에서 공부했던 Javascript Deepdive 교재의 내용 요약 및 필자의 생각을 정리한 내용입니다. 원서의 내용 챕터의 일부를 요약한 내용으로 보다 자세한 내용은 원서를 참조 바랍니다.

36장 디스트럭처링 할당

  • 디스트럭처링 할당(Destructuring assignment, 구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.
  • 배열과 같은 이터러블, 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할때 유용하다.

36.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]
const [one, two, three] = arr;

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

  • 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다.(순서대로 할당)

  • 배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 한다. 이때 변수를 배열 리터럴 형태로 선언한다.

const [x,y] = [1,2];

  • 우변에 이터러블을 할당하지 않으면 에러가 발생한다.

  • 배열 디스트럭처링 할당의 변수 선언문은 선언과 할당을 분리할 수도 있다. 하지만 이렇게 하면 const 키워드로 변수를 선언할 수 없으므로 권장되지 않는다.

  • 배열 디스트럭처링 할당의 기준은 배열 인덱스다. 이때 변수 개수와 이터러블 요소 개수가 반드시 일치할 필요는 없다.

  • 배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.

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
  • URL을 파싱하여 protocol, host, path 프로퍼티를 갖는 객체를 생성해 반환하는 예시
// url을 파싱하여 protocol, host, path 프로퍼티를 갖는 객체를 생성해 반환
function parseURL(url = '') {
  // '://' 앞의 문자열(protocol)과 '/' 이전의 '/'로 시작하지 않는 문자열(host)과
  // '/' 이후의 문자열(path)를 검색한다.
  const parsedURL = url.match(/^(\w+):\/\/([^/]+)\/(.*)$/);
  console.log(parsedURL);

  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'
}
 */

36.2 객체 디스트럭처링 할당

  • ES5에서 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 한다.
// ES5
var user = { firstName: 'Daewon', lastName: 'Seo' };

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

console.log(firstName, lastName);
  • ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다.
  • 이때 객체 디스트럭처링 할당의 대상은 객체이어야 하며, 할당 기준은 프로퍼티 키다.
  • 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.
const { lastName, firstName};

const { lastName, firstName } = null;
const user = { firstName: 'Daewon', lastName: 'Seo'}

const { lastName, firstName } = user;

const { lastName: lastName, firstName: firstName } = user;
  • 위 예제에서는 프로퍼티 축약 표현을 통해 선언했다.
const user = { firstName: 'Daewon', lastName: 'Seo'}

const { lastName: ln, firstName: fn } = user;

console.log(fn, ln); // Daewon Seo

  • 위 예제는 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받는 예시이다.

  • 객체 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.

  • 객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용하다.

  • 객체 디스트럭처링 할당은 객체를 인수로 전달받은 함수의 매개변수에서도 사용할 수 있다.

  • 배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있다.

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

const [, { id }] = todos,
console.log(id); // 2
  • 중첩 객체 예시
const user = {
	name: 'Seo',
	address: {
		zipCode: '03068',
		city: 'Seoul'
	}
};

// address 프로퍼티 키로 객체를 추출하고 이 객체의 city 프로퍼티 키로 값을 추출한다.
const { address: {city} } = user;
console.log(city);
  • 객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 …을 사용할 수 있다.
  • Rest 프로퍼티는 Rest 파라미터나 Rest 요소와 마찬가지로 반드시 마지막에 위치해야 한다.
const { x, ...rest} = {x: 1, y: 2, z:3 };
console.log(x, rest); // 1 { y: 2, z: 3};

© 2022 Developer Abel, Powered By Gatsby.