[Java Script] Destructuring 문법

 

자바스크립트에서 Array나 Object 자료형에 있는 데이터를 쉽게 꺼내고 싶을 때

destructuring 문법을 사용하면 쉽게 할 수 있습니다.

 

| 사용

1. Array 안에 있는 데이터를 변수에 담기

let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3 출력

이런 식으로 사용하면 각 변수에 배열 데이터가 담깁니다.

또한 기본값을 지정할 수도 있습니다.

let [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 1 2 3 출력

2. Object 안에 있는 데이터를 변수에 담기

let data = {
  info: {
    name: '4전',
    age: 25,
    address: {
      city: 'New York',
      state: 'NY',
      country: 'USA'
    },
    hobbies: ['reading', 'traveling', 'sports']
  },
  education: {
    degree: 'Master',
    field: 'Computer Science'
  }
};

let { 
  info: { 
    name, 
    age, 
    address: { city, state, country }, 
    hobbies: [hobby1, hobby2, hobby3] 
  }, 
  education: { degree, field } 
} = data;

console.log(name, age, city, state, country, hobby1, hobby2, hobby3, degree, field);

이런 식으로 사용하면 각 변수에 객체 데이터가 담겨서 출력이 됩니다.

또한 기본값을 지정할 수도 있습니다.

let { name, age, height = 175 } = { name : 'lee', age : 25 };
console.log(name, age, height); // 'lee' 25 175 출력

3. 변수를 Object 안에 넣기

let name = 'lee';
let age = 25;

let object = { name, age }

이런 식으로 변수를 Object안에 넣을 수 있습니다.

4. 함수 파라미터에 넣기

function 함수({name, age}){
  console.log(name);
  console.log(age);
}

let object = { name : 'lee', age : 20 };
함수(object);