[모던 자바스크립트 Deep Dive] 33. 디스트럭처링 할당

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

배열 디스트럭처링 할당

• 배열 디스트럭처링 할당의 대상 (할당문의 우변)은 이터러블이어야 함

const arr = [1, 2, 3];
const [one, two, three] = arr;

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

• 할당 기준은 배열의 인덱스로 순서대로 할당 됨 (변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요 X)

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

• 할당 연산자 왼쪽에 값을 할당받을 변수를 배열 리터럴 형태로 선언
• 배열 디스트럭처링 할당을 위한 변수에 기본값 설정 가능

// 기본값보다 할당된 값이 우선
const [a, b = 10, c = 4] = [1, 2];
console.log(a, b, c); // 1 2 4

• Rest 요소 ...  사용 가능 

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

• 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용

// URL 파싱 -> { protocol, host, path } 프로퍼티를 갖는 객체 생성 후 반환

function parseURL(url = "") {
  const parsedURL = url.match(/^(\w+):\/\/([^/]+)\/(.*)$/);
  console.log(parsedURL);
  // [
  //   'https://echichi.com/javascript',
  //   'https',
  //   'echichi.com',
  //   'javascript',
  //   index: 0,
  //   input: 'https://echichi.com/javascript',
  //   groups: undefined
  // ]

  if (!parseURL) return {};

  const [, protocol, host, path] = parsedURL;
  return { protocol, host, path };
}

const parsedURL = parseURL("https://echichi.com/javascript");
console.log(parsedURL); // { protocol: 'https', host: 'echichi.com', path: 'javascript' }

 

객체 디스트럭처링 할당

• 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당
• 할당 기준은 프로퍼티 키로 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당됨

var user = { firstName : 'chichi', lastName : 'E' };

/*
var firstName = user.firstName;
var lastName = user.lastName;
*/

// = const { lastName, firstName } = { firstName : 'chichi', lastName : 'E' };
const { lastName, firstName } = user

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

const { firstName : fn = 'chichi', lastName : ln } = { lastName : 'E' }

console.log(ln, fn); // E chichi

• 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용

const str = 'Echichi';

const { length } = str;
console.log(length); // 7

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

function sayHello({ name, language }){
 console.log(`${name} ${language === 'kor'? '님! 안녕하세요!' : 'Hello'}`);
}

sayHello({id :1, name : '에치치', language : 'kor'}) // 에치치님! 안녕하세요!
sayHello ({id: 2 , name : 'Echichi', language : 'Eng'}) // Echichi Hello

• 배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당 혼용 가능

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

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

• Rest 프로퍼티 ... 사용 가능

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