[JS] 구조분해할당 (destructuring assignment)

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

복사한 이후에 분해해준다는 의미로, 해당 과정에서 분해 대상이 수정, 파괴 되는것은 아니다.

 

배열 구조분해할당

let arr = [75, 50, 60, 100];

let [one, two, three] = arr;
console.log(one); // 75
console.log(two); // 50
console.log(three); // 60

- 배열을 한번 분해해 새로운 변수에 담아준다

- 할당 연산자의 좌측엔 객체 프로퍼티와 같이 할당할 수 있는(assignables) 것이라면 어떤 것이든 올 수 있다

 

객체 구조분해할당

const obj = {
  name : "syong",
  gender : "female",
  age : "23"
}

let {name, gender} = obj
console.log(name) // 'syong'
console.log(gender) // 'female'

- 객체의 경우 실제로 객체 안에 존재하고 있는 프로퍼티의 key를 적어주어야 대응 value를 변수에 담는다

- 프로퍼티가 없는 경우를 대비하여 할당연산자(=)를 사용해 기본값을 설정할 수 있다

- key가 아닌 별도의 변수명으로 관리하고 싶다면 콜론(:)을 사용한다

- 좌측의 패턴과 우측의 구조가 같다면 중첩 배열, 객체 등 복잡한 구조에서도 원하는 데이터를 추출할 수 있다

const obj = {
  name : "syong",
  gender : "female",
}

// 프로퍼티가 없는경우
let {age: a = 25} = obj;
console.log(a) // '25'


// 변수명
let {name: newName, gender: newGender} = obj
console.log(newName) // 'syong'
console.log(newGender) // 'female'

참고
본 글은 훈훈한 자바스크립트 강의의 내용과 참고글을 참고해 정리한 글입니다
https://ko.javascript.info/destructuring-assignment