Javascript 구조 분해 할당에 대한 정리: JS destructuring assignment

오늘은 Javascript의 구조분해 할당(destructuring assignment)에 대해서 정리해 보겠습니다.

 

1. 객체 구조 분해 할당(destructuring assignment)

1-1.  구조 분해 할당의 Before and After

구조 분해 할당은, 객체나 배열을 분해하여서,

그 값들을 개별 변수에 담을 수 있게 하는 Javascript의 표현식을 가르킵니다.

 

먼저 객체에 대한 구조분해할당의 예제를 보겠습니다.

 

구조 분해 할당이 있기 전에는,

아래의 person이라는 객체의 값을,

각각의 변수에 담기위해서,

아래와 같이 일일히 객체에 접근해 변수에 담아주어야 했습니다.

 

const person = {
  name: 'John Bark',
  age: 30,
  job: 'Software Engineer'
};

const name = person.name;
const age = person.age;
const job = person.job;

 

그런데, 객체에 구조 분해 할당을 사용하면,

아래와 같이 한 줄이면 모든 것이 해결 됩니다.

위에서의 3줄짜리 코드가, 1줄로 쉽게 정리 되었습니다.

 

const person = {
  name: 'John Bark',
  age: 30,
  job: 'Software Engineer'
};

const { name, age, job } = person;

 

 

아래는 sqlite의 모듈을 가져올 때,

open 함수만 추출해 가져와 사용하는 방법입니다.

 

const { open } = require('sqlite');

 

또한 아래와 같이 사용하는 것도 가능합니다.

'삼성 노트북'이라는 문자열을 분해해서 변수에 할당하고 있습니다.

 

let product = {};
[product.brand, product.type] = "삼성 노트북".split(' ');

console.log(product.brand); // 삼성
console.log(product.type); // 노트북

 

2. 배열 구조 분해 할당

이번에는 객체가 아닌 배열에 대한 구조 분해 할당을 보겠습니다.

 

말 그대로 배열을 분해해서,

분리해서 선언한 변수에, 각각 할당하였습니다.

한줄의 코드로 first와 second에 대한 변수 할당이 이루어 졌습니다.

 

기호 상 차이라면,

위에서는 객체 구조분해할당이므로, '{ }' 를 통해 객체를 받아서 구조분해하였구요.

배열 구조분해할당은, '[ ]'를 이용해 분해를 합니다.

 

const fruits = ['Apple', 'Banana', 'Cherry'];

const [first, second] = fruits;

console.log(first);  // "Apple"
console.log(second); // "Banana"

 

 

배열 분해 할당은 순서에 의존하기 때문에 배열의 순서가 중요한데요.

순서를 이용해서, 분해할당을 할 때,

건너띄어서 할당해 줄 수 있습니다.

아래에서는 세번째 배열인 7에 대해서는 생략하고, 

3,5,9에만 할당을 해 주었습니다.

 

 

let numbers = [3, 5, 7, 9];

let [first, second, , fourth] = numbers;

console.log(first);  // 3
console.log(second); // 5
console.log(fourth); // 9

 

3. 기본 값의 설정

구조 분해 할당에서는 아래와 같이 기본값을 설정해서,

값이 없을 때 해당하는 기본값을 담아줄수도 있습니다.

job에서 '백수'를 기본값으로 주었네요.

 

const person = {
  name: 'John Bark',
  age: 32
};

const { name, age, job = '백수' } = person;

 

4. 실제 사례

실제 사용하는 예를 보도록 하겠습니다.

 

여기서 볼 부분은 const로 시작하는 구조분해 할당 부분인데요.

user 객체에서 name, email, profile_pic 속성을 추출해,

const 키워드로 선언된 변수들에 할당하고 있습니다.

이렇게 하면 user 객체의 각 속성을 따로 변수로 사용할 수 있게 됩니다

 

async function createUser(user, db) {
  return new Promise((resolve, reject) => {
    const { name, email, profile_pic } = user;
    
    db.run(
      `INSERT INTO users (name, email, profile_pic) VALUES (?, ?, ?)`,
      [name, email, profile_pic,],
      function (err) {
        if (err) reject(err);
		else resolve({ lastID: this.lastID });
      }
    );
  });
}

const newUser = new User(name,email,profilePic);
const result = await createUser(newUser, db);

 

이상으로 구조분해할당에 대해서 정리해 보았습니다.