[JavaScript_study] 구조 분해 할당(Destructuring assignment)

* 구조 분해 할당(Destructuring assignment)

• 데이터 뭉치(그룹화)를 쉽게 만들 수 있다.
• indexing으로 값을 가져오는게 아닌 코드상에서 좀 더 의미 있는 이름으로 변수를 지정하기
• 변수를 배열처럼 그룹을 만들고 배열을 해당 변수에 할당한다.

 

* 예시 코드

const fruits = ['사과', '키위', '딸기', '바나나'];
const [first, second, ...others] = fruits;
console.log(first);
console.log(second);
console.log(others);

const point = [1, 2];
// defalut값 지정해주기
const [y, x, z = 0] = point;
console.log(x);
console.log(y);
console.log(z);

// 배열을 return하는 함수
function createEmoji() {
  return ['apple', '🍎'];
}
const [title, emoji] = createEmoji();
console.log(title);
console.log(emoji);

const poodle = { name: 'latte', age: 20, job: 's/w engineer' };

// 방법1
// function display(person) {
//   console.log('이름', person.name);
//   console.log('나이', person.age);
//   console.log('직업', person.job);
// }
// display(poodle);
// 파라미터에 poodle를 넣게 되면 아래와 같이 파라미터가 구성된다.
// person = { name: 'latte', age: 20, job: 's/w engineer' };

// 방법2
function display({ name, age, job }) {
  console.log('이름', name);
  console.log('나이', age);
  console.log('직업', job);
}
display(poodle);
// 파라미터에 poodle를 넣게 되면 아래와 같이 파라미터가 구성된다.
// { name, age, job } = { name: 'latte', age: 20, job: 's/w engineer' };

const { name, age, job: occupation, pet = '강아지' } = poodle;
console.log(name);
console.log(age);
console.log(occupation); // job의 이름을 occupation으로 변경해줌
console.log(pet);

// 연습 Quiz
const prop = {
  name: 'Button',
  styles: {
    size: 20,
    color: 'black',
  },
};

// 이중객체 parameter를 이용해서 한번에 color값을 가져오기
// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%EC%A4%91%EC%B2%A9%EB%90%9C_%EA%B0%9D%EC%B2%B4_%EB%B0%8F_%EB%B0%B0%EC%97%B4%EC%9D%98_%EA%B5%AC%EC%A1%B0_%EB%B6%84%ED%95%B4
function changeColor({ styles: { color } }) {
  console.log(color);
}
changeColor(prop);

// spread, destructure는 실제로 많이 사용된다.