[JavaScript] 배열, 오브젝트안의 값들을 한꺼번에 변수에 담으려면? > Destructuring

배열, 오브젝트안의 값들을 한꺼번에 변수에 담으려면?

그럴때 사용할수있는게 Destructuring이다.  

 

#1. array destructuring

- 간단하다. 좌항과 우항의 형식을 맞추어 대입해주면된다.

 

1. 사용해보기

var [변수1, 변수2, 변수3] = [값1, 값2, 값3];

 

- 적용한 예제! 

// 이 arr안의 값을 한번에 변수에 저장할수 있는 방법이 없을까?
var arr = [1,2,3];

// 이런식으로 좌항과 우항의 형식을 맞추어 대입해준다! 
var [a, b, c] = [1, 2, 3]; 
console.log(a, b, c); // 출력결과 >> 1 2 3

// arr에도 배열 형태의 값이 있으니까, 이런식으로 대입하면 간단하게 해결완료! 
var [d, e, f] = arr;
console.log(d, e, f); // 출력결과 >> 1 2 3

 

2. default값도 지정 가능하다

var [변수1, 변수2, 변수3 = 기본값] = [값1, 값2];

 

- 적용한 예제!

- 아래 예제에서 i에는 할당된 값이 없으므로, 기본값으로 설정된 10이 출력된다.

- 아래 예제에서 k에는 할당된 값이 없고, 기본값도 없으므로, undefined가 출력된다. 

var [g, h, i = 10] = [2, 3];  // 출력결과 >> 2 3 10
console.log(g, h, i);

var [j, k] = [1];
console.log(j, k); // 출력결과 >> 1 undefined

 

 

#2. object destructuring

- object에서도 사용가능하다.

 

1. 사용해보기

- object도 좌항과 우항의 괄호만 잘 맞춰서 넣어주면 된다.

// 1. 이렇게도 쓸수 있고
var { name, age } = { name: "장옥정", age: 20 };
console.log(name, age); // 출력결과 >> 장옥정 20


// 2. 정의된 object있으면, 이렇게도 써도되고
var obj = {
	name2: "김태희",
    age2: 30
}

var { name2, age2 } = obj;
console.log(name2, age2); // 출력결과 >> 김태희 30

- 그런데 obejct는 array와 달리 순서대로 기억하는게 아니고, 키값을 기억하는거니, 변수명을 꼭 키값과 동일하게 맞춰줘야한다. 

- 안그럼 아래같이 에러남.

var { name, grade } = { name: "장옥정", age: 20 };
console.log(name, grade); // 출력결과 >> 장옥정 undefined

 

2. object도 default값 줄수 있음

// 변수명 = 기본값 이라고 써주면 됨, 간단
var { name, age = 31 } = { name: "장옥정" };
console.log(name, age); // 출력결과 >> 장옥정 31

3. 만약 변수명을 키값과 맞추고 싶지 않다면, 수정도 가능함

// 키값이자변수명:수정될변수명
var { name : newName } = { name: "장옥정" };
console.log(newName); // 출력결과 >> 장옥정

3-1. 새로 지정한 변수명에 default값도 줄수 있음.

- default값을 주니까, 우항에 값이 없을때 기본값이 출력된다. 

// 키값이자변수명:새로지정할변수명 = 기본값
var { name : newName = '김태희' } = { };
console.log(newName); // 출력결과 >> 김태희

 

#3. 반대로 변수들을 한꺼번에 object에 넣고 싶다면?

1. 그냥 object 값에 변수 넣어주면된다. 

var name = "kim";
var age = 30;
var obj = { name: name, age: age };
console.log(obj);  // 출력결과 >> {name: 'kim', age: 30}

2. es6에서는 축약도 가능

- key값과 value값이 같다면 아래 예제와 같이 축약도 가능하다.

ex) {name(키값) : name(변수명)} 과같이..

var name = "kim";
var age = 30;
var obj2 = { name, age };
console.log(obj2);  // 출력결과 >> {name: 'kim', age: 30}

 

#4. 함수의 파라미터에서도 destructuring 사용가능하다.

1. array

- 어레이는 [변수1,  변수2] = [값1, 값2] 이런식으로 사용한댔지? 

- 파라미터도 변수같은거니까 지금 [num1, num2] = [1, 2] 이런형태로 대입된거다.

function foo1 ([num1, num2]) {
// 파라미터는 변수 같은거니까, [num1, num2] = [1, 2] 와 같은 식이라 생각하면 됨
    console.log(num1);
    console.log(num2);
}
foo1([1, 2]); // 출력결과 >>
// 1
// 2

 

2. object

- object도 {변수1, 변수2} = { 키1:값1, 키2:값2} 형태로 넣으면 된댔지? (* 변수와 키 값은 동일해야함!!! )

- 아래 함수도 {name, age} = obj형태로,  

풀어쓰면 {name, age} = {name:전광렬, age: 54}가 대입된거다.

 var obj = { name: "전광렬", age: 54 };
 
function foo ({ name, age }) {
// obj의 name, age를 파라미터로 전달해줍니다. 
   console.log(name);
   console.log(age);
}
 foo(obj); 
 // 출력결과 >>
 // 전광렬
 // 54