비실이의 개발 성장기

javascript 비구조화 할당(destructuring assignment) 본문

프론트엔드/javascript

javascript 비구조화 할당(destructuring assignment)

DubbingLee 2020. 6. 5. 16:22

# 비구조화 할당(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");

 

 

# 참고문서

 

구조 분해 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

developer.mozilla.org

 

 

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

0 Comments
댓글쓰기 폼