구조분해할당

구조분해할당

• JavaScript에서 많이 쓰이는 객체와 배열의 속성을 분해하여 그 값을 개별 변수에 담는 기능

• 원본데이터는 변화되지 않음

배열의 구조분해할당

• 순서 중요!

숫자 또는 문자들로 이루어진 배열이 존재

const arr = [ "a", "b", "c" ]

새로운 변수 선언를 선언하여 구조분해할당을 통해 할당

• firtst 에는 arr [0] 할당
• second 에는 arr[1] 할당
• third 에는 arr[2] 할당

let [first, second, third] = arr
console.log(first) // "a"
console.log(second) // "b"
console.log(thire) // "c"

만약, 새로운 변수를 선언하여 할당할때에

변수가 더 많을 경우 : 값이 없는 변수는 undefined
변수가 더 적을 경우 : 할당되지 않음

• 많을 경우 :

let [first, second, third] = [ "a", "b" ]
console.log(first) // "a"
console.log(second) // "b"
console.log(third)  // undefined

⇒ third는 할당할 값이 없기에 undefined 값이 반환되는것

• 적을경우 :

let [first, second] = ["a", "b", "c"]
console.log(first) // "a"
console.log(second) // "b"

⇒ "c" 는 할당되지 않음

또한, 할당하고 싶지 않은 값은 ( , ) 를 사용하여 비워둘수 있음

할당하고 싶지 않은 값이 있을 경우 :

let [first, second, third, fourth ] = [ "a", "b" , , "d"]
console.log(first) // "a"
console.log(second) // "b"
console.log(fourth)  // "d"

객체의 구조분해할당

• 객체의 키 값과 변수명 일치 중요!

객체가 존재

const obj = {
  name: '짱구',
  age : 10 ,
  hobby: '게임'
}

새로운 변수를 선언하여 구조분해할당을 통해 할당

let { name, age, hoggy } = obj
console.log(name) // '짱구'
console.log(age) // 10 
console.log(hobby) // '게임'

⇒ 새로 할당하려는 변수의 이름 name 과 obj 객체의 key인 name이 같기 때문에 그 key의 value 값인 "짱구" 가 들어가게되는것

객체의 키 값과 변수명이 일치해야지만 구조분해할당이 이루어지는데
만약, 변수명을 바꾸고 싶을경우 원하는 변수명을 재할당 하면됨

변수명을 바꾸고 싶은 경우 :

const obj = {
  name: '짱구',
  age : 10 ,
  hobby: '게임'
} 
let { age : number } = obj
console.log(number) // 10
console.log(age) // 정의되지 않은값이라는 에러 발생