[콜럼Vue스] 전개연산자

**전개 연산자(Spread Operator)**는 ES6(ECMAScript 2015)에서 도입된 기능으로, 배열이나 객체를 펼쳐서 개별 요소나 프로퍼티를 다른 배열이나 객체에 복사하거나 합칠 때 사용됨. 전개 연산자는 **...(세 개의 점)**을 사용하며, 여러 가지 상황에서 활용될 수 있음.

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

배열에서 전개 연산자는 배열의 요소를 개별적으로 펼쳐서 복사하거나, 새로운 배열을 만들 때 유용하게 사용할 수 있음.

(1) 배열 복사

배열을 **깊은 복사(Deep Copy)**하거나, 기존 배열을 새로운 배열로 확장할 때 사용할 수 있음.

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // arr1을 전개하여 새로운 배열 arr2 생성

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

arr1의 모든 요소가 전개되어 arr2에 복사됨. 참조가 아닌 별도의 새로운 배열이 생성됨.

 

(2) 배열 합치기

두 개 이상의 배열을 병합할 때 전개 연산자를 사용할 수 있음.

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

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

• 두 배열 arr1과 arr2가 각각 전개되어 하나의 배열로 병합됨.

(3) 배열 요소 추가

기존 배열에 새로운 요소를 추가할 때도 전개 연산자를 사용할 수 있음.

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

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

• 기존 배열 arr에 새로운 요소를 추가하여 newArr 배열을 생성함.

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

전개 연산자는 객체에서도 동일하게 사용할 수 있으며, 객체의 프로퍼티를 복사하거나 합칠 때 유용하게 활용됨.

(1) 객체 복사

객체의 프로퍼티를 **얕은 복사(Shallow Copy)**할 때 전개 연산자를 사용할 수 있음.

const obj1 = { name: "Jerry", age: 25 };
const obj2 = { ...obj1 }; // obj1을 전개하여 obj2 생성

console.log(obj2); // { name: "Jerry", age: 25 }

• obj1의 모든 프로퍼티가 전개되어 obj2에 복사됨. 새로운 객체로 생성되므로, 참조가 아닌 독립적인 객체가 됨.

(2) 객체 병합

여러 객체를 병합할 때도 전개 연산자를 사용할 수 있으며, 중복된 프로퍼티가 있을 경우 나중에 전개된 객체의 값으로 덮어씀.

const obj1 = { name: "Jerry", age: 25 };
const obj2 = { age: 30, city: "Seoul" };
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { name: "Jerry", age: 30, city: "Seoul" }

• obj1과 obj2가 병합되며, 중복된 age 프로퍼티는 **나중에 전개된 obj2의 값(30)**으로 덮어써짐.

(3) 객체에 새로운 프로퍼티 추가

기존 객체에 새로운 프로퍼티를 추가할 때도 전개 연산자를 사용할 수 있음.

const obj = { name: "Jerry", age: 25 };
const newObj = { ...obj, city: "Seoul" };

console.log(newObj); // { name: "Jerry", age: 25, city: "Seoul" }

• 기존 객체 obj에 새로운 프로퍼티 city가 추가된 새로운 객체 newObj가 생성됨.

3. 함수에서 전개 연산자 사용

함수 호출 시, 인자를 배열 형태로 전개할 수 있으며, 배열의 요소를 개별적인 인자로 전달하는 데 사용됨.

function add(a, b, c) {
  return a + b + c;
}

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

• numbers 배열이 전개되어 함수 add의 인자로 각각 전달됨.

4. Rest 파라미터와의 차이

전개 연산자는 배열이나 객체를 펼쳐서 개별 요소나 프로퍼티로 분해하는 역할을 하지만, Rest 파라미터는 함수의 매개변수에서 여러 개의 인자를 배열로 묶는 역할을 함.

전개 연산자 (Spread):

• 배열/객체를 펼침
• 사용 예: add(...numbers)

Rest 파라미터:

• 매개변수로 여러 인자를 배열로 묶음

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3)); // 6

Rest 파라미터는 함수의 인자를 배열로 묶어 처리하고, 전개 연산자는 배열이나 객체를 개별 요소로 펼쳐서 처리함.

 

5. 전개 연산자의 장점

• 가독성: 복잡한 배열이나 객체를 쉽게 복사하거나 병합할 수 있어, 코드를 더 간결하고 읽기 쉽게 만듦.
• 불변성: 객체나 배열을 수정하지 않고, 새로운 객체나 배열을 생성할 수 있어 불변성을 유지하는 데 도움이 됨.
• 함수 호출: 배열의 요소를 개별 인자로 함수에 전달할 때 유용함.

요약:

• **전개 연산자(Spread Operator)**는 **...**를 사용하여 배열이나 객체를 펼쳐서 복사하거나 병합할 때 사용됨.
• 배열에서는 배열을 복사하거나 합칠 수 있으며, 객체에서도 동일한 방식으로 사용 가능함.
• 함수 호출 시, 배열을 개별 인자로 전달할 수 있음.
• 전개 연산자는 코드의 가독성을 높이고, 배열/객체 관리를 더 효율적으로 해줌.