JavaScript - 구조분해할당(Destructuring Assignment) (14)

 

JavaScript - 구조분해할당(Destructuring Assignment)

 

1. 구조분해할당(Destructuring Assignment)란?

 - 배열이나 객체 등 복합적인 데이터 구조에서 개별 요소를 추출해 변수에 쉽게 할당하는 방법이다.

let ary = [1, 2, 3];

let [one, two, three, four = 4] = ary;
console.log(one, two, three);
console.log(one, two);
console.log(one, two, three, four);

 - 구조분해할당을 사용해 배열의 각 요소를 개별 변수로 추출할 수 있다.

 - 배열에 없는 네 번쨰 요소는 기본값인 4가 할당되고 기본값이 설정되지 않은 요소는 undefined가 추출된다.

 

 

2. 객체의 구조분해할당

 - 객체의 속성이름과 다른 변수이름으로 할당할 수 있다.

let person = {
  name: "AR",
  age: 22,
  hobby: "운동",
};

let { age: myAge, hobby, name, talk = "hello" } = person;
console.log(name, myAge, hobby, talk);

 - age: myAge는 person객체의 age속성값을 myAge변수에 할당한다.

 - talk속성은 person객체에 없기 때문에 기본값인 hello가 할당된다.

 

3. 객체 구조 분해 할당을 이용한 함수의 매개변수를 받는 방법

let person = {
  name: "AR",
  age: 22,
  hobby: "운동",
};

let { age: myAge, hobby, talk = "hello" } = person;

const func = ({ name, age: myAge, hobby, talk = "hi" }) => {
  console.log(name, myAge, hobby, talk);
};

func(person);

구조분해할당 후 함수 호출

 - func(person) 호출시 person객체에서 구조분해 할당으로 필요한 속성을 추출한뒤 name, age, hobby, talk 값을 콘솔에 출력한다.