비구조화 할당(구조분해)

const animal = {
  name: '멍멍이',
  type: '개'
};

const { name: nickname } = animal
console.log(nickname);​

const object = { a: 1, b: 2 };

const { a, b } = object;

console.log(a); // 1
console.log(b); // 2

비구조화 할당: 객체안에 있는 값을 추출해서 바로 선언해서 사용할 수있게 하는 형태

 

함수의 파라미터도 비구조화 할당이 가능하다

const object = { a: 1, b: 2 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);

기본값 지정도 가능하다

 

const object = { a: 1 };

function print({ a, b = 2 }) {
  console.log(a);
  console.log(b);
}

print(object);
// 1
// 2

 

:를 사용해서 animal 객체 안에 있는 name을 nickname이라고 선언

const animal = {
  name: '멍멍이',
  type: '개'
};

const { name: nickname } = animal
console.log(nickname);

 

배열의 비구조화 할당

const array = [1, 2];
const [one, two] = array;

console.log(one);
console.log(two);

배열 또한 비구조화 할당이 가능하다 또한 기본값 지정 또한 가능하다

 

 

 

깊은 값의 비구조화 할당

 

두번에 걸쳐서 비구조화할당을 통해 추출하는 방법

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const { name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted); // {name: "velopert", languages: Array[3], value: 5}

 

한번에 추출하는 방법

 

const deepObject = {
  state: {
    information: {
      name: 'velopert',
      languages: ['korean', 'english', 'chinese']
    }
  },
  value: 5
};

const {
  state: {
    information: { name, languages }
  },
  value
} = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted);