JavaScript 전개 구문과 구조 분해 할당

이번에는 배열이나 객체를 다룰 때 유용한 전개 구문과 구조 분해 할당에 대해 알아볼게요!

전개 구문은 데이터 구조를 확장하거나 복사할 때 사용하며,
구조 분해 할당은 데이터를 쉽게 분해하여 변수에 할당할 수 있게 해 줍니다.

 

전개 구문

전개 구문은 배열(Array)이나 객체(Object)와 같은 데이터 구조를 확장할 때 사용하는 문법입니다.

이를 통해 배열이나 객체를 쉽게 복사하거나, 새로운 배열이나 객체를 생성할 수 있습니다.

전개식(Spread syntax)이라고 표현하기도 해요!

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

 

배열(Array)의 전개 구문

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

 

예시 코드를 보면서 두 개의 배열을 합치는 모습을 볼까요?

const fruits = ['사과', '파인애플', '수박'];
const vegetables = ['당근', '오이', '양파'];
const food = [...fruits, ...vegetables];

console.log(food);

// 결과 : ["사과","파인애플","수박","당근","오이","양파"]

실행 결과 - 두개의 배열 합치기

friuts와 vegetables라는 두 개의 배열을 전개 구문을 사용하여 펼친(spread) 후 합치면 새로운 배열 food를 생성할 수 있어요!

배열(Array) 복사하기

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

const fruits = ['사과', '파인애플', '수박', '딸기'];
const fruitsbox = [...fruits];

fruitsbox.push('키위');

console.log(fruits);
console.log(fruitsbox);

실행 결과 - 배열 복사 - 새로운 배열 생성

전개 구문을 이용하여 fruits 배열을 복사해 fuitsbox라는 배열을 만들고, push 메서드로 새로운 요소를 추가합니다.

이때 fruits 배열은 변하지 않고 fruitsbox 배열만 변경돼요!

이를 통해 전개 구문을 이용하여 배열을 얕은 복사 하여 새로운 배열을 생성하므로 기존 배열과는 별개의 배열이 됩니다!

 

객체(Object)의 전개 구문

객체의 전개 구문은 배열과 마찬가지로 중괄호 ' { } ' 안에서 세 게의 점( ... )을 사용하여 객체를 확장합니다.

 

이 또한 예시 코드를 통해서 살펴볼까요?

const friend1 = { luca : 1, jennie : 2 };
const friend2 = { rose : 3 };
const friend3 = { ...friend1, ...friend2 };

console.log(friend3);

실행 결과 - 객체(Object)

위 코드는 friend1과 friend2라는 두 개의 객체를 전개 구문을 사용하여 합친 friend3 객체를 생성합니다.

만약 두 객체에 같은 이름의 key가 있다면, key의 값(value)은 나중에 온 객체의 키값으로 업데이트됩니다!

const friend1 = { luca : 1, jennie : 2 };
const friend2 = { jennie : 3 };
const friend3 = { ...friend1, ...friend2 };

console.log(friend3);

실행 결과 - 같은 key값일때의 상황

객체(Object) 복사하기

배열처럼 기존 객체를 복사하여 새로운 객체를 만들 수 있기도 합니다!

const user1 = { name: 'luca', age: 25 };
const user2 = { ...user1 };

user2.hobby = 'coding';

console.log(user1);
console.log(user2);

실행 결과 - 객체(Object) 복사하기

 

배열의 전개 구문처럼 객체 전개 구문 역시 기존 객체를 복사해 독립적인 새로운 객체를 만들 수 있습니다!

---

구조 분해 할당

저 또한 그랬지만.. 많은 분들이 헷갈려하는 구조 분해 할당(Destructuring)입니다.

한 번에 이해되지 않으니 여러 번 반복하고 다양한 예제로 코딩해보시길 권장해요!

구조 분해 할당은 ES6부터 지원하는 문법으로, 배열(Array)이나 객체(Object)와 같은 데이터 구조를 분해하여 변수에 할당하는 표현식입니다.

이를 통해 변수에 속성이나 요소를 간편하게 할당할 수 있어요!

Destructuring은 "~의 구조를 파괴하다."라는 뜻을 가지고 있습니다.
"de-"는 "제거하다"라는 뜻의 접두사이고, "structure"은 "구조"를 뜻합니다.
즉 "Destructuring"은 "구조를 해체하는 행위"를 뜻합니다. 

구조 분해 할당의 기본 구조

할당연산자( = )를 기준으로 왼쪽에 있는 중괄호는 구조 분해 할당을 의미합니다.

오른쪽에 있는 중괄호는 객체를 나타냅니다.

중괄호 안에 있는 key와 객체의 값(value)을 할당하고자 하는 변수 이름을 콜론( : )으로 연결합니다.

'변수 1'에는 key1의 값이 할당되고, '변수 2'에는 key2값이 할당됩니다.

즉 '변수 1'에는 값 1, '변수 2'에는 값 2가 할당됩니다.

const { key1 : 변수1, key2 : 변수2 } = { key1 : '값1', key2 : '값2' };

console.log(변수1);
console.log(변수2);

실행 결과 - 구조 분해 할당(기본 구조1)

변수명과 key가 동일하다면, 아래와 같이 간단하게 작성할 수 있습니다.

const { key1, key2 } = { key1: '값1', key2: '값2' };

console.log(key1);
console.log(key2);

실행 결과 - 구조 분해 할당(기본 구조2)

이제는 수동 구조 분해 할당을 보다 간결하게 작성해 볼게요!

const { color1, color2, color3 } = { color1 : 'red', color2 : 'orange', color3 : 'yellow' };

console.log(color1); // "red"
console.log(color2); // "orange"
console.log(color3); // "yellow"

이렇게 작성한 코드랑은 달리 조금 더 간결하게 변수에 값을 할당할 수 있어요!

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

const obj = { color1: 'red', color2: 'yellow', color3: 'orange' };

function objReturn() {
  return obj;
}

// 반환값을 바로 구조 분해 할당합니다.
const { color1, color2, color3 } = objReturn();

console.log(color1); // "red"
console.log(color2); // "orange"
console.log(color3); // "yellow"

이렇듯 구조 분해 할당을 이용하면 반복과 불필요한 변수 생성을 줄여 코드를 쌈뽕? 하게 작성할 수 있도록 도와줍니다. :)

 

배열(Array)의 구조 분해 할당

지금까지 객체의 구조 분해 할당을 주로 살펴보았는데요.

배열의 구조 분해 할당은 대괄호 ' [ ] '를 사용하여 할당할 변수 이름을 나열하는 방식입니다.

이를 통해 배열의 요소를 각각의 변수에 할당할 수 있습니다.

 

예제 코드를 통해 살펴보자면 배열의 요소를 순서대로 변수에 할당하는 것을 확인하실 수 있습니다!

const arr = [1, 2, 3];

const [a, b, c] = arr;

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

 

배열의 요소를 비어두면 어떻게 될까요?

const [a, , c] = [1, 2, 3, 4, 5];

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

실행 결과 - 빈 배열

이처럼 배열의 요소를 비워두면, 필요한 요소만 추출할 수 있습니다.

 

함수(function)의 구조 분해 할당

함수의 매개변수를 객체(Object)나 배열(Array)로 구조 분해 할당을 사용하여 전달 인자를 매개변수에 구조 분해 할당하여 사용할 수 있습니다!

 

예제 코드를 통해서 알아볼까요?

function f1({ a, b }) {
  console.log(a);
  console.log(b);
}
const obj = { a: 10, b: 20 };
f1(obj);
f1({a: 30});

function f2([a, b]) {
  console.log(a);
  console.log(b);
}

const arr = [1, 2];
f2(arr);

실행 결과 - 함수

위 예제코드의 매개변수는 전달받은 인자 값을 구조 분해 할당하여 사용합니다.

객체를 매개변수로 사용하면 순서와 상관없이 key 값으로 할당됩니다.

다만, 배열을 매개 변수로 사용할 때는 순서에 조금 더 유의해야 하는데요.!

객체의 key값이 없으면 undefined가 할당되며, 배열의 요소가 부족하더라도 undefined가 할당됩니다!