JS중급_destructuring

▶️ destructuring 문법

	var array = [2,3,4];
	var a = array[0];
	var b = array[1];

array에 있는 3개의 데이터를 전부 밖으로 꺼내서 변수에 담으려면 보통은 이렇게 사용하면 되는데, 더 쉬운 방법이 있다.

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

[2,3,4]라는 자료랑 비슷한 모양으로 변수를 선언해주면 된다. 이렇게 하면 a, b, c라는 변수 3개가 생성되는데, 각각 2,3,4라는 자료형을 가진다.

▶️ 디폴트 값을 주려면?

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

위처럼 사용하면 c라는 변수는 할당이 되지 않아 undefined가 할당돼있다.

var [a,b,c = 5 ] = [2, 3];

이를 방지 하기 위해 값이 아무것도 안들어 오는 변수들은 기본값을 가질 수 있게 만들 수 있다. 함수의 default파라미터와 비슷하다.

---

▶️ object 안에 있는 데이터를 변수에 담기

var { name : a, age : b } = {name : 'Kim', age : 30};

object도 좌우를 똑같이 맞춰주면 변수가 생성된다. 그러면 a,b 라는 변수가 생성되고 Kim 과 30이라는 자료를 할당해준다.

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

이렇게 생략해도 똑같이 할당된다.

---

▶️ 변수의 데이터를 object에 집어넣기

var name = "Kim";
var age = 30;

var obj = { name : name, age : age }

반대로 변수의 데이터를 object에 집어넣고 싶은 경우 이렇게 넣어준다.

var name = "Kim";
var age = 30;

var obj = { name, age }

destructuring 문법을 사용하면 더 간단하게 표현이 가능하다. key값과 value값이 같으면 이렇게 하나로 생략이 가능하다.

---

▶️ 파라미터에 적용하기

  function func(name, age){
      console.log(name);
      console.log(age);
  }
  var obj = {name : 'Kim', age : 20}
  func(obj.name, obj.name);

이렇게 직접 쓸 수도 있고,

  function func({name, age }){
      console.log(name);
      console.log(age);
  }
  var obj = {name : 'Kim', age : 20}
  func(obj);

destructuring 문법을 사용하면 이렇게 사용할 수 있다.

---