배열 디스트럭처링 할당

디스트럭처링 할당은 자바스크립트에서 배열이나 객체의 속성을 분해하여 변수에 쉽게 할당할 수 있는 문법입니다.

배열 디스트럭처링 할당

배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 
이때 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스로 한다.

const arr = [1, 2, 3];

const [one, two, three] = arr;

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

배열 디스트럭처링 할당을 위해서는 좌변에는 값을 할당받을 수 있는 변수를 선언해야 하는데 이때 변수는 배열 리터럴 
형식으로 선언 되어야 한다.

할당 기준이 배열의 인덱스라고 하였지만 우변과 좌변의 개수가 일치할 필요는 없다. 없으면 없는 대로 넘치면 넘치는 대로
인덱스만큼만 할당을 받는다

const [c, d] = [1];

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

const [e, f, g] = [1, 2, 3, 4];

console.log(e, f, g); // e = 1, f = 2, g = 3

배열 디스트럭처링 할당에도  Rest파라미터를 쓸 수 있다.

const [x, ...y] = [1, 2, 3, 4, 5];

console.log(x,y); // 1 [2, 3, 4, 5]

객체 디스트럭처링 할당

객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다. 
이때 할당의 대상은 객체이어야 하며, 할당 기준은 프로퍼티의 키로 한다.

const user = { firstName: "John", lastName: "Doe" };

const { lastName, firstName } = user;
 
console.log(firstName, lastName); // John Doe

프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어지기 때문에 순서는 의미가 없다.

const user = { firstName: "John", lastName: "Doe" };

const { lastName: ln, firstName: fn } = user;

console.log(fn, ln);// John Doe

객체의 프로퍼티 키와 다른 변수이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언하면 된다.
객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 값만 추출할 수 있다.

const str = 'hello'

const { length } = str

console.log(length)// 5

const todo = { id: 1, content: 'hello', completed: false }

const { id } = todo

console.log('id:', id)// id: 1

 

function print({ content, completed }) {

  console.log(`할일 :${content}, ${completed} 상태입니다.`);
}
print({ id: 1, content: "자바스크립트 공부하기", completed: false }); 
// 할일 :자바스크립트 공부하기, false 상태입니다.

 

이런 식으로 사용할 수 있다.