[Node.js] 구조분해에 대하여 알아보기

안녕하세요.

이번에는 JavaScript에서 자주 사용하는 구조분해에 대하여 알아보겠습니다.

 

실습환경은 Node.js로 진행하였습니다.

 

1. 구조분해 할당 ( Destructuring assignment )

• 배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는 것
• 배열 구조 분해
• 객체 구조 분해

 

2. 배열 구조 분해

• const [변수] = 배열;
• 각 변수에 배열의 인덱스 순으로 값 대응
• 구조분해 시 변수의 값이 undefined 일 때 기본값 할당 가능
• 구조분해 없이 두 변수의 값 교환도 가능

 

list 변수에 ‘apple’, ‘banana’를 리스트로 대입한다.

그리고 배열 구조 분해를 이용해서 item1, item2에 각각 값을 설정합니다.

각 item에 list에 있는 값들이 저장이 되는 것을 볼 수 있습니다.

지금은 구조 분해 방식으로 저장하였지만 let item1 = list[0] 과 같은 작업이라고 보시면 됩니다.

let list = ['apple', 'banana'];
[item1, item2] = list;
// let item1 = list[0];
// let item2 = list[1];
console.log(item1);
console.log(item2);

실행결과

 

구조 분해를 사용할 때 기본 값을 설정할 수 있습니다.

만약 list에서 2번째 인자 값이 설정되어 있지 않으면 item2에 peach 문자를 저장한다는 뜻이고,

list에서 3번째 값이 없으면, item3에 orange 값을 저장한다는 뜻입니다.

let list = ['apple', 'banana'];
[item1, item2 = 'peach', item3 = 'orange'] = list;
// item2에 기본 값이 설정되어 있지 않으면 peach로 설정한다.
// item3에는 기본 값이 설정되어 있지 않아서 orange로 출력된다.
// 임시로 설정을 한다고해서 length 값은 변하지 않고 처음 설정 값으로 적용된다.
console.log('item1: ', item1);
console.log('item2: ', item2);
console.log('item3: ', item3);
console.log('list length: ', list.length);

 

결과를 보면 item1 은 list의 1번째 인덱스 값인 apple 값이 저장되었고,

item2는 list의 2번째 인덱스 값인 banana 값이 저장되었습니다.

그러나 item3에는 list의 3번째 인덱스 값이 지정되어 있지 않아서 기본 값인 orange 값이 저장되었습니다.

 

추가로 list의 값을 구조 분해를 통해서 임시로 늘려서 설정을 한다고 해서 length 값은 변하지 않고 처음 설정 값으로 적용됩니다.

 

 

• 임시 변수를 통한 데이터 변환 - 구조 분해 방식

코딩을 하다 보면 임시 변수를 이용해서 2개의 변수에 저장된 값을 교환해야 할 때가 있는데

이런 경우에도 구조 분해를 이용하면 쉽게 사용할 수 있습니다.

 

방법 1

temp 변수를 이용해서 데이터를 옮기는 과정입니다.

x = 1, y = 3에서 x = 3, y = 1

// 방법1 - temp 변수 사용
let x = 1;
let y = 3;
console.log('초기 x: ' + x + ' y: ' + y);

let temp = x;
x = y;
y = temp;
console.log('변경 x: ' + x + ' y: ' + y);

// 방법2 - 구조 분해 사용
[y,x] = [x,y];

// [1, 3]
// [a, b] = [1, 3] => a = 1, b = 3
// [b, a] = [1, 3] => a = 3, b = 1
// 위의 temp를 하는 방법과 아래의 구조분해 방식의 결과는 동일 함

 

방법 2

구조 분해를 사용하는 방법인데 훨씬 간결하게 작업을 할 수 있습니다.

// 방법2 - 구조 분해 사용
let x = 1;
let y = 3;
console.log('초기 x: ' + x + ' y: ' + y);

[y,x] = [x,y];
console.log('변경 x: ' + x + ' y: ' + y);

// [a, b] = [1, 3] => a = 1, b = 3
// [b, a] = [1, 3] => a = 3, b = 1
// 위의 temp를 하는 방법과 아래의 구조분해 방식의 결과는 동일 함

 

3. 객체 구조 분해

• const { 변수 } = 객체;
• 객체 안의 속성을 변수명으로 사용
• (:)을 이용해 새 변수명을 선언하고, 원래의 값을 새 변수명에 할당할 수 있다.

배열 구조 분해와 객체 구조 분해의 다른 점은 배열 구조 분해는 순서(Index)가 중요했지만, 객체 구조 분해는 key 값을 기준으로 하기 때문에 순서가 상관없습니다.

 

obj 객체에 a, b key를 설정하고 객체 구조 분해를 사용해서 a, b 변수에 각각 값을 할당합니다.

여기서 obj의 key 값을 따라가기 때문에 순서에 상관없이 각각의 key에 맞는 값이 저장됩니다.

let obj = {
    a: 'one',
    b: 'two'
}
let {b, a} = obj;
console.log('obj.a :', a);
console.log('obj.b :', b);

// 배열 구조분해는 순서(Index)에 따라서 값이 들어간다면,
// 객체 구조분해는 key 값을 기준으로 하기 때문에 순서가 상관 없다.

 

이번에는 객체 구조 분해의 key 값을 다른 변수에 저장하는 방식입니다.

일단 a 변수에는 똑같이 obj.a의 값 ‘one’가 들어갑니다.

여기서 b 변수는 조금 다르게 동작합니다.

먼저 obj.b의 값 ‘two’를 가져온 다음에 ‘key1’이라는 변수에 값을 저장합니다.

let obj = {
    a: 'one',
    b: 'two'
}

let {b: key1, a} = obj;
console.log('obj.a :', a);
console.log('key1 :', key1);
// b라는 key 값을 가져와서 key1 이라는 변수로 대체한다.

 

그래서 결과로 key1 변수를 사용해서 콘솔을 출력하면 obj.b의 값이 출력되는 것을 볼 수 있습니다.

 

객체 구조 분해에서도 배열 구조 분해에서 사용했던 기본 값을 설정할 수 있습니다.

먼저 a와, key1 은 동일한 결과를 가져옵니다.

그런데 c 변수의 경우에는 obj.c 가 없으면 ‘three’ 값을 설정하겠다는 뜻이 됩니다.

let obj = {
    a: 'one',
    b: 'two'
}

let {b: key1, a, c = 'three' } = obj;
console.log('obj.a :', a);
console.log('key1 :', key1);
console.log('c :', c);
// b라는 key값을 가져와서 key1 변수로 대체한다. , c라는 key값이 없으면 값을 three로 설정한다.

 

그래서 c에는 three 값이 출력되는 것을 볼 수 있습니다.

 

5. 구조 분해 require

• require 함수를 사용해서 데이터를 가져올 때 지금까지 사용해 왔던 방식이라면 num 변수에 require로 가져온 정보를 저장하고 각 변수에 할당하는 방식으로 사용했었습니다.
• 그러나 구조 분해를 이용하면 require를 하면서 바로 데이터를 저장할 수 있습니다.

// 일반 문법
const num = require('./221117_module.js');
const aa = num.aa;
const bb = num.bb;

// 구조분해 문법
const {aa, bb} = require('./221117_module.js');
// require을 할 때 구조분해로 받는 방법도 가능하다.

 

 

이상으로 구조분해에 대하여 알아보았습니다.

감사합니다.