JavaScript Destructuring

JavaScript destructuring은 객체나 배열에서 원하는 값을 추출하여 변수에 할당하는 방법입니다. 이를 통해 변수를 한 번에 선언하고 할당할 수 있으며, 코드를 더 간결하고 가독성이 높게 작성할 수 있습니다.

 

객체 Destructuring

객체 destructuring은 객체의 속성을 추출하여 변수에 할당하는 방법입니다. 아래 예제는 person 객체에서 name과 age 속성을 추출하여 변수에 할당하는 예제입니다.

const myObject = {
  name: '꾸션',
  age: 20,
}

const { name, age } = myObject

console.log(name, age)
// "꾸션" 20

객체 destructuring을 할 때는 추출할 속성 이름을 중괄호({}) 안에 넣어 선언하면 됩니다. 이때 변수 이름과 속성 이름이 같다면, 아래와 같이 축약형으로 선언할 수 있습니다.

 

배열 Destructuring

배열 destructuring은 배열에서 원하는 값을 추출하여 변수에 할당하는 방법입니다. 아래 예제는 numbers 배열에서 첫 번째와 세 번째 값을 추출하여 변수에 할당하는 예제입니다.

const numbers = [1, 2, 3, 4, 5];

const [first, , third] = numbers;

console.log(first); // 1
console.log(third); // 3

배열 destructuring을 할 때는 추출할 값의 인덱스를 대괄호([]) 안에 넣어 선언하면 됩니다. 이때 변수 이름은 추출할 값의 순서에 따라 차례대로 선언하면 됩니다. 만약, 추출할 값 중 일부만 필요하다면, 중간에 빈 칸을 넣어 해당 값을 생략할 수 있습니다.

 

함수 Destructuring

const myObject = {
  name: '꾸션',
  age: 29,
}

function myFunction({ name, age }) {
  return `${name}: ${age}`
}

console.log(myFunction(myObject))
//"꾸션: 29"

 

Descructuring 고급

const people = {
  name: '꾸션',
  age: 29,
  hairColor: undefined,
  eyeColor: '검정',
  location: {
    city: '서울',
  },
}

const {
  name: myName,
  hairColor = '갈색',
  location: { city },
  ...otherProperties
} = people

console.log(myName, hairColor, city, otherProperties)
// "꾸션" "갈색" "서울" {age: 29, eyeColor: "검정"}

"..." 나머지 구문을 사용하여 나머지 항목을 받을 수 있습니다. (...otherProperties)