javascript

JavaScript 자바스크립트 전개 구문 (spread syntax) 사용법

by

전개 구문이란?

자바스크립트의 전개 구문(Spread Syntax)은 ES6에서 도입된 자바스크립트의 문법으로, 배열이나 객체의 요소를 하나씩 분리하여 사용할 수 있게 해줍니다. 문법적으로는 세 개의 점(…)을 사용합니다. 이 구문은 배열 또는 객체를 확장하거나 복사할 때 유용하게 사용됩니다.

전개 구문의 특징

자바스크립트의 전개 구문(Spread Syntax)은 배열이나 객체의 요소들을 하나의 공간에서 확장하여 사용할 수 있게 하는 문법적 특성을 가지고 있습니다. 이 구문은 개발자에게 코드를 더 간결하고 읽기 쉽게 작성할 수 있는 방법을 제공합니다. 전개 구문의 주요 특징들을 자세히 살펴보겠습니다.

문법적 간결성

전개 구문은 …라는 세 개의 점으로 표현됩니다. 이 구문을 사용함으로써, 배열이나 객체의 요소들을 간결하게 표현할 수 있습니다. 예를 들어, let newArray = […oldArray];와 같은 식으로 배열을 복사할 수 있으며, 이는 전통적인 반복문이나 Array.prototype.concat 메소드를 사용하는 것보다 훨씬 간단합니다.

배열과 객체의 복사 및 결합

전개 구문은 배열이나 객체를 쉽게 복사하고 결합할 수 있게 해줍니다. 배열의 경우, 전개 구문을 사용하여 기존 배열의 모든 요소를 새 배열로 복사할 수 있으며, 이 과정에서 추가적인 요소를 삽입하는 것도 가능합니다. 객체에 대해서도 마찬가지로, 객체의 속성을 새 객체로 복사하거나, 두 객체를 결합하여 새로운 객체를 생성할 수 있습니다.

함수 인자로의 활용

함수의 인자로 배열이나 객체를 전달할 때, 전개 구문을 사용하면 배열이나 객체의 각 요소를 개별 인자로 확장하여 전달할 수 있습니다. 이는 특히 가변 인자를 받는 함수에서 유용하며, Function.prototype.apply의 대체제로도 사용될 수 있습니다.

가변성과 불변성의 조화

전개 구문은 기존의 데이터 구조를 변경하지 않고 새로운 데이터 구조를 생성하는 불변 패턴을 쉽게 구현할 수 있게 해줍니다. 이는 함수형 프로그래밍에서 중요한 개념으로, 데이터의 불변성을 유지하면서도 새로운 데이터 구조를 손쉽게 생성할 수 있게 해줍니다.

동적 속성 할당

객체에서 전개 구문을 사용할 때, 계산된 속성명을 사용하여 동적으로 객체의 속성을 할당할 수 있습니다. 이는 객체 리터럴 내에서 속성명을 동적으로 결정할 수 있게 해주는 유연성을 제공합니다.

전개 구문 사용법

배열에서의 사용

JavaScript
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // arr2는 [1, 2, 3, 4, 5]
JavaScript

이 예제에서 arr2는 arr1의 모든 요소를 복사하고, 추가적인 요소 4와 5를 뒤에 붙인 새로운 배열을 생성합니다.

객체에서의 사용

JavaScript
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 }; // obj2는 { a: 1, b: 2, c: 3 }
JavaScript

여기서 obj2는 obj1의 모든 속성을 복사하고, 새로운 속성 c를 추가합니다.

전개 구문 활용법

함수 인자로의 활용

전개 구문은 함수의 인자를 다룰 때 매우 유용합니다. 가변 인자를 갖는 함수에 배열을 인자로 전달할 때 특히 유용합니다.

JavaScript
function sum(...args) {
  return args.reduce((acc, current) => acc + current, 0);
}

let numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6
JavaScript

이 예제에서 sum 함수는 여러 개의 인자를 받아 그 합을 반환합니다. 전개 구문을 사용하여 배열 numbers의 각 요소를 개별 인자로 전달합니다.

배열 복사 및 병합

배열을 복사하거나 여러 배열을 병합할 때도 전개 구문이 유용합니다.

JavaScript
let arr1 = [1, 2, 3];
let arr2 = [...arr1]; // arr1의 복사본

let arr3 = [4, 5, 6];
let mergedArr = [...arr1, ...arr3]; // [1, 2, 3, 4, 5, 6]
JavaScript

이 방법은 배열을 불변하게 유지하는 데 도움이 되며, 함수형 프로그래밍 패러다임에 부합합니다.

객체 복사 및 병합

객체에 대해서도 마찬가지로 복사와 병합이 가능합니다.

JavaScript
let obj1 = { a: 1, b: 2 };
let obj2 = { b: 3, c: 4 };
let mergedObj = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }
JavaScript

이 경우 obj1과 obj2가 병합되며, 겹치는 속성은 마지막에 나타난 객체의 값으로 덮어씁니다 (b의 경우 obj2의 값인 3)

결론

자바스크립트의 전개 구문은 코드를 간결하고 명확하게 만드는 데 큰 도움이 됩니다. 배열과 객체의 핸들링을 용이하게 하며, 함수 인자의 처리를 간소화합니다. 또한, 불변성을 유지하는 패턴과 함수형 프로그래밍에 매우 적합한 특징을 가지고 있습니다. 이러한 특성은 모던 자바스크립트 개발에서 빼놓을 수 없는 중요한 요소가 되었습니다.

Leave a Comment