1. 전개 구문과 Destructuring

이번에는 배열이나 객체를 다룰 때 유용한 전개 구문과 디스트럭처링에 대해 알아보겠습니다. 전개 구문은 데이터 구조를 확장하거나 복사할 때 사용하며, 디스트럭처링은 데이터를 쉽게 분해하여 변수에 할당할 수 있게 해줍니다.

1.1 전개 구문 (Spread syntax)

전개 구문은 배열이나 객체와 같은 데이터 구조를 확장할 때 사용하는 문법입니다. 이를 통해 배열이나 객체를 쉽게 복사하거나, 새로운 배열이나 객체를 생성할 수 있습니다. 전개 식이라고 표현하기도 합니다.

'퍼지다, 펼치다' 라는 의미의 spread 처럼, 배열이나 객체로 포장되어 있는 데이터를 가지런히 펼쳐놓는 것이라 생각하면 이해하기 쉽습니다.

1.1.1 배열의 전개 구문

배열의 전개 구문은 대괄호 [] 안에서 세 개의 점 ...을 사용하여 배열을 확장합니다.

1.1.1.1 예시: 배열 합치기

다음은 두 개의 배열을 합치는 예시입니다.

const 과일들 = ['사과', '파인애플', '수박'];
const 생선들 = ['조기', '갈치', '다금바리'];
const 합치면 = [...과일들, ...생선들];

console.log(합치면);

const 과일들 = ['사과', '파인애플', '수박'];
const 생선들 = ['조기', '갈치', '다금바리'];
const 합치면 = [...과일들, ...생선들];

console.log(합치면);

이 코드는 과일들과 생선들이라는 두 개의 배열을 전개 구문을 사용하여 두 배열을 펼친(spread) 합치면 배열을 생성합니다.

1.1.1.2 예시: 배열 복사

기존 배열을 복사하여 새로운 배열을 만들 수도 있습니다.

const 과일들 = ['사과', '파인애플', '수박'];
const 과일들2 = [...과일들];

과일들2.push('키위');
console.log(과일들);
console.log(과일들2);

const 과일들 = ['사과', '파인애플', '수박'];
const 과일들2 = [...과일들];

과일들2.push('키위');
console.log(과일들);
console.log(과일들2);

이 코드는 과일들 배열을 복사하여 과일들2를 만들고, 과일들2에 새로운 과일을 추가합니다. 이때 두 배열은 서로 독립적입니다.

1.1.2 객체의 전개 구문

객체의 전개 구문은 중괄호 {} 안에서 세 개의 점 ...을 사용하여 객체를 확장합니다.

다음은 두 개의 객체를 합치는 예시입니다.

const 위니브1 = { 개리: 1, 빙키: 2 };
const 위니브2 = { 라이캣: 3 };
const 위니브3 = { ...위니브1, ...위니브2 };

console.log(위니브3);

const 위니브1 = { 개리: 1, 빙키: 2 };
const 위니브2 = { 라이캣: 3 };
const 위니브3 = { ...위니브1, ...위니브2 };

console.log(위니브3);

이 코드는 위니브1과 위니브2라는 두 개의 객체를 전개 구문을 사용하여 합친 위니브3 객체를 생성합니다.

1.2 디스트럭처링 (Destructuring)

많은 분들이 헷갈려하는 악명높은 디스트럭쳐링입니다. 한 번에 이해되지 않으니 여러번 반복하고 다양한 예제로 실습해보시길 권해드립니다.

디스트럭쳐링은 ES6 부터 지원하는 문법으로, 배열이나 객체와 같은 데이터 구조를 분해하여 변수에 할당하는 표현식입니다. 이를 통해 변수에 속성이나 요소를 간편하게 할당할 수 있습니다. 구조 분해 할당이라 표현하기도 합니다.

쉽게 말해, 배열이나 객체를 분해하여 안에 있는 데이터를 변수에 순서대로 할당해주는 문법입니다.

‘destructuring’ 이라는 이름에 대하여 생각해봅시다.

destructuring이란 단어는 영어사전에 나오지 않습니다.
때문에 저는 초반에 이름에서 느껴지는 감이 없어서 문법 자체를 이해하기가 좀 어려웠습니다.

"de-"는 "제거하다"라는 뜻의 접두사이고, "structure"는 "구조"를 뜻합니다. 즉, "destructuring"은 "구조를 해체하는 행위"를 뜻하는 합성어입니다.

이렇듯 영어 구조적 특징을 통해 자바스크립트 문법을 해석해보는것도 학습에 도움이 됩니다.

ES6 이전에 사용했던 수동적인 디스트럭쳐링에 대해 살펴봅시다.

let food1, food2, food3;

const categories = { food1: '과일', food2: '채소', food3: '육류' };

food1 = categories.food1;
food2 = categories.food2;
food3 = categories.food3;

console.log(food1);
console.log(food2);
console.log(food3);

let food1, food2, food3;

const categories = { food1: '과일', food2: '채소', food3: '육류' };

food1 = categories.food1;
food2 = categories.food2;
food3 = categories.food3;

console.log(food1);
console.log(food2);
console.log(food3);

위의 코드에서 우리는 객체안의 값을 하나 하나 빼내어 각각 별개의 변수에 할당하는 모습을 볼 수 있습니다.

할당하고자 하는 값에 해당하는 변수 선언이 필요하기 때문에, n개의 할당을 해주고자 하면 n줄의 코드 작성이 필요합니다.

위의 코드는 지금도 사용함에 있어서 문법적인 오류가 없는 코드입니다. 하지만 더 간결하고 빠르게 작성할 수 있는 구문으로 개선해봅시다.

1.2.1 디스트럭쳐링의 기본 구조

이제 디스트럭쳐링을 통해 처음에 봤던 수동 디스트럭쳐링을 처리해보겠습니다.

const { food1, food2, food3 } = { food1: '과일', food2: '채소', food3: '육류' };

console.log(food1);
console.log(food2);
console.log(food3);

const { food1, food2, food3 } = { food1: '과일', food2: '채소', food3: '육류' };

console.log(food1);
console.log(food2);
console.log(food3);

앞서 작성했던 5줄의 코드와 달리, 1줄의 코드로 변수에 값을 할당할 수 있습니다.

만약 객체를 반환하는 함수가 있을 경우, 함수의 반환값을 받는 변수를 굳이 만들 필요도 없습니다.

const obj = { food1: '과일', food2: '채소', food3: '육류' };

function objReturn() {
  return obj;
}

// 반환값을 바로 디스트럭쳐링합니다.
const { food1, food2, food3 } = objReturn();

console.log(food1);
console.log(food2);
console.log(food3);

const obj = { food1: '과일', food2: '채소', food3: '육류' };

function objReturn() {
  return obj;
}

// 반환값을 바로 디스트럭쳐링합니다.
const { food1, food2, food3 } = objReturn();

console.log(food1);
console.log(food2);
console.log(food3);

이렇듯 디스트럭쳐링을 이용하면 반복과 불필요한 변수 생성을 줄여 코드를 깔끔하게 작성할 수 있도록 도와줍니다.

1.2.2 배열의 디스트럭쳐링

지금까지는 객체의 디스트럭쳐링을 주로 살펴봤습니다.

배열의 디스트럭처링은 대괄호 []를 사용하여 할당할 변수 이름을 나열하는 방식입니다. 이를 통해 배열의 요소를 각각의 변수에 할당할 수 있습니다.

아래는 배열의 디스트럭쳐링을 사용한 예시입니다.

const arr = [1, 2, 3];

const [a, b, c] = arr;

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

const arr = [1, 2, 3];

const [a, b, c] = arr;

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

위 코드에서는 arr이라는 배열을 선언하고, 구조 분해 할당을 사용하여 각각의 요소를 a, b, c 변수에 할당합니다. 이후 각 변수의 값이 출력됩니다.

JavaScript 베이스캠프

전개 구문과 Destructuring