[JavaScript] 코드의 가독성을 높이는 ES6 문법: 구조 분해 할당과 전개/나머지 문법

by

ES6는 JavaScript에 많은 편의 기능을 추가했으며, 그중에서도 **구조 분해 할당(Destructuring Assignment)**과 **전개 문법(Spread Syntax) / 나머지 문법(Rest Parameters)**은 코드의 양을 줄이고 가독성을 획기적으로 높여주어 거의 모든 현대 JavaScript 코드에서 사용되고 있습니다. 이 강력한 문법들을 알아보고 코드에 적용해 보세요.

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

구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 쉽게 담을 수 있게 해주는 문법입니다.

  • 객체 구조 분해: 객체의 속성 이름을 변수 이름으로 사용하여 값을 추출합니다.
const user = {
  name: 'Alice',
  age: 30,
  city: 'Seoul'
};

// 이전 방식
// const name = user.name;
// const age = user.age;

// 구조 분해 할당
const { name, age } = user;

console.log(name); // 'Alice'
console.log(age);  // 30

// 다른 이름의 변수에 할당하거나 기본값 설정도 가능
const { city: userCity, country = 'Korea' } = user;
console.log(userCity);  // 'Seoul'
console.log(country); // 'Korea'
  • 배열 구조 분해: 배열의 인덱스 순서에 따라 값을 변수에 할당합니다.
const fruits = ['Apple', 'Banana', 'Cherry'];

const [first, second] = fruits;

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

2. 전개 문법 (Spread Syntax ...)

전개 문법은 배열이나 객체처럼 반복 가능한(iterable) 것을 펼쳐서 그 요소들을 개별적으로 분리하는 역할을 합니다. 주로 배열이나 객체를 복사하거나 합칠 때 유용합니다.

  • 배열 복사 및 병합:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const shallowCopy = [...arr1]; // 배열의 얕은 복사
const combined = [...arr1, ...arr2]; // 배열 병합

console.log(shallowCopy); // [1, 2, 3]
console.log(combined);  // [1, 2, 3, 4, 5, 6]
  • 객체 복사 및 병합:
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const merged = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 } (중복된 키는 뒤에 오는 값으로 덮어씀)
console.log(merged);

3. 나머지 문법 (Rest Parameters ...)

나머지 문법은 전개 문법과 형태는 같지만, 역할은 정반대입니다. 여러 개의 요소를 하나의 배열로 모아주는 역할을 하며, 주로 함수의 매개변수에서 사용됩니다.

  • 함수의 가변 인자 처리:
function sum(...numbers) {
  // numbers는 모든 인자를 담은 배열이 됨
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

console.log(sum(1, 2, 3));       // 6
console.log(sum(10, 20, 30, 40)); // 100
  • 구조 분해와 함께 사용:
const [first, ...rest] = [10, 20, 30, 40, 50];

console.log(first); // 10
console.log(rest);  // [20, 30, 40, 50] (나머지 요소들이 배열로 묶임)

요약 및 정리

구조 분해 할당과 전개/나머지 문법은 코드를 더 간결하고 표현력 있게 만들어주는 필수적인 ES6 기능입니다.

  • 구조 분해 할당: 객체나 배열에서 필요한 값을 쉽게 추출하여 변수에 할당합니다.
  • 전개 문법 (...): 배열이나 객체를 펼쳐서 복사하거나 병합할 때 사용합니다.
  • 나머지 문법 (...): 여러 개의 인자나 요소를 하나의 배열로 모을 때, 주로 함수 매개변수에서 사용합니다. 이 문법들을 적극적으로 활용하면 반복적인 코드를 줄이고 데이터의 흐름을 더 명확하게 나타낼 수 있습니다