[JavaScript] 비구조화 할당(Destructuring Assignment)

JavaScript에서 비구조화 할당(Destructuring Assignment)은 배열 또는 객체의 속성을 추출하여 변수에 할당하는 기능이다.

이를 통해 코드를 간결하게 작성할 수 있으며, 변수명을 지정하여 해당 변수를 사용할 수 있다.

 

🍰 배열 비구조화 할당 예시

const arr = [1, 2, 3];

const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

위 예제에서는 배열 arr의 각 요소를 a, b, c 변수에 할당하여 출력하고 있다.

 

🍰 객체 비구조화 할당 예시

const obj = { name: "John", age: 25 };

const { name, age } = obj;

console.log(name); // "John"
console.log(age); // 25

위 예제에서는 객체 obj의 속성인 name과 age를 각각의 변수에 할당하여 출력하고 있다.

 

🍰 중첩된 객체와 배열 비구조화 할당 예시

const obj = { 
  name: "John", 
  age: 25, 
  nested: { 
    job: "developer", 
    skills: ["JavaScript", "React"] 
  } 
};

const { name, nested: { job, skills: [skill1, skill2] } } = obj;

console.log(name); // "John"
console.log(job); // "developer"
console.log(skill1); // "JavaScript"
console.log(skill2); // "React"

위 예제에서는 중첩된 객체와 배열의 속성을 비구조화 할당하여 출력하고 있다.

 

obj 객체에서 name, job, skill1, skill2 변수에 해당하는 값을 추출하여 출력하고 있고, nested 객체와 skills 배열은 obj 객체의 속성으로 중첩되어 있으며, skills 배열의 첫 번째 요소를 skill1, 두 번째 요소를 skill2 변수에 할당하여 출력하고 있다.