[JavaScript] 전개 연산자 (Spread Operator, ...)

전개 연산자 (Spread Operator, ...)

들어가며

• 자바스크립트(JavaScript)에서 사용할 수 있는 전개 연산자(Spread Operator, @...@)에 대해 정리해본다.

 

전개 연산자(Spread Operator, @...@)

개념

• 배열(Array)이나 객체(Object)를 쉽게 확장하거나 복사할 수 있는 기능
• 배열, 객체, 함수 호출에서 다양하게 사용할 수 있다.
  • 배열의 병합 & 복사
  • 객체의 병합 & 복사
  • 함수 호출 시 인수 확장
• 전개 연산자를 사용할 때, 얕은 복사(Shallow Copy)가 이루어진다.
• ES6(ECMAScript 2015)부터 사용할 수 있다.

 

얕은 복사는 객체나 배열의 최상위 수준만 복사한다. (중첩된 객체나 배열은 원본 데이터에 대한 '참조'를 유지한다.) 따라서 전개 연산자를 사용하여 복사한 객체나 배열의 요소를 변경하면, 원본 데이터의 요소 또한 변경된다.

 

사용 예

① 배열에서의 전개 연산자

• 다른 배열을 병합하거나 복사할 때 사용된다.

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

const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4, 5, 6]

 

② 객체에서의 전개 연산자

• 객체를 병합하거나 복사할 때 유용하다.

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

const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 }

 

• 객체에서도 전개 연산자를 사용하여 얕은 복사가 가능하다.

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

console.log(objCopy); // { a: 1, b: 2 }  (얕은 복사)

 

③ 함수 호출에서의 전개 연산자

• 배열을 함수의 개별 인수로 전달할 때 사용된다.

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

const numbers = [1, 2, 3];

console.log(sum(...numbers)); // 6

 

④ 나머지 매개변수와 전개 연산자

• 전개 연산자는 나머지 매개변수(Rest Parameter, @...@)와 유사하게 생겼다.
• 나머지 매개변수는 함수 정의에서 사용되며, 여러 인수를 하나의 배열로 모을 때 사용된다.

function myFunc(...args) {    // 나머지 변수
  console.log(args); // 배열 형태로 출력됨
}

myFunc(1, 2, 3); // [1, 2, 3]   -> 여러 개의 인수를 하나의 배열로 모은다.

 

⑤ 리액트(React.js)에서의 상태 관리 (배열, 객체)

배열 상태 관리

• [Add Item] 버튼을 클릭할 때마다 1씩 증가된 숫자를 @<li>@ 형태로 표시한다.

import { useState } from 'react';

function App() {
  const [items, setItems] = useState([1, 2, 3]);

  const addItem = () => {
    setItems([...items, items.length + 1]);
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}

export default App;

 

객체 상태 관리

• @[Increase Age]@ 버튼을 클릭할 때마다, 객체의 @age@ 키(Key)의 값을 1씩 증가시킨다.

import { useState } from 'react';

function ObjectExample() {
  const [user, setUser] = useState({
    name: 'John',
    age: 30,
    city: 'New York'
  });

  const updateAge = () => {
    setUser({ ...user, age: user.age + 1 });
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <p>City: {user.city}</p>
      <button onClick={updateAge}>Increase Age</button>
    </div>
  );
}

export default ObjectExample;

 

참고 사이트

전개 구문 - JavaScript | MDN

나머지 매개변수 - JavaScript | MDN