객체 구조 분해 할당 (Destructuring Assignment)

1. 개념

• 구조 분해 할당은 객체나 배열의 값을 간편하게 변수에 할당할 수 있도록 해주는 문법이다.
• 이 기능을 사용하면 코드가 더 간결하고 이해하기 쉬워진다.

 

 

2. 객체 구조 분해 할당

const person = {
    name: "Alice",
    age: 25,
    job: "developer"
};

• `person`은 `name`, `age`, `job`이라는 세가지 프로퍼티를 가진 객체이다.

 

2-1. 기본적인 변수 할당

• 객체의 속성 값을 변수에 할당하려면 다음과 같이 작성한다.

const name = person.name; // name 변수에 "Alice" 할당
const age = person.age;   // age 변수에 25 할당

• 이 문장은 `person` 객체에서 `name`과 `age` 프로퍼티의 값을 각각 변수 `name`과 `age`에 할당한다.

 

 

3. 문법 구조 설명

• 구조 분해 할당의 형태: const { property1, property2 } = object;
• 중괄호 `{}`의 사용:
  • 중괄호는 객체의 속성을 지정하기 위해 사용한다.
  • 중괄호 안의 변수 이름은 객체의 속성과 일치해야 한다.

 

 

4. 할당 과정

• JavaScript는 다음과 같은 방식으로 구조 분해 할당을 수행한다.
  1) `person` 객체에서 `name` 프로퍼티의 값을 찾아 `name` 변수에 할당한다.
  2) `person` 객체에서 `age` 프로퍼티의 값을 찾아 `age` 변수에 할당한다.

 

 

5. 중복 선언이 아닌 이유

• 맨 위 코드에서 `const person`으로 `person` 객체를 선언한 후, `const { name, age } = person;`에서 `name`과 `age`라는 새로운 변수를 생성하는 것이므로 중복 선언이 아니다.
• 즉, `const { name, age } = person;`에서는 `person`을 재선언하는 것이 아니고, `person` 객체 안에서 `name`과 `age`라는 프로퍼티를 꺼내서 새로운 변수 `name`과 `age`를 선언하는 것이다.
• `name`과 `age`는 각각 `person` 객체의 속성과 같은 이름을 가지고 있지만, 별도의 새로운 변수들을 (name, age)을 생성한다.