[코딩애플] js part 3-1. 틀린그림 찾기능력이 향상되는 Destructuring 문법

틀린그림 찾기능력이 향상되는 Destructuring 문법

• ES6부터 추가된 문법
• =패턴 매칭
• array, object를 해체해서 쓸 수 있다.

array 데이터를 전부 변수에 담으려면?

array 하나를 만들자.

var arr = [2,3,4];

arr에 담긴 자료들이 아주 중요해서 전부 꺼내서 변수에 담고 싶다.

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

이걸 좀 더 쉽게 할 수 있는 문법이다.

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

이렇게 1) **모양만 맞춰 변수를 선언하면 변수가 생긴다**. 2) **직관적으로 변수를 만들 수 있다**.

array destructuring 할 때 몇개를 빼먹는다면

• 등호로 기본값(defaultValue) 지정 가능

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

var [a,b,c = 10] = [];
a; // undefinefd

• **변수를 선언만 하면 undefined가 들어간다**.

object 데이터를 꺼내 변수에 담으려면?

array랑 똑같다. 모양만 맞춰주면 된다.

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

근데 위치만 맞춰주면되는 array와 달리, **object는 변수명을 key명과 똑같이 써야한다**.

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

또한 **기본값 지정 가능**하다.

var {name, age = 31} = {name: 'Kim'};
age; // 31

**key값도 바꿀 수 있다**.

var {name: 이름, age = 31} = {name: 'Kim'};
이름; // 'Kim'

key값도 바꾸고 default value도 줄 수 있다.

var {name: 이름 = 'Park'} = {};

반대로 변수들을 object에 집어넣고 싶은 경우(역발상!)

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

var obj = {name: name, age: age}; // (이런거 매우 흔함)

ES6부터는 이걸 축약할 수 있는 문법을 제공한다.

var obj = {name, age};

object의 key, value 값이 동일하면 축약할 수 있다. name이란 key값을 가진 값에 name 변수가 들어가고, age란 key 값에 age 변수가 매칭해서 들어간다.

함수 파라미터 만들 때도 destructuring 문법 사용가능

object

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

function 함수(파라미터){
    console.log(파라미터);
}
함수(obj); // {name: 'Kim', age: 30}

오브젝트 전체에서 Kim만, 혹은 age만 넣고 싶다. 즉, **object 데이터들을 파라미터로 만들고 싶은 경우**에도 destructuring 문법을 사용할 수 있다.

function 함수({name, age}){
    console.log(name);
    console.log(age);
}
함수({name: 'Kim', age: 30});
// Kim
// 30

파라미터는 변수랑 똑같다. 파라미터 변수 {name, age}에 이걸 함수에 각각 대입해주세요~ 라는 의미다.

array

array도 가능하다.

function 함수([name, age]){
    console.log(name);
    console.log(age);
}
함수([1,2]);
// 1
// 2

문제

Q1. 변수를 마구 만들었는데 말입니다..

var [number, address] = [ 30, 'seoul' ];
var {address : a , number = 20 } = { address, number };

약간 복잡해서 여러분께 물어보겠습니다.

a와 address와 number라는 변수는 각각 무슨 값을 가지고 있을까요?

➡️

• a = 'seoul'
• address ='seoul'
• number = 30

왜냐하면 위 코드는 이거랑 동일하니까.

var {address : a, number = 20} = {address: 'seoul', number = 30};

Q2. 다음과 같은 Object에서 데이터를 뽑아서 변수를 만들고 싶습니다.

let 신체정보 = {
  body: {
    height: 190,
    weight: 70
  },
  size: ["상의 Large", "바지 30인치"],
};

여러분의 뛰어난 신체 정보를 담은 Object입니다.

여기서 **키, 몸무게, 상의사이즈, 하의사이즈** 정보를 각각 뽑아서 4개의 변수를 만들고 싶습니다.

어떻게 만들면 될까요?

(참고 : 데이터가 얼마나 복잡하든간에 좌우 형태를 똑같이 맞추시면 destructuring 문법으로 변수를 만들 수 있습니다.)

➡️

let {body: {height: 키, weight: 몸무게}, size: [상의사이즈, 하의사이즈]} = 신체정보