[JS/문법] 비구조화 할당(구조분해)

 

 

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

const { a, b } = object;

리액트를 배우면서 가장 신기했던 문법이 비구조화 할당 문법이었습니다.

비구조화 할당 문법을 사용하면 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해줄 수 있습니다 ❗️

 

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

function print(props) {
  console.log(props.a);
  // 1
  console.log(props['b']);
  // 2
}

본래 비구조화 할당 문법을 몰랐을때는 위 코드처럼 파라미터를 사용했습니다.

인제 객체에 접근해서 값을 가져올때 . 혹은 [ ] 대신 비구조화 할당으로 바로 가져올 수 있습니다.

 

 

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

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

짜잔-!

처음 리액트의 props를 배울때 함수의 파라미터에 {}로 값을 가져올 수 있는지 의아했는데 인제는 이해가 되네요.

객체의 값을 바로 가져올 수 있는게 너무 신기하지 않나요 😆 ?

 

좀 더 공부하고 싶은 분들은 아래 링크를 참고해보세요.

https://learnjs.vlpt.us/useful/06-destructuring.html

06. 비구조화 할당 (구조 분해) 문법 · GitBook