들어가며
“자바스크립트 확산 연산자” 는 자바스크립트에서 나타나는 독특한 문법입니다. 확산 연산자 하나의 사용법만 있는 것이 아니기 때문에 넓은 응용성을 가진 문법인 것 같습니다. 꼭 공부하고 정리해봐야겠죠?
이번 포스트에서는 배열, 함수, 문자열 등등에서 정말 다양하게 쓰이는 확산 연산자는 무엇인지 그리고 어떻게 활용될 수 있는지 정리해보았습니다.
확산 연산자 란?
스프레드 연산자라고 불리는 확산 연산자는 무언가 변수 앞에 점을 세개 (…) 붙인 모양인데요.
JavaScript의 확산 연산자(…)는 ECMAScript 6(ES6)에 도입된 구문 기능으로, 배열이나 문자열과 같은 반복 가능 개체를 개별 요소로 확장시킬 수 있습니다.
간단한 예제를 보면 아래와 같습니다.
const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3배열에 확산 연산자(…)을 앞에 붙여 배열의 요소들을 확산(분산) 시킨 것을 확인 할 수 있습니다.
이러한 기능을 통해서 기능을 구현 할 수 있습니다.
확산 연산자 활용법
배열 확산
const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5];
console.log(array2); // Output: [1, 2, 3, 4, 5]이 예에서는 ‘array1’의 요소가 새 배열 ‘array2’로 확산 됩니다. 이는 배열의 얕은 복사본을 만들거나 여러 배열을 결합하는 간결한 방법입니다.
파이썬의 expand와 같은 메소드로 사용할 수 있는 거죠.
배열 결합
const array1 = [1, 2, 3];
const array2 = [4, 5];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // Output: [1, 2, 3, 4, 5]배열은 확산 연산자를 사용하여 쉽게 결합할 수 있으므로 ‘concat()’과 같은 메서드 없이 배열을 손쉽게 합칠 수 있습니다.
물론 파이썬에는 ‘+’ 연산자로 미친듯이 간편하게 concat이 가능하지만 확산 연산자도 유용한 것 같습니다.
객체 확산 (얕은 복사)
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // Output: { a: 1, b: 2, c: 3 }확산 연산자를 사용하여 객체의 얕은 복사본을 만들고 새로운 키-값 쌍으로 확장할 수 있습니다.
함수 인자
const numbers = [1, 2, 3];
function sum(a, b, c) {
return a + b + c;
}
const result = sum(...numbers);
console.log(result); // Output: 6함수 호출에 사용될 때 확산 연산자는 배열의 개별 요소를 함수에 대한 별도의 인자로 전달할 수 있습니다.
문자열 확산
const str = 'Hello';
const letters = [...str];
console.log(letters); // Output: ['H', 'e', 'l', 'l', 'o']스프레드 연산자를 문자열에 적용하여 개별 문자로 나누고 배열을 만들 수도 있습니다.
이는 Array.from()과 동일한 결과를 보여줍니다.
const str = 'Hello';
const letters = Array.from(str);
console.log(letters); // Output: ['H', 'e', 'l', 'l', 'o']마치며
함수에 인자를 전달, 배열과 객체를 복사, 배열 및 객체 확산 등 정말 다양하게 쓰일 수 있는 확산 연산자 였습니다.
공부하다 보니 자바스크립트 외에 코틀린에도 확산 연산자가 있는 것 같네요.
저랑 코틀린이랑 만날 일은 없겠죠 …? ㅎ
참고하면 좋은 글
