구조분해할당(Destructuring)

배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 할당 할 수 있게 하는 javascript표현식으로 클린코드를 위해 많이 사용된다.

함수에 객체나 배열을 전달해야 하는 경우, 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우일 때 데이터를 분해하여 새로운 변수에 할당해서 사용 할 수 있다.

선언 된 객체의 데이터 타입에 맞게 Object는 {}, Array는 []을 사용한다.

🔗 객체 구조분해할당

선언 되어있는 객체의 값을 필요로하여 구조분해된 내용을 변수로 만들어 활용한다.

  const user = {
    name: "sumin",
    age: "10",
  }
  const { name: nickName, age } = user
  console.log(nickName) // sumin

user 객체에 있는 name을 nickName 변수로 사용 할 수 있다.

📌 깊게 들어간 객체 구조분해할당

  const user = {
    name: "sumin",
    age: "10",
    info: {
      email: "tnalsdl2046@gmail.com",
      address: "USA",
    },
  }
  const { info: { email, address, phone = "010-1234-5678" } } = user
  console.log(email, address, phone)
  // tnalsdl2046@gmail.com USA 010-1234-5678

user의 info안에 있는 정보들만 빼올 수 있고, 추가로 지정되어있지 않은 키값을 추가 할 수 있다.

🔗 배열 구조분해할당

값이 할당되어있는 변수나 선언된 변수에 새로운 값을 배열 구조분해할당 방식으로 할당해줄 수 있다.

  let a = 0
  let b
  ;[a, b] = [10, 20]
  console.log(a) // 10
  console.log(b) // 20

📌 로직 단축

  const week = ["monday", "tuesday", "wednesday"]
  
  const day1 = week[0]
  const day2 = week[1]
  const day3 = week[2]
  
  console.log(day1, day2, day3)

위에 코드는 구조분해할당을 사용하지 않고 week배열의 원하는 인덱스를 선언하여 값을 가져오고 있다. 하지만 위와 같은 방법을 사용하면 로직이 길어지기때문에 구조분해할당을 사용하여 긴 로직을 짧고 간결하게 쓸 수 있다.

  const week = ["monday", "tuesday", "wednesday"]

  const [day1, day2, day3] = week
  
  console.log(day1, day2, day3)

첫번째 코드와 같은 값을 출력하지만 구조분해할당을 사용하면 3줄을 1줄코드로 단축 할 수 있다.

📌 배열 원하는 값만 구조분해할당

  const number = [1, 2, 3, 4, 5]
  const [, , three, , five] = number
  console.log(three) // 3
  console.log(five) // 5 

number 원하는 값의 인덱스만 새로운 변수를 넣어주고 필요하지 않은 인덱스는 ,로 비워놓으면 된다. 배열데이터는 인덱스의 순서대로 추출된다.

📌 배열 구조분해할당으로 객체 추가

  const name = [{ firstName: "kim" }, { lastName: "sumin" }]
  const [fName, lName, nName = { nickName: "ssuman" }] = name
  console.log(nName) // nickName: 'ssuman'
  console.log(fName) // firstName: 'kim'

배열에 없는 데이터를 구조분해할당으로 추가할 수 있다.

📌 반복문을 사용한 구조분해할당

  const people = [
    { name: "sumin", age: { age1: 10, age2: 20 } },
    { name: "mango", age: { age1: 20, age2: 30 } },
  ]
  for (let { name: userName, age: { age2: userAge } } of people) {
    console.log("name: " + userName + ", age: " + userAge)
  }
  // name: sumin, age: 20
  // name: mango, age: 20

배열데이터 내부에 있는 데이터를 반복문을 사용하여 새로운 변수에 값을 할당하여 출력한다.