[ 모던 자바스크립트 스터디 ] 디스트럭처링 할당

디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를

destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것이다.

 

배열 디스트럭처링 할당

 

const arr = [1, 2, 3];

const [one, two, three] = arr;

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

 

 

 

const [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 3

// 기본값 설정

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

 

 

배열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 요소만 추출해

변수에 할당하고 싶을 때 유용하다.

 

function parseURL(url = '') {
	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.mosilla.org/ko/docs/Web/Javascript');
console.log(parsedURL);

 

 

 

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

물론 Rest 요소는 반드시 마지막에 위치해야한다.

 

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

 

 

객체 디스트럭처링 할당

 

const user = {firstName: 'Bi', lastName: 'Hong'};
const {lastName, firstName} = user;

console.log(firstName, lastName); // Bi Hong

 

ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다.

 

이때 할당 기준은 프로퍼티 키다. 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

 

const user = {firstName: 'Bi', lastName: 'Hong'};

const {lastName: ln, firstName: fn} = user;
console.log(fn, ln); //Bi Hong

 

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

 

const user = {firstName = 'Bi', lastName} = {lastName: 'Hong'};

console.log(firstName, lastName); //Bi Hong

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

 

객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출해

변수에 할당하고 싶을 때 유용하다.

 

 

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

 

 

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

 

function printTodo({ content, completed }) {
	console.log(`할일 ${todo.content}은 ${todo.completed ? '완료' : '비완료'} 상태입니다.`);
}

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}
];

const [, {id}] = todos;

console.log(id); // 2

 

 

객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게

Rest 프로퍼티 ... 을 사용할 수 있다.

 

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