Spread 연산자

YOBY·2023년 10월 18일
0

Spread 연산자는 ES6(ECMAScript 2015)에서 도입된 기능으로, 배열과 객체의 요소를 확장하거나 복사하는 데 사용됩니다.

이를 위해 ... 기호를 사용합니다.

Spread 연산자는 배열, 객체, 함수 호출 등 다양한 상황에서 활용할 수 있습니다.


배열에서의 Spread 연산자

배열 복사

const originalArray = [1, 2, 3]
const copiedArray = [...originalArray]

결과: [1, 2, 3]

요소 추가 및 연결

const array1 = [1, 2]
const array2 = [3, 4]
const combinedArray = [...array1, ...array2]

결과: [1, 2, 3, 4]

배열 요소 중간에 삽입

const array = [1, 2, 4]
const newArray = [...array.slice(0, 2), 3, ...array.slice(2)]

결과: [1, 2, 3, 4]

객체에서의 Spread 연산자

객체 복사 및 병합

const originalObject = { a: 1, b: 2 }
const copiedObject = { ...originalObject }

결과: { a: 1, b: 2 }

병합 예시:

const newObject = { ...originalObject, c: 3 }

결과: { a: 1, b: 2, c: 3 }

객체 속성 변경 또는 추가

const person = { name: "Alice", age: 30 }
const updatedPerson = { ...person, age: 31, city: "New York" }

결과: { name: "Alice", age: 31, city: "New York" }

함수 호출에서의 Spread 연산자

Spread 연산자를 사용하여 배열의 요소를 함수의 인자로 전달할 수 있습니다.

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

const numbers = [1, 2, 3];
const result = sum(...numbers);

결과: 6

Spread 연산자는 배열과 객체를 조작하고 복사하는 데 매우 유용한 도구로, 코드를 간결하게 만들고 재사용성을 높일 수 있습니다.

이를 통해 배열과 객체를 효과적으로 다룰 수 있으며, 함수 호출 시 가변 인자를 처리하는 데도 도움이 됩니다.

0개의 댓글