디스트럭처리 할당

디스트럭처리(구조 분해) 할당

구조화된 배열과 같은 이터러블 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. 즉, 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다.

배열 디스트럭처링 할당

// es5
const arr = [1, 2, 3]
const one = arr[0]
const two = arr[1]
const 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]; // 오류
const [a, b] = {}; // 오류 (이터러블 아니라)

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

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

위에 말한것 처럼 배열 디스트럭처링 할당의 기준은 배열의 인덱스다. 즉, 순성대로 할당된다. 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.

const [a, b] = [1];
console.log(a, b); // 1 undefined
const [c, d] = [1, 2, 3];
console.log(c, d); // 1 2
const [e, , f] = [1, 2, 3]
console.log(e, f); // 1 3

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

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

배열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용하다.
URL 을 파싱하여 protocol, host, path 프로퍼티를 갖는 객체를 생성해 반환한다.

function parseUrl(url = "") {
	const parsedUrl = url.match(/^(\w+):\/\/([^/]+)\/(.*)$/);
  	console.log(parsedUrl); // 1번 콘솔
  
  	if(!parsedUrl) return {};
  
  	const [, protocol, host, path] = parsedUrl;
  	return { protocol, host, path };
}

const parsedUrl = parseUrl('https://devloper.mozilla.org/ko/docs/Web/JavaScript');
console.log(parsedUrl); // 2번 콘솔
/*
{
	protocal: "https",
    host: "developer.mozilla.org",
    path: "ko/docs/Web/JavaScriipt
}
*/

1번 콘솔을 찍어보면 아래 사진처럼 나온다.

이렇게 나온 것을 구조 분해 할당을 해주면 2번 콘솔처럼 나온다.

배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소를 ...을 사용 할 수 있다.

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

객체 디스트럭처링 할당

ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다. 객체 디스트럭처링 할당의 대상(할당문의 우변)은 객체이어야 하며, 할당기준은 프로퍼티 키이다. 배열과 다르게, 순서는 의미 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

const user = { firstName: 'Kyungbin', lastName: 'Park' };

const { lastName, firstName } = user;
console.log(firstName, lastName); // Kyungbin Park

우변에 객체 또는 객체로 평가될 수 있는 표현식(문자열, 숫자, 배열 등) 을 할당하지 않으면 에러 !

const { lastName, firstName }; // 에러
const { lastName, firstName } = null; // 에러

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

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

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

const str = 'Hello';
const { length } = str;
console.log(length); // 5

const todo = { id: 1, content: 'HTML', completed: true };
const { id } = todo;
console.log(id); // 1

	 // 전달받은 (todo) 대신에 밑에 처럼 객체 구조분해할당을 사용하면 좀 더 간단하고 가독이 좋다.
function printTodo({ content, completed }) {
	console.log(`할일 ${content}은 ${completed ? "완료" : "비완료"} 상태입니다.`);
}
printTodo({ id: 1, content: 'HTML', completed: true });

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

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

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

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

객체 디스트럭처링 할당을 위한 변수 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 ...을 사용할 수 있다.

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

---