[JS] Destructuring (구조 분해)

Destructuring?

번역 하면 구조 분해 입니다. 구조를 분해를 한다고 하는데.. 구조를 가지고 있는 배열과 객체를 확인 해보겠습니다. 아래 코드는 다들 알고 계신 배열과 객체 선언 방식이다.

const arr = ['apple','kiwi','banana'];

const person = {
  name : 'Brian',
  age : '20',
  phone: '01021430982'
}

위 코드 person에서 person 안의 name과 phone 값을 콘솔로 확인 하려면 아래와 같은 방법으로 할 것이다.

console.log(person.name);// "Brian"
console.log(person.age); //20

그런데 반복적으로 사용되고 있는 person을 뺴고 작성하면 읽기도 좋고 코드 작성 속도도 빨라질것이다. 그럼 destructuring으로 person을 빼보자

const person = {
  name : 'Brian',
  age : '20',
  phone: '01021430982'
}

const {name, age} = person;

console.log(person.name); //"Brian"
console.log(person.age); //20

위 코드와 같이 {} 중괄호(mustach) 를 이용해서 person 안에 있는 변수을 감싸준다.

reference : 드림코딩👍