[JavaScript] 자바스크립트 비구조화 할당

[JavaScript] 비구조화 할당

비구조화 할당을 사용하면 반복되는 변수를 줄여 쓰는데 유용하다.

 

let arr = ["one", "two", "three"];

let one = arr[0];
let two = arr[1];
let three = arr[2];

// 반복되는 변수 arr을 아래와 같이 줄일 수 있다.

let [one, two, three] = arr;

// 위와 같이 대괄호를 사용하여 배열의 값을 순서대로 할당 받아 사용하는 것을 배열의 비구조화 할당이라고 한다.

 

 

배열의 선언 분리 비구조화 할당을 사용하면 더 단축해서 사용할 수 있다.

 

// 아래와 같이 배열의 선언 분리 비구조화 할당을 사용하면 더 단축할 수 있다.

let [one, two, three] = ["one", "two", "three"];

 

 

비구조화 할당을 사용하면 두 변수의 값을 바꾸는 스왑(swap)에 활용할  수 있다.

 

let a = 10;
let b = 20;
let temp = 0;

temp = a;
a = b;
b = temp;

// 아래와 같이 비구조화 할당을 쓸 수 있다.

[a, b] = [b, a];

 

 

객체의 비구조화 할당은 아래와 같이 사용할 수 있다.

 

// 객체의 비구조화 할당

let object = {one: "one", two: "two", three: "three", name: "홍길동"};

let one = object["one"];
let two = object.two;
let three = object.three;
let name = object.name;

 

 

위의 4줄을 아래와 같이 한줄로 변경할 수 있다.

 

let {one, two, three, name} = object;

// 객체의 비구조화 할당은 순서가 아닌 key값을 기준으로 할당이 이루어진다.
// 따라서 아래와 같이 key값을 바꿔서 할당 받는 것도 가능하다.
// abc와 같이 기본값을 설정할 수 있다.

let {name: myName, one, two, three, abc = "fifth"} = object;
console.log(one, two, three, myName, abc);

>>> one two three 홍길동 fifth