Categories: JavaScript

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

전개 구문이란?

자바스크립트의 전개 구문(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)

결론

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

suover

Recent Posts

그림으로 쉽게 배우는 자료구조와 알고리즘: 미션1 | 메모리 검색

들어가며 소프트웨어를 개발할 때 메모리 관리 방식은 프로그램의 안정성과 성능을 좌우하는 핵심 요소입니다. 특히 자바스크립트,…

4일 ago

만들면서 쉽게 배우는 컴퓨터 구조: 미션1 | 진리표부터 회로 구현까지

들어가며 소프트웨어 개발자는 코드가 어떻게 실행되는지 정확히 이해해야 할 필요가 있습니다. 우리가 작성한 프로그램은 결국…

5일 ago

웹 서버(Web Server)와 WAS(Web Application Server) 알아보기

서론 현대 웹 애플리케이션 아키텍처에서 웹 서버(Web Server) 와 웹 애플리케이션 서버(WAS, Web Application Server)…

1개월 ago

HTTP 헤더(Header)란 무엇인가?

HTTP 헤더(Header)란? HTTP(Header)는 클라이언트와 서버 간에 교환되는 메타데이터로, 요청(Request)과 응답(Response)에 부가적인 정보를 실어 나르는 역할을…

2개월 ago

인프런 워밍업 클럽 스터디 3기 – 백엔드 클린 코드, 테스트 코드 후기

Readable Code: 읽기 좋은 코드를 작성하는 사고법Practical Testing: 실용적인 테스트 가이드 강의와 함께한 인프런 워밍업 클럽…

2개월 ago

인프런 워밍업 클럽 스터디 3기 – 백엔드 클린 코드, 테스트 코드 4주차 회고

Readable Code: 읽기 좋은 코드를 작성하는 사고법Practical Testing: 실용적인 테스트 가이드 강의와 함께한 인프런 워밍업 클럽…

2개월 ago