전개 구문

1. 전개 구문(Spread Syntax)란?

전개 구문은 배열, 객체, 함수의 매개변수 등 다양한 곳에서 요소들을 펼쳐서 사용할 수 있게 해줍니다. ...를 사용하여 배열이나 객체를 개별 요소나 속성으로 분해하거나 다른 배열이나 객체에 합칠 수 있습니다.

 

2. 전개 구문의 주요 사용 사례

1. 배열에서의 전개 구문

배열 복사

전개 구문을 사용하면 배열을 간편하게 복사할 수 있습니다. 기존 배열을 수정하지 않고 새로운 배열을 생성할 수 있어 불변성을 유지하는 데 도움이 됩니다.

 

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

console.log(arr2); // [1, 2, 3]

여기서 ...arr1은 arr1 배열의 모든 요소를 개별적으로 펼쳐서 arr2에 복사합니다. arr2는 arr1과는 독립적인 새로운 배열입니다.

 

배열 결합

전개 구문을 사용하면 여러 배열을 쉽게 결합할 수 있습니다.

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];

console.log(combined); // [1, 2, 3, 4]

 

배열 요소 추가

전개 구문을 사용하여 배열의 특정 위치에 요소를 쉽게 추가할 수 있습니다.

const arr = [1, 2, 3];
const newArr = [0, ...arr, 4];

console.log(newArr); // [0, 1, 2, 3, 4]

• 기존 배열 arr의 앞뒤로 요소를 추가하여 newArr를 생성했습니다.

배열을 전개 구문으로 복사한 경우와 복사하지 않은 경우의 차이

1. 배열을 전개 구문으로 복사한 경우 ([...] 사용)

전개 구문을 사용하면 새로운 배열을 생성하며, 원본 배열의 요소들을 새 배열로 얕은 복사(Shallow Copy) 합니다. 즉, 새로운 배열이 생성되어 기존 배열과는 완전히 독립적입니다. - 값을 복사하지 참조하는 메모리 공간은 다르다 그러힉 때문에 다른 배

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray]; // 전개 구문을 사용한 복사

console.log(copiedArray); // [1, 2, 3]

// 원본 배열과 복사본 배열 비교
console.log(originalArray === copiedArray); // false (서로 다른 배열임)

 

2. 배열을 복사하지 않고 직접 할당한 경우 (= 사용)

배열을 단순히 =로 다른 변수에 할당하면 두 변수가 같은 배열을 참조하게 됩니다. 이 방식은 배열을 복사하는 것이 아니라, 같은 메모리 주소를 공유하게 되는 것이며, 두 변수는 동일한 배열을 가리키게 됩니다.

const originalArray = [1, 2, 3];
const referencedArray = originalArray; // 전개 구문을 사용하지 않은 복사

console.log(referencedArray); // [1, 2, 3]

// 원본 배열과 참조된 배열 비교
console.log(originalArray === referencedArray); // true (같은 배열을 참조)

 

2. 객체에서의 전개 구문

객체 복사

전개 구문을 사용하여 객체를 쉽게 복사할 수 있습니다.

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };

console.log(obj2); // { a: 1, b: 2 }

• ...obj1은 obj1의 모든 속성을 개별적으로 펼쳐서 obj2에 복사합니다. obj2는 obj1과는 독립적인 새로운 객체입니다.

객체 속성 추가 및 결합

전개 구문을 사용하여 객체의 속성을 추가하거나 다른 객체와 결합할 수 있습니다.

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const combined = { ...obj1, ...obj2 };

console.log(combined); // { a: 1, b: 3, c: 4 }

 

3. 함수 매개변수에서의 전개 구문

전개 구문은 함수 호출 시 배열을 개별 인수로 펼쳐서 전달할 때도 사용할 수 있습니다.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6