Destructuring

📌 Destructuring 문법이란?

Array, Object내 자료들을 각각 분리해 변수들에 일괄 할당하고 싶을때 사용하는 문법이다.

📌 Array의 Destructuring

✔️ 사용법

한쪽 항에 변수선언과 동시에 변수명들을 array로 묶어 위치시킨다. 다른 항에 각 변수에 할당할 값을 가진 배열을 쓴다. 이 때 배열의 길이는 동일해야 한다.(그렇지 않으면 해당 변수의 값은 undefined됨)

var [a, b, c] = [2, 3, 4]

✔️ default 값 설정

좌우 배열의 길이가 다를 때를 대비해 특정 변수에 default값을 설정할 수도 있다.

var [d, e, f = 10] = [5, 6]

📌 Object의 Destructuring

✅ object내 자료 > 변수 할당하기

✔️ 사용법

좌항에 변수명을 중괄호로 묶어 선언한다. 이때 우항의 object의 key명과 동일하게 변수명을 지어준다.

(Array와 달리 순서는 달라도 상관 없음)

var { age, name } = { name : 'kim', age : 30 };

✔️ 기본값 설정, key 변경

🔖 key 이름 변경하기
object의 key명을 변수명으로 하고 싶지 않은 경우, 변수명을 지정할 수도 있다.
변수 선언부에 변수명 : 변경할 이름

var { name : 이름 , age } = { name : 'kim', age : 30 };

🔖 기본값 설정
변수에 할당할 key값 없을 때 할당할 기본값 설정할 수 있다.
변수 선언부에 변수명 = (기본값)

var { name = 'park', age } = { age : 30 };

✅ 변수 > object내 할당하기

기본 javascript 문법에서 축약 가능하다 (key와 변수명 같을 경우만)

var name = 'kim';
var age = 30;

var obj = { name : name, age : age }
// 기존 문법
var obj = { name, age }
// ES6 문법

📌 함수/메서드 파라미터에 Array, Object 한 번에 넣기

파라미터에 var = 가 생략되어 있다고 생각하기

✔️ object

var obj2 = { name: 'lee', age: 20 };

 function fx({ name, age }) {
    console.log(name)
    console.log(age)
  }

fx(obj2)
// 결과 : 콘솔에 'lee', 20 출력

✔️ Array

function gx([name, age]) {
      console.log(name)
      console.log(age)
    }
gx(['choi', 10])

// 결과 : 콘솔에 'chio', 10 출력