[JS] 배열 및 객체의 분해(디스트럭처링)

배열 분해

const userNameDate = ["Max","Kim"];
const firstName = userNameDate[0];
const lastName = userNameDate[1];

 

이렇게 하면 직관적이지만 코드가 길어진다.

 

이 대신 왼쪽에 []을 놓고 상수 또는 변수를 정의하면 해당 배열을 분해해 배열 값을 가져올 수 있다.

const [firstName, lastName] = ["Max","Kim"];
console.log(firstName);
console.log(lastName);

 

 

객체 분해

const user = {
	name: "Max",
	age: 34
}

const name = user.name;
const age = user.age;

 

객체 값을 이렇게 가져올 수 있지만 이 또한 길다.

 

왼쪽에 {} 객체를 넣으면 오른쪽의 객체를 분해한다.

다만 배열과 다르게 객체에선 원하는 대로 이름을 지을 수 없고, 객체 내 정의된 필드 이름을 사용해야 한다.

원하는 이름을 사용하고 싶다면 : 콜론을 사용해 별칭을 정의할 수 있다.

const {name, age} = {
	name: "Max",
	age: 34
}

const {name: userName, age: userAge} = {
	name: "Max",
	age: 34
}

console.log(userName);
console.log(userAge);

 

 

함수 매개변수 목록 분해

함수가 객체를 포함하는 매개변수를 수락하는 경우, 객체 프로퍼티를 꺼내 로컬 범위 변수(함수 내 사용 변수)로 사용할 수 있도록 분해할 수 있다.

 

점 표기법으로 order 프로퍼티에 접근

function storeOrder(order) {
  localStorage.setItem('id', order.id);
  localStorage.setItem('currency', order.currency);
}

 

{} 객체로 전달받아 프로퍼티 접근

function storeOrder({id, currency}) {
  localStorage.setItem('id', id);
  localStorage.setItem('currency', currency);
}

storeOrder({id: 5, currency: 'USD', amount: 15.99})