19.Destructuring - ES6

---

구조분해할당 (Destructuring)

• pattern matching 이라고 불림.

• array에 사용해서 Destructure

// arr 안에서 숫자를 꺼내서 변수에 담기 기존의 방법임
let arr = [2, 3, 4]

let a = arr[0];
let b = arr[1];


let arr1 = [2, 3, 4]
let [a, b, c] = [2, 3, 4] // 모양만 맞춰 변수를 선언하면 변수가 생김니다

// 직관적으로 변수를 만들어 쓸 수 있음
console.log(a)
console.log(b)
console.log(c)


// 만약 arr Destructuring 할때 몇개 를 빼먹는다면?

let arr1 = [2, 3, 4]
let [a, b, c = 10] = [2, 3] // 등호로 c 에다가 default 변수를 선언해서 c = 10 으로 하면 됨

console.log(a)
console.log(b)
console.log(c)

// 변수 선언만 하고 원래 undefined 가 들어갑니다

• object 데이터를 꺼내 변수를 담기

// 기존에 object 에서 name, age 꺼내서 변수를 만드는 방법
let obj = {
  name: 'Kim',
  age: 30
}

// let name = obj.name;
// let age = obj.age;


// Destructuring 를 사용해서 object 에서 변수를 만드는 방법

let {name, age} = {name : 'Kim', age : 30} // 변수명을 key 명과 똑같이 써야 합니다
// arr 와 다르게 위치를 맞주는 게 아니라 이름을 맞추는 것이라고 보면됨
console.log(name);
console.log(age);

let {name: name2} = {name : 'Kim'} // age 를 입력 안해도 default parameter 와 같이 변수 선언을 안하면 기본값이 자동으로 들어감

// 변수명을 바꾸기면 name2 로 바꿔서 사용함
console.log(name2)

• 🔷 반대로 변수들을 object 에 집어넣고 싶은 경울

let name = 'kim';
let age = 30;

// key 값과 value 값이 같을경우에는 다음과 같이 생략해서 사용할 수 있음
let obj = {
  name,
  age
}

console.log(obj)



// 함수 parameter 만들 때도 destructuring 문법 사용가능

let obj2 = {
  name: 'Park',
  age: 60
}

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

def({name: 'Kim', age: 30})

🔶 🔷 📌 🔑

Reference

• Javascript.info - https://ko.javascript.info/destructuring-assignment