JavaScript - 비구조화 할당하기

비구조화 할당(Destructuring Assignment)이란 배열이나 객체의 속성을 해체하여 

그 값을 개별 변수에 담을 수 있게 하는 ECMAScript6(2015)에 추가된 자바스크립트 표현식(expression)이다. 

 

BEFORE 비구조화 할당 

원소에 별명(변수)를 붙여 따로 불러내고 싶다. (너만💛)

근데 걸림돌이 있었으니.... 변수 선언을 거쳐야 불러낼 수 있다는 거다. 그래서 다이렉트로 부를 수 있게 비구조화 할당이 나왔다.

 

AFTER 비구조화 할당

변수 선언과 객체(혹은 배열) 선언을 한방에 할 수 있다. (이젠 우리 둘이 다이렉트로 볼수있어💛)

 

배열일 때는 

const [ 변, 수, 이, 름 ] 으로 = [

    "선언해주면", "순서대로", "배열원소와", "매칭된다."

]

 

객체일 때는

- cosnt { 변수이름 } 으로 = {

      객체를 바로 선언해주면 끝!

} 

- 변수선언 된 mycar은 객체 안의 key이름인 mycar과 같도록 매칭되야 한다.

 

- 3점 표기법

{ …변수뭉텅이 } 들은 3점 표기법을 적용하여 ( 변수하나와, ...나머지뭉텅이들 } 로 분리하여 선언해줄수도 있다.

 

- 객체의 복사

객체의 복사도 3점 표기법을 적용할 수 있다. 무엇보다 강력한 점은 복사와 함께 새로운 값을 할당할 수 있다는 점이다.

let 복사본 = {

   … 원본객체,

   바뀌는 값만: 따로명시

} 

console.log(state); // {name: "foo", birth: "1995-01-01", age: 26} 

 

- 함수에 적용

함수 파라미터API 응답값을 처리하는데에 유용하게 사용된다.

 

 

 

실무 예시

(updated at 04/13/22) 

// 유저타입정보가 들어있다. user.info.userTypes 와 같은 표현이다.
const { userTypes } = user.info;   // 출력시 ['admin', 'seller', 'customer'] 가 나온다

// 객체에 위의 값을 넣어주자  
cosnt myUser = {
  info : {
    myUserType : [...(userTypes || [])] // 이런식으로 표현해서 배열 내에 넣어줄 수 있다.

    myUserType : userTypes || [] 	    // 위와 같은 표현이 되겠다.
    myUserType : user.info.userTypes || []  // 비구조화 굳이 안쓰고 이렇게 해도 같은 표현이다.
  },
}

 

 

 

 

ref: velog.io/@recordboy/ES6-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9Destructuring-Assignment#:~:text=ECMAScript6(2015)%EC%97%90%EC%84%9C%20%EC%83%88%EB%A1%9C%20%EC%B6%94%EA%B0%80,%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20%ED%91%9C%ED%98%84%EC%8B%9D(expression)%EC%9D%B4%EB%8B%A4.