[Deep dive] 36장 디스트럭처링 할당

디스트럭처링 할당(destructuring assignment)

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

- 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 떄 유용

 

36.1 배열 디스트럭처링 할당 

 

- 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당

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

- 할당 연산자 왼쪽에 할당받을 변수를 선언해야함, 이때 변수는 배열 리터럴 형태로 선언

const arr = [1,2,3];

//변수 one,two,three를 선언하고 배열 arr을 디스트럭처링하여 할당
const [one,two,three] = arr;
console.log(one,two,three); //1 2 3

- 배열 디스트럭처링 할당을 위한 변수에 기본값을 설정 가능

//기본값
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

 

ex) URL을 파싱하여 protocol, host, path 프로퍼티를 갖는 객체를 생성해 반환

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

  if(!parsedURL) return {};

  //배열 디스트럭처링 할당을 사용하여 이터러블에서 필요한 요소만 추출
  const [,protocol,host,path] = parsedURL;
  return {protocol, host,path};
}

const parsedURL = parseURL('https://www.tistory.com/member/blog')
console.log(parsedURL);
//{ protocol: 'https', host: 'www.tistory.com', path: 'member/blog' }

- 배열 디스트럭처링 할당을 위한 변수에 Rest 요소 ...을 사용 가능

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

 

36.2 객체 디스트럭처링 할당

 

- 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당

- 객체 디스트럭처링 할당의 대상(할당문의 우변)은 객체이어야 하며, 할당 기준은 프로퍼티 키 

- 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당

- 할당받을 변수는 객체 리터럴 형태로 선언

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

//변수 lastName, firstName을 선언하고 user 객체를 디스트럭처링하여 할당
const {lastName,firstName} = user;
console.log(firstName,lastName); //Ungmo Lee

- 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당

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

//프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당
//프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당
const { lastName: ln, firstName:fn} = user;
console.log(fn,ln); //ngmo Lee

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

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

- 객체 디스트럭처링 할당은 객체를 인수로 전달받는 함수의 매개변수에도 사용 가능

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: true},
  {id:3, content:'JS', completed: true},
];

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