비실이의 개발 성장기

# 비구조화 할당(destructuring assignment) 이란?

• Destructuring 은 우리말로 '구조를 파괴하다, 분해하다' 의미를 가집니다.

• javascript 비구조화 할당은 배열이나 object 리터럴 객체를 분해한 뒤, 그 값을 변수에 할당하는 것을 말합니다.

• 비구조화 할당은 ES6 에 추가 된 문법이며, ES6 미지원 브라우저에서 사용하려면 js transpiler 를 통해 변환 해야합니다.

# 비구조화 할당 활용

• object 리터럴 객체에서 일부 속성(key) 을 할당하여 사용하고자 하는 경우

const user = {
  id: 9369,
  nickName: "2dubbing",
  fullName: {
    first: "Lee",
    last: "dubbing"
  }
};

const { fullName: { first: a, last: b } } = { ...user };
console.log(`${b} ${a}`); // dubbing Lee

const users = [
  {
    name: "Lee",
    age: 20
  },
  {
    name: "Kim",
    age: 35
  },
  {
    name: "Park",
    age: 25
  }
];

// reduce 메소드의 첫번째 인자(콜백함수) 의 두번째 인자를 비구조화 할당하여 사용
const totalAge = users.reduce((total, {name, age}) => (
  total += age
), 0);
console.log(totalAge); // 80

• React Hooks 인 useState() 가 반환하는 배열을 분해 할당하여 사용하고자 하는 경우

const [status, setStatus] = React.useState("PENDING");

# 참고문서

• Destructuring assignment - MDN web docs

# 잘못된 내용은 댓글 남겨주세요.