[자바스크립트 js] 구조 분해 Destructuring / 객체 구조 분해

  객체 구조 분해

• 객체는 배열과는 달리, index가 아니라 프로퍼티 네임으로 여러 값을을 보관한다.

const tooktak = {
	title: '뚝딱도 자바스크립트 한다',
    price: 123450000,
    memory: '789GB',
    goal: '개자이너'
};

//const title = tooktak.title;
//const goal = tooktak.goal;
const { title, goal } = tooktak

console.log(title);
console.log(goal);

//결과
//뚝딱도 자바스크립트 한다
//개자이너

 

 

• 객체에 존재하지 않는 프로퍼티 네임으로 변수가 선언 되어 있으면 undefined.
• 할당연산자를 통해서 기본값을 지정해줄 수 있다.

const tooktak = {
	title: '뚝딱도 자바스크립트 한다',
    price: 123450000,
    memory: '789GB',
    goal: '개자이너'
};

//const title = tooktak.title;
//const goal = tooktak.goal;
const { color, goal = '할 수 있다' } = tooktak

console.log(color);
console.log(goal);

//결과
//undefined / 기본값이 있으면 '할 수 있다'
//개자이너

 

 

• ...를 통해서 변수를 선언하게 되면
  앞쪽에 프로퍼티가 유효한 부분들은 할당한 다음, 남은 프로퍼티를 하나의 객체로 모아서 변수에 담을 수 있다.

const tooktak = {
	title: '뚝딱도 자바스크립트 한다',
    price: 123450000,
    memory: '789GB',
    goal: '개자이너'
};

//const title = tooktak.title;
//const goal = tooktak.goal;
const { title, ...goal } = tooktak

console.log(title);
console.log(goal);

//결과
//뚝딱도 자바스크립트 한다
//123450000, 789GB. 개자이너

 

 

• 프로퍼티를 새로운 변수 이름으로 할당 받고 싶으면 ':새로운 변수 이름'를 사용하면 된다.

const tooktak = {
	title: '뚝딱도 자바스크립트 한다',
    price: 123450000,
    memory: '789GB',
    goal: '개자이너'
};

//const title = tooktak.title;
//const goal = tooktak.goal;
const { title: motto , ...goal } = tooktak

console.log(motto);
console.log(goal);

//결과
//뚝딱도 자바스크립트 한다
//123450000, 789GB. 개자이너