[JavaScript] 배열과 객체의 구조분해할당

이번 글은 배열과 객체의 구조분해할당에 대한 글이다.

 

---

 

 

[ 배열의 구조분해할당 ]

배열의 구조분해할당은 함수에 여러 개의 인수를 전달할 때 사용된다.

 

아래 예제의 형태라면 one에 1, two에 2, three에 3이 할당되는데 변수 four는 할당되는 값 없이 남게 된다.

그럼 변수 four는 undefined로 출력된다.

let arr = [1, 2, 3];
let [one, two, three, four] = arr;

 

남는 변수는 이런식으로 기본 값을 설정해줄 수 있다.

let [one, two, three, four=4] = arr;

 

 

---

 

[ 객체의 구조분해할당 ]

객체의 구조분해할당이란 아래 예제와 같다.

할당되지 않은 변수 extra는 undefined로 출력되는 것을 확인할 수 있다.

name이라는 키 이름 말고 id라는 이름으로 할당받고 싶다면 name:id와 같이 표시해주어야한다.

let person = {
  name: "황서영",
  age: 24,
};

let {
  name,
  age,
  extra,
} = person;

결과값

 

 

 

[ 객체 구조분해할당으로 함수의 매개변수 받는 법 ]

아래 코드는 함수 func()의 매개변수로 객체 person의 값을 가져오는 방법이다.

함수 func() 안에 객체 person을 넘겨주었기 때문에 매개변수로 객체의 프로퍼티를 가져올 수 있는 것이다.

const func = ({ name, age, extra }) => {
  console.log(name, age, extra);            
};

func(person);

결과값

 

 

---