[JS] 07. 구조 분해 할당, 선택적 체이닝

[JS] 07. 구조 분해 할당, 선택적 체이닝

 

 

 

 

📚 Table of Contents

 

 

 

 

01. 구조 분해 할당

구조 분해 할당은 배열이나 객체의 요소를 변수에 쉽게 할당할 수 있는 방법입니다.

배열 구조 분해 할당

배열의 요소를 변수에 할당할 때, 다음과 같이 작성할 수 있습니다.

const arr = [1, 2, 3, 4, 5]

//const a = arr[0]
//const b = arr[1]
//const c = arr[2]

let a, b, c, rest
;[, b, c, ...rest] = arr 
// 사용하지 않는 데이터는 쉼표로 구분

console.log(b, c) // 2 3
console.log(rest) // [4, 5]

객체 구조 분해 할당

객체의 속성을 변수에 할당할 때, 다음과 같이 작성할 수 있습니다.

const obj = {
    a: 1,
    b: 2,
    c: 3,
    x: 7
  }

  //const a = obj.a
  //const b = obj.b
  //const c = obj.c

const {x, b:y, ten = 10, ...rest} = obj

console.log(x, y, ten, rest) // 7 2 10 {a: 1, c: 3}

02. 선택적 체이닝

선택적 체이닝은 undefined나 null이 될 수 있는 객체의 프로퍼티에 접근할 때 사용합니다. 이를 통해 null 또는 undefined가 반환되는 것을 방지할 수 있습니다.

 

예를 들어, 다음과 같은 코드가 있습니다.

const userA = {
  name: 'neo',
  age: 30,
  address: {
    country: 'Korea',
    city: 'seoul'
  }
}

const userB = {
  name: 'Java',
  age: 22,
}

function getCity(user) {
  // return user.address.city -> userB 오류 발생
  return user.address?.city || '주소 없음' 
}

console.log(getCity(userA)) // seoul
console.log(getCity(userB)) // 주소 없음

 

위 코드에서 선택적 체이닝을 사용하여 user.address가 undefined인 경우, "주소 없음"을 반환합니다.

 

구조 분해 할당과 선택적 체이닝은 코드의 가독성을 높이고, 오류를 줄이는 데 큰 도움이 됩니다. 특히, 선택적 체이닝은 깊은 객체 구조에서 안전하게 프로퍼티에 접근할 수 있게 해주어, 코드의 안정성을 높입니다.