# Destructuring 문법

Doozuu·2022년 11월 19일
0

Javascript

목록 보기
27/99

: Array, Object에 있는 중요한 자료들을 변수로 꺼내고 싶을 때 사용하는 문법


1. Array 안에 있는 데이터를 변수에 담는 방법

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

등호로 기본값 지정 가능

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

변수 선언만 하면 undefined 출력

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


2-1. Object 안에 있는 데이터를 변수에 담는 방법

변수명을 key명과 똑같이 써야함!!

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

등호로 기본값 지정가능

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

나이에 kim 저장.

var {name : 나이} = {name: 'kim'};


2-2. 변수를 object에 넣고 싶은 경우

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

var obj = { name : name, age : age};
var obj = { name, age}; // 위의 코드를 축약해서 이렇게 써도 됨.


3. 함수 파라미터 만들기

1) object

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

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

함수(obj);

2) array

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

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


예제)

문제 1.

a, address, number는 각각 무슨 값을 가지고 있을까요?

답 :
첫 줄에서 number = 30, address = seoul 이다.
두 번째 줄에서 var { address : a, number = 20} = { address : seoul, number : 30} 이므로,
a = seoul, number = 30(기본값이 있긴 하지만 값을 지정해주었으니 바뀜), address = seoul 이다.



문제 2.

키,몸무게,상의사이즈,하의사이즈를 뽑아서 4개의 변수 만들기

let {
  body: {
    height, 
    weight
  },
  size: [ 상의, 하의 ]
} = 신체정보;
profile
모든게 새롭고 재밌는 프론트엔드 새싹

0개의 댓글