[Javascript] 구조 분해 할당 (Destructing)

 

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 잘 사용하면 코드를 줄일 수 있고, 보기도 좋기 때문에 여러가지 경우를 정리해 보자.

배열 구조 분해

---

기본 구조

const arr = [1,2,3];
const [x,y,z] = arr;
const [a, ,b] = arr;

console.log(x,y,x); //1 2 3
console.log(a,b); //1 3

인덱스를 이용해 접근할 필요 없이 원하는 값들을 배열에서 가져올 수 있다. 배열의 순서대로 값을 가져오게 된다. 중간 값을 빼고 받고 싶다면 빈칸으로 놓으면 된다.

default값(기본 값) 설정

const arr = [1]
const[a=5, b=7] = arr;

console.log(a); // 1
console.log(b); // 7

default값(기본값)을 =을 사용하여 지정할 수 있다. 만약 값이 undifiend라면 미리 정해놓은 default값을 사용한다.

변수 값 교환(swap)

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

구조분해를 활용하면 값 교환을 보다 편리하게 할 수 있다. 기존에 값을 교환하기 위해서는 임시 변수 값을 만들어서 진행해 주어야 하지만, 구조분해에서는 이러한 번거로움이 없이 값 교환이 가능하다.

배열을 return하는 함수

function f() {
  return [1, 2];
}

var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2

여러개의 값을 반환하는 함수를 구현하고 싶을 때 구조분해를 활용할 수 있다. 함수에서 여러개의 값을 배열을 통해 반환하고 이를 구조분해를 통해 간결하게 받을 수 있다.

중첩 배열(nested array)

const nested = [2, 4, [5, 6]];
const [i, ,j] = nested;
const [a, ,[b,c]] = nested;

console.log(i,j); //2 [5, 6]
console.log(a,b,c); //2 4 6

중첩 배열의 경우에도 구조 분해가 가능하다. 중첩된 배열도 기존 배열의 구조 분해와 동일하게 분해해주면 된다.

REST 파라미터 사용

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

rest 파라미터를 사용하여 원하는 값을 받고 분해하고 남은 부분을 하나의 변수로 받을 수 있다(배열)

 

객체 구조 분해

---

기본 구조

let o = {p: 42, q: true};
let {p, q} = o;

console.log(p); // 42
console.log(q); // true

let {p: newP, q: newQ} = o;

console.log(newP); // 42
console.log(newQ); // true

객체의 경우 같은 이름을 사용하여 구조 분해가 가능하다. 변수의 이름을 바꾸고 싶다면 새로운이름:기존이름의 형식으로 바꿔줄 수 있다(속성 해체).

default값(기본 값) 설정

let {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

//새로운 변수명 할당과 기본값 할당
var {a: aa = 10, b: bb = 5} = {a: 3};

console.log(aa); // 3
console.log(bb); // 5

default값(기본값)을 =을 사용하여 지정할 수 있다. 만약 값이 undifiend라면 미리 정해놓은 default값을 사용한다.

새로운 변수명 할당과 기본값 할당을 한번에 할 수도 있다.

Mutating variables

let a = 111;
let b = 999;
const obj = {a: 34, b:7, c: 14};
({a, b} = obj);

console.log(a, b) //34 7

위의 예시처럼 객체 속 속성의 이름과 변수명이 동일한 경우 구조 분해를 하고 싶을 때는 괄호를 사용하면 된다. (하지만 이런 경우를 최대한 안만드는 것이 제일 좋을 것 같다. mutating variables는 어떻게 번역해야할지 모르겠다...)

객체 중첩

const openingHours = {
	fri: {
          open: '9:00',
          close: '22:00',
        },
}

const {fri: {open, close}} = openingHours;
console.log(open, close) //9:00 22:00

중첩된 객체의 경우에도 기존 객체 구조 분해를 하듯 분해해주면 된다. 새로운 변수명 할당과 기본값 설정 모두 가능하다.

 

참조

---

구조 분해 할당 - JavaScript | MDN