36장 디스트럭처링 할당

• 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화)하여 1개 이상의 변수에 개별적으로 할당하는 것

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

1.1 배열 디스트럭처링 사용법

• 기본 사용법

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

// 우변은 이터러블이어야 한다
const [x,y]; // SyntaxError
const [a,b] = {}; // SyntaxError

// 선언과 할당 분리 가능. 단 const 를 못쓰므로 권장하지 않음
let x,y;
[x,y] = [1,2];

• 배열 디스트럭처링 할당의 기준은 배열의 인덱스

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

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 2

• 기본값 설정 가능

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 요소 사용 가능

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

• 배열 디스트럭처링 활용 예시

// url을 파싱하여 protocol, host, path 프로퍼티를 갖는 객체를 생성해 반환한다.
function parseURL(url = '') {
  // '://' 앞의 문자열(protocol)과 '/' 이전의 '/'으로 시작하지 않는 문자열(host)과 '/' 이후의 문자열(path)을 검색한다.
  const parsedURL = url.match(/^(\w+):\/\/([^/]+)\/(.*)$/);
  console.log(parsedURL);
  /*
  [
    'https://developer.mozilla.org/ko/docs/Web/JavaScript',
    'https',
    'developer.mozilla.org',
    'ko/docs/Web/JavaScript',
    index: 0,
    input: 'https://developer.mozilla.org/ko/docs/Web/JavaScript',
    groups: undefined
  ]
  */

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

2. 객체 디스트럭처링 할당

---

• ES5에서는 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하려면, 프로퍼티 키를 사용해야 했다

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

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

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

• ES6에서는?

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

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

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

기본적인 사용 방법

• 기본 문법

// 기본적인 문법
const { lastName, firstName } = { firstName: 'Ed', lastName: 'Lee' };

// 우변에 객체나 객체로 평가될 수 있는 표현식(문자열, 숫자, 배열 등)을 할당해야 한다
const { lastName, firstName }; // SyntaxError: Missing initializer in destructuring declaration
const { lastName, firstName } = null; // TypeError: Cannot destructure property 'lastName' of 'null' as it is null.

// 객체 디스트럭처링에 배열을 집어넣으면 에러는 안나지만...
const { lastName, firstName } = ['Ed','Lee'];
console.log(lastName, firstName); // undefined undefined

• 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당 받으려면...

// 다음 둘은 동치다
const { lastName, firstName } = user;
const { lastName: lastName, firstName: firstName } = user;

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

console.log(fn, ln); // Ed Lee

• 변수에 기본값 설정 가능

const {firstName = 'Ed', lastName} = {lastName :'Lee'};

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

객체 디스트럭처링 할당 응용

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

const str = 'Hello';

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

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

• 객체를 인수로 전달받은 함수의 매개변수에도 사용 가능

// 디스트럭처링 X
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 ? '완료' : '비완료'} 상태입니다.`);
}
// 전달한 객체에서 필요없는 1은 생략됐다.
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 }
];

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

• 중첩 객체의 경우

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

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

• 변수에 Rest요소를 사용 가능

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