JavaScript의 변수 선언과 구조 분해 할당(destructuring assignment)

구조 분해 할당이란?

구조 분해 할당(Destructuring Assignment)은 ECMAScript 2015(ES6)에서 도입된 JavaScript의 문법으로, 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 해주는 표현식이다. 이 문법은 코드를 더 간결하고 읽기 쉽게 만들며, 데이터를 다루는 작업을 더 효율적으로 할 수 있게 돕는다고 한다.

예를 들어 보자.

// 객체 구조 분해
const person = { name: 'Nye', age: 30 };
const { name, age } = person;
console.log(name); // Nye
console.log(age); // 30

//배열 구조 분해
const numbers = [1, 2, 3];
const [one, two, three] = numbers;
console.log(one); // 1
console.log(two); // 2
console.log(three); // 3

구조분해할당의 장점

• 코드의 가독성 향상: 복잡한 객체나 배열로부터 필요한 데이터만을 추출하여 변수에 할당할 때, 코드의 양이 줄어들고, 읽기 쉬워진다!
• 중복 코드 감소: 객체의 속성이나 배열의 요소를 변수에 할당할 때, 구조 분해 할당을 사용하면 반복되는 접근자(accessor) 코드를 작성할 필요가 없어진당
• 기본값 할당: 구조 분해 할당을 사용하면 변수에 기본값을 쉽게 할당할 수 있으며, 이는 데이터가 undefined일 때 유용하게 사용된다.

//기본값 할당하는법
const { name = '지녕', age = 25 } = person;

• 함수 파라미터에서의 사용: 함수의 파라미터로 객체나 배열을 전달받을 때, 구조 분해 할당을 사용하여 필요한 속성이나 요소만을 쉽게 추출할 수 있당... 이는 함수 내부에서 데이터를 다루는 코드를 간소화한다.

function helloTistory({ name, age }) {
  console.log(`Hello, my name is ${name} and I'm ${age} years old.`);
}
helloTistory(person);

• 선택적으로 속성 추출: 필요한 속성만을 명시적으로 선택하여 추출할 수 있으며, 이는 특히 객체에서 몇몇 속성만을 필요로 할 때 유용함!

왜 찾아봤는지?

사실 너무 기초적인 개념인데 내가 잡고 가지 못했던 것 같다...

3계층 아키텍처로 기존 코드를 리팩토링하면서, req.user에 할당했던 userId를 컨트롤러 계층에서 서비스 계층으로 넘어가는 시점에 불러오지 못하는 문제가 발생했다.

const userId = req.user.userId; // 서비스 계층에서 불러와짐 
const {userId} = req.user.userId; // 서비스 계층으로 전달되지 않음

 

1. 이 코드는 req.user 객체에서 userId 속성을 참조하여, 그 값을 새로운 userId라는 이름의 변수에 할당한다. 여기서는 req.user 객체의 userId 속성 값을 직접적으로 userId 변수에 할당하고 있다.
2. 두 번째 줄의 코드는 구조 분해 할당을 시도하고 있으나, 잘못 사용되었다. 구조 분해 할당은 객체나 배열로부터 속성이나 요소를 쉽게 추출할 수 있게 해주는 JavaScript의 문법인데... 올바르게 사용하기 위해서는 req.user.userId가 아니라 req.user에서 직접 userId를 구조 분해하는 방식으로 사용되어야 한다.
3. 즉, 만약 req.user 객체 내에 userId 속성이 있고, 나처럼 구조 분해 할당으로 불러오고 싶다면 이렇게 코드를 짜야한다.

const { userId } = req.user;