수정하기 - 자바스크립트에서 spread 연산자(Spread Operator)는 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

Spread 연산자(Spread Operator)는 JavaScript에서 배열이나 객체의 요소를 개별적으로 분리하여 사용할 수 있게 해주는 문법입니다. ES6(ECMAScript 2015)에서 도입된 이 기능은 코드의 가독성을 높이고, 배열 및 객체를 다루는 작업을 더 간편하게 만들어 줍니다. Spread 연산자는 주로 배열과 객체의 복사, 결합, 함수 호출 시 인수 전달 등 다양한 상황에서 활용됩니다.           기본 문법    Spread 연산자는 세 개의 점(...)으로 표현됩니다. 예를 들어, 배열에서 사용하면 다음과 같은 형태로 나타납니다:    ```javascript  const arr1 = [1, 2, 3];  const arr2 = [...arr1, 4, 5]; // arr2는 [1, 2, 3, 4, 5]가 됩니다.  ```    위의 예제에서 `arr1`의 요<a href='https://sangseek.com/sangseeks/소가/ko'>소가</a> `arr2`에 복사되고, 추가로 4와 5가 뒤에 붙습니다. 이처럼 Spread 연산자는 기존 배열의 요소를 새로운 배열로 쉽게 복사하고 결합할 수 있게 해줍니다.           배열 복사    Spread 연산자는 배열을 복사할 때 유용합니다. 다음은 배열을 복사하는 예제입니다:    ```javascript  const originalArray = [1, 2, 3];  const copiedArray = [...originalArray];    console.log(copiedArray); // [1, 2, 3]  ```    이 경우 `copiedArray`는 `originalArray`의 얕은 복<a href='https://sangseek.com/sangseeks/사본/ko'>사본</a>이 됩니다. 즉, 원본 배열의 요소가 변경되더라도 복사본에는 영향을 미치지 않습니다.           배열 결합    Spread 연산자는 여러 배열을 결합할 때도 유용합니다:    ```javascript  const array1 = [1, 2, 3];  const array2 = [4, 5, 6];  const combinedArray = [...array1, ...array2];    console.log(combinedArray); // [1, 2, 3, 4, 5, 6]  ```    위의 예제에서 `array1`과 `array2`의 요소가 결합되어 새로운 배열 `combinedArray`가 생성됩니다.           객체 복사 및 결합    Spread 연산자는 객체에서도 사용할 수 있습니다. 객체의 복사 및 결합도 간편하게 처리할 수 있습니다:    ```javascript  const obj1 = { a: 1, b: 2 };  const obj2 = { b: 3, c: 4 };  const combinedObj = { ...obj1, ...obj2 };    console.log(combinedObj); // { a: 1, b: 3, c: 4 }  ```    위의 예제에서 `obj1`과 `obj2`를 결합할 때, 동일한 키(b)가 있을 경우 `obj2`의 값이 우선시됩니다. 따라서 `combinedObj`의 `b`는 3이 됩니다.           함수 호출 시 인수 전달    Spread 연산자는 배열을 함수의 인수로 전달할 때도 유용합니다. 예를 들어, 다음과 같이 사용할 수 있습니다:    ```javascript  const numbers = [1, 2, 3];  const sum = (a, b, c) => a + b + c;    console.log(sum(...numbers)); // 6  ```    위의 예제에서 `numbers` 배열의 요소가 개별 인수로 분리되어 `sum` 함수에 전달됩니다.           주의사항    Spread 연산자는 얕은 복사(shallow copy)를 수행합니다. 즉, 객체나 배열의 중첩된 구조가 있을 경우, 내부 요소는 복사되지 않고 참조만 복사됩니다. 다음 예제를 통해 이를 확인할 수 있습니다:    ```javascript  const original = [{ a: 1 }, { b: 2 }];  const copy = [...original];    copy[0].a = 10;    console.log(original[0].a); // 10  ```    위의 예제에서 `copy`의 첫 번째 요소를 변경하면 `original`의 첫 번째 요소도 영향을 받습니다. 이는 두 배열이 동일한 객체를 참조하고 있기 때문입니다.           결론    Spread 연산자는 JavaScript에서 배열과 객체를 다루는 데 있어 매우 유용한 도구입니다. 배열의 복사, 결합, 객체의 병합, 함수 호출 시 인수 전달 등 다양한 상황에서 활용할 수 있으며, 코드의 가독성을 높이고 작성하는 데 드는 노력을 줄여줍니다. 그러나 얕은 복사로 인해 중첩된 구조를 다룰 때는 주의가 필요합니다. 이러한 특성을 이해하고 활용하면 JavaScript 프로그래밍에서 더 효율적이고 깔끔한 코드를 작성할 수 있습니다.