전개 연산자 (...) 하나로 객체/배열 조작 끝내기!

 

전개 연산자(Spread Operator)는 자바스크립트에서 ...(점 세 개)로 표현되는 연산자이다.

이 연산자는 배열이나 객체의 모든 요소나 속성을 펼치거나 복사할 때 사용 된다.

쉽게 말해, "안에 있는 내용을 꺼내서 사용한다"라고 생각하면 된다.

ES6(ECMAScript 2015)에서 처음 도입되었고 배열이나 객체를 다룰 때 매우 유용한 도구로 등장했다. 이를 통해 코드가 더 간결하고 가독성이 높아졌다.

---

 

전개 연산자가 생겨난 배경

기존의 자바스크립트에서는 배열이나 객체를 복사하거나 병합할 때 번거로운 방법을 사용해야 했다. 예를 들어, 객체나 배열을 복사하려면 Object.assign() 이나 Array.prototype.concat() 같은 메서드를 사용해야 했다. 이런 방법들은 여러 줄로 코드를 작성해야 하고, 가독성도 떨어질 수 있다.

 

기존방식(전개 연산자 없을 경우)

배열을 병합할 때는 concat()메서드를 사용하고, 객체를 복사할 때는 Object.assign()을 사용했다.

// 배열 병합
let arr1 = [1, 2];
let arr2 = [3, 4];
let mergedArray = arr1.concat(arr2); // 병합
console.log(mergedArray); // [1, 2, 3, 4]

// 객체 복사
let obj1 = { a: 1, b: 2 };
let obj2 = Object.assign({}, obj1); // 복사
console.log(obj2); // { a: 1, b: 2 }

 

전개 연산자 도입

// 배열 병합
let arr1 = [1, 2];
let arr2 = [3, 4];
let mergedArray = [...arr1, ...arr2]; // 전개 연산자 사용
console.log(mergedArray); // [1, 2, 3, 4]

// 객체 복사
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1 }; // 전개 연산자 사용
console.log(obj2); // { a: 1, b: 2 }

 

---

 

전개 연산자의 주요 사용 용도

1. 배열에서 전개 연산자 사용

배열의 요소를 하나씩 펼쳐서 새로운 배열을 만들거나 기존 배열에 추가할 수 있다.

 

배열복사

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray]; // 원본 배열의 모든 요소를 복사

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

 

배열 합치기

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2]; // 두 배열의 요소를 합침

console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

 

 

2. 객체에서 전개 연산자 사용

객체의 모든 속성을 복사하거나, 새로운 속성을 추가/수정할 수 있다.

 

객체 복사

const originalObject = { name: "Alice", age: 25 };
const copiedObject = { ...originalObject }; // 원본 객체의 모든 속성을 복사

console.log(copiedObject); // { name: "Alice", age: 25 }

 

 

속성 추가/수정

const person = { name: "Alice", age: 25 };
const updatedPerson = { ...person, age: 26, city: "Seoul" }; // age 수정, city 추가

console.log(updatedPerson); // { name: "Alice", age: 26, city: "Seoul" }

 

---

전개 연산자의 특징

1. 복잡하지만 참조를 유지할 수도 있음

전개 연산자로 복사된 객체나 배열은 얕은 복사만 수행된다. 즉, 중첩된 객체나 배열의 경우, 내부 참조는 그대로 유지된다.

 

얕은 복사

const original = { nested: { key: "value" } };
const copy = { ...original };

copy.nested.key = "new value"; // 원본 객체의 속성도 변경됨
console.log(original.nested.key); // "new value"

 

2. 기존 데이터는 유지되고 덮어쓰기 가능

기존 데이터가 ...로 복사되고, 뒤에서 새로운 값이 추가되거나 덮어쒸워진다.

덮어쓰기 규칙 때문에, 순서가 중요하다.

const obj = { a: 1, b: 2 };
const updated = { ...obj, b: 3 }; // b 값 덮어쓰기
console.log(updated); // { a: 1, b: 3 }

 

---

 

전개 연산자의 실제 활용

 

1. 함수 호출 시 배열 펼치기

전개 연산자를 사용하면 배열의 요소를 함수의 인자로 한 번에 전달할 수 있다.

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

 

2. 새로운 배열/객체 생성

기존 데이터는 유지하면서, 새로운 데이터만 추가하거나 변경할 때 유용하다.

const fruits = ["apple", "banana"];
const moreFruits = [...fruits, "cherry"];

console.log(moreFruits); // ["apple", "banana", "cherry"]

 

3. 디스트럭처링과 함께 사용

전개 연산자는 디스트럭처링 즉 배열이나 객체어서 값을 추출하여 변수에 쉽게 할당할 때도 강력하다.

객체에서 배열이나 원하는 값을 추출하여 변수에 할당할 수 있다.

const person = { name: "Alice", age: 25, city: "Seoul" };
const { city, ...rest } = person; // city를 제외한 나머지를 rest에 저장

console.log(rest); // { name: "Alice", age: 25 }

 

디스트럭처링에서 ...을 사용하면 나머지 값을 한 번에 모을 수 있다. 이를 나머지 할당이라고 한다.

즉, 특정 속성만 추출하고, 나머지 속성들은 ...을 사용해서 하나의 객체로 모을 수 있다.