[JS] 구조 분해 할당 | 객체, 배열 구조 분해

오픈소스를 보다보면 구조 분해 할당된 코드를 심심치 않게 볼 수 있다.

내 경우 평소에 잘 써보지 않은 문법이라 이번에 맘 먹고 정리해보기로 했다!

 

구조분해할당(Destructuring assignment)

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

개발을 하다 보면 객체나 배열에 저장된 일부 데이터에 접근해야 하는 경우가 생기기 마련이다.

이럴 때 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법인 구조 분해 할당을 사용할 수 있다.

 

1. 객체 분해

객체 분해의 경우 아래처럼 내가 원하는 특정 값을 변수에 담을 수 있다. 

 

기본 변수 할당

객체 구조분해 변수에 값을 할당하는 기본 방법은 다음과 같다.

const obj = {
    id: 1,
    name: 'ppororo',
    age: 3,
    habit: 'cook',
};

const { id, habit } = obj;

console.log(id) // 1
console.log(habit) // 'cook'

 

선언에서 분리한 할당

변수 선언과 할당을 분리하여 객체 구조분해 할당을 할 수 있다.

var { a, b } = { a:1, b:2 };

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

 

새로운 변수 이름에 할당

다음과 같이 새로운 변수 이름에 값을 할당받을 수도 있다.

var a = { p: 30, q: true };
var { p: foo, q: bar } = a;

console.log(foo); // 30
console.log(bar); // true

 

중첩된 객체와 배열 구조분해

다음의 복잡한 객체, 배열의 구조에도 구조 분해하여 값을 참조할 수 있다.

var helloWorld = {
  title: 'shepherd',
  detail: [
    {
      language: 'ko',
      place: [],
      last_edit: '2014-04-14T08:43:37',
      url: '../data/utils/happyHouse',
      title: 'cute dog',
    },
  ],
  url: '../docs/desc/pat',
};

var {
  title: Mydog,
  detail: [{ title: mvTitle }],
} = helloWorld;
console.log(Mydog); // "shepherd"
console.log(mvTitle); // "cute dog"

 

매개변수에서 구조분해

많이 보이는 유형이다. 구조분해한 값을 매개변수로 참조할 수도 있다.

var movie = {
  rank: 3,
  title: 'lalaland',
  cast: { miya: 'emma', sebastian: 'lion' },
};

function awards({ rank }) {
  return rank;
}

console.log(awards(movie)); // 3

  

 

2. 배열 분해

할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 크더라도 에러가 발생하지 않는다. 할당할 값이 없으면 undefined로 취급된다.

객체 분해와 다르게 배열 분해의 경우는 내가 필요로 하는 값만 특정해서 꺼낼 수는 없다.

 

기본 변수 할당

배열 구조분해 변수에 값을 할당하는 기본 방법은 다음과 같다.

const arr = [1, 'abc', 3];
const [ar1, ar2, ar3] = arr;

console.log(ar1) // 1
console.log(ar2) // 'abc'
console.log(ar3) // 3

 

선언에서 분리한 할당

변수 선언과 할당을 분리하여 배열 구조분해 할당을 할 수 있다.

var a, b;

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

 

기본값 설정

배열 구조분해는 기본값 설정이 가능하다.

var a, b;

[a = 2, b = 10] = [7];
console.log(a) // 7 (배열에서 받아온 값)
console.log(b) // 10 (기본값)

a에는 7이 할당되었고, b에는 값이 할당되지 않았기 때문에 기본값인 10이 할당되었다.

 

값 교환

두 개의 값 교환을 배열 구조분해를 사용하면 한 줄로 표현이 가능하다.

var [a, b] = [10, 7];

[a, b] = [b, a];
console.log(a); // 7
console.log(b); // 10

 

함수의 반환된 배열

함수에서 반환된 배열로도 구조분해 할당이 가능하다.

function foo() {
  return [3, 4];
}

var [a, b] = foo();
console.log(a); // 3
console.log(b); // 4

 

값 무시하기

배열에서 필요하지 않은 값을 변수에 할당해야 하는 경우에 사용할 수 있다.

function foo() {
  return [3, 4, 5];
}
var [a, , b] = foo();
console.log(a); // 3
console.log(b); // 5

[a, , b] = [4, 5, 6];
console.log(a); // 4
console.log(b); // 6

// 또는 아래같이 모든 값을 무시하는 것도 가능
[,,] = [1, 2, 3, 4, 5];

 

전개 연산자를 이용한 저장

...(전개 연산자)를 이용해 나머지 배열을 변수에 할당이 가능하다.

var [a, ...b] = [1, 2, 3];

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

 

* 이해에 도움이 됐던 자료 참고 :

• https://ko.javascript.info/destructuring-assignment
• https://youtu.be/fKjJIzvBJcg