JavaScript

전개연산자(Spread Operator)

전개 연산자(Spread Operator)는 ES6에서 도입된 문법으로, 배열이나 객체의 요소를 다른 배열이나 객체에 편리하게 복제하거나 합칠 때 사용한다. 전개 연산자는 ...로 표현되며, 얕은 복사(shallow copy)를 통해 원본 데이터를 보존하면서 새로운 배열이나 객체를 생성할 수 있게 해준다.

배열에서의 전개 연산자 사용

전개 연산자를 사용하면 배열의 요소를 다른 배열로 쉽게 복사하거나, 여러 배열을 합치는 작업을 간결하게 수행할 수 있다. 이전에는 concat() 메서드나 Array.prototype.push.apply()를 사용했지만, 전개 연산자를 통해 더욱 직관적인 코드 작성이 가능해졌다.

concat() 대신 전개 연산자 사용

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

// concat()을 사용한 배열 합치기
let newArr = arr1.concat(arr2, arr3);

// 전개 연산자를 사용한 동일한 작업
let newArr2 = [...arr1, ...arr2, ...arr3];

push.apply 대신 전개 연산자 사용

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

// push.apply를 사용한 배열 요소 추가
Array.prototype.push.apply(arr1, arr2);

// 전개 연산자를 사용한 동일한 작업
arr1.push(...arr2);

객체에서의 전개 연산자 사용

전개 연산자는 객체 리터럴에서도 사용될 수 있으며, 이를 통해 객체의 속성들을 다른 객체에 쉽게 복제하거나 여러 객체를 하나로 합칠 수 있다. 이 과정에서도 원본 객체는 변경되지 않는다.
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

// 객체 합치기
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { a: 1, b: 2, c: 3, d: 4 }

전개 연산자의 장점

  • 간결성: 코드가 더욱 간결하고 읽기 쉬워진다.
  • 불변성 유지: 원본 데이터를 변경하지 않고 새로운 데이터를 생성할 수 있어, 불변성을 유지하는 프로그래밍 패턴에 적합하다.
  • 유연성: 배열이나 객체의 요소를 쉽게 추출하거나 합치는 등의 작업을 유연하게 수행할 수 있다.
전개 연산자는 배열이나 객체를 조작할 때 불변성을 유지하면서 코드를 깔끔하게 작성할 수 있게 해주는 강력한 도구이다. 특히 리액트와 같은 라이브러리에서는 상태 관리에서 데이터의 불변성을 유지하는 데 큰 도움을 준다.