요약

const [ 작명, 작명 ] = [ ... ] <- 작명은 아무렇게 해주자.
const { name, age } = { name : choi, age : 20 };
배열은 변수 작명 아무렇게나 해두 됨
오브젝트는 변수명을 key 값과 같게 해야함

변수명을 key값으로 하기 싫다면
const { name : 작명 } = { name : 'choi' }이런식으로 해주셈

Q. 반대로 변수들을 배열/ object로 만들고 싶다면?

var name = 'kim'
var age = 20;
var obj = { name, age } // {name : 'kim', age : 20} 출력 

변수명을 {} 안에 있는 key값과 맞춰야함!!!!!

var obj = {이름, age } // 에러뜸!!
 

함수 파라미터에도 default 변수 다 똑같이 적용 가능

var obj = { name : 'Kim', age : 20 };

function 함수( { name, age }){
  console.log(name);
  console.log(age);
}
함수(obj); === 함수 ( { name : 'Kim', age : 20 } ) 이것과 똑같음

따라서...
파라미터 입력 한 것들을 식으로 보면
{name, age} = { name : 'Kim', age : 20 } 이거임 


 function func({이름,나이}){
        console.log(이름, 나이,name); // name은 출력됨
    }
    var obj = { name : 'park',age : 20};
    func(obj)

    파라미터에 name, age를 정확히 기입해야 함!!

---

Array/ Object 자료형에 있는 자료들을 변수로 전부 꺼내 놓고 싶으면 어떻할까..

let a =  Array [ 0 ];
let b =  Array [ 1 ];
let c =  Array [ 2 ];
let d =  Array [ 3 ];
.
.
.     이런식의 하드 코딩은 너무 힘들다...

Destructuring

여기서 Destructuring 문법을 사용해보자
똑같이 만들어 주기일 뿐임

Array - Destructuring

const arr = [1,2,3]// Q. 각각의 요소를 변수에 담고 싶다면

// A. Destructuring 문법을 이용해보자

const [a,b,c] = arr

console.log(a,b,c) // a = 1, b = 2, c = 3

default도 줄 수 있다.

var [a,b,c] = [2,3]; // 출력 2,3,undefined 

// default 줄 수 있음
var [a,b,c = 10] = [2,3] // 출력 2,3,10 이 출력됨

Object - Destructuring

Object도 안되면 섭하지...

var obj = { name: 'kim', age: 20 };

var { name, age, 나이 } = obj; // 이렇게 모양 맞춰주셈

console.log( name, age, 나이 ) // 'kim',20, undefined

Object는 위치를 맞추기 보단 변수명을 'key'명과 '똑같이' 써야한다.

그런데 변수명 똑같이 쓰기 싫다?

var {이름 : 나이} = { 이름 : 'Park'}
console.log(나이) // 'Park'

default도 줄 수 있다.

var { name, age = 2 } = { name : 'Kim' };
// name: 'kim',age : 2 가 출력

---

역발상을 해보자 - function함수

반대로 변수들을 object에 집어넣고 싶은경우는??

var name = 'Kim';
var age = 30;

var obj = { name, age }

console.log(obj) // { name : 'Kim', age : 30 }

name : name 이렇게 key값과 value값이 동일하면
name 이렇게 하나로 생략이 가능합니다.

함수의 파라미터도 변수 만들 때 처럼 똑같이 적용 가능 함

Object-파라미터

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

var obj = { name : 'Kim', age : 20 }
함수(obj.name, obj.age);

//▲ 위의 함수()안이 지저분하고 왠지 안쓸거 같음

function 함수( { name, age }){ // 똑같이 해주면 됨
  console.log(name);
  console.log(age);
}

var obj = { name : 'Kim', age : 20 };
함수(obj); // 완전 깔끔해 짐

함수(obj) == 함수({ name : 'Kim', age : 20 }) 이것과 똑같잖슴

좀 더 보기 쉬우라고 (난 친절하니까)
{name, age} = { name : 'Kim', age : 20 } 이것과 마찬가지임
그러므로 object를 파라미터로 넣고 분할해서 넣고 싶으면 위와 같이 똑같이 key값을 넣어주면된다.

Array - 파라미터

Array로 해볼까?

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

var array = [ 'Kim', 30 ];
함수(array[0], array[1]);

//----------위처럼 해도 되지만 -----------------
 function 함수( [name, age] ){
   
  console.log(name);// 'Kim'
  console.log(age);//30
}

var array = [ 'Kim', 30 ];
함수(array); // 함수( ['Kim', 30] ); 과같은 의미

내 실력검증해볼까?

const myBody ={
  body: {
    height: 190,
    weight: 70
  },
  size: ["상의 Large", "바지 30인치"],
};

const { body : { height,weight }, size : [ top , pant ] }

console.log(height, weight, top, pant) // 190, 70, ~~