전개 연산자(spread operator)는 자바스크립트에서 배열, 객체, 문자열 등 반복 가능한(iterable) 객체를 펼쳐서 개별 요소로 분리하는 데 사용되는 유용한 문법이다.
... 기호를 사용하여 표현하며, 다양한 상황에서 코드의 가독성과 간결성을 높여준다.
예시
1. 배열 전개
배열의 요소를 다른 배열 안에 펼쳐 넣거나, 배열을 함수의 인자로 전달할 때 사용된다.
기존 방식
const arr1 = [1, 2, 3];
const arr2 = arr1.concat([4, 5]);
console.log(arr2); // [1, 2, 3, 4, 5]
전개 연산자 사용
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]2. 객체 복사 및 병합
객체의 속성을 다른 객체 안에 펼쳐 넣거나, 객체를 복사할 때 사용된다.
기존 방식
const obj1 = { a: 1, b: 2 };
const obj2 = Object.assign({}, obj1, { c: 3 });
console.log(obj2); // { a: 1, b: 2, c: 3 }전개 연산자 사용
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }3. 문자열 전개
문자열을 개별 문자로 분리하여 배열로 만들 때 사용된다.
기존 방식
const str = "hello";
const chars = str.split("");
console.log(chars); // ['h', 'e', 'l', 'l', 'o']
전개 연산자 사용
const str = "hello";
const chars = [...str];
console.log(chars); // ['h', 'e', 'l', 'l', 'o']4. 함수 호출 시 배열 요소 전달
배열의 각 요소를 함수의 인자로 전달할 때 전개 연산자를 사용하면 코드 가독성이 향상된다.
기존 방식
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(numbers[0], numbers[1], numbers[2])); // 6
전개 연산자 사용
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6
전개 연산자의 주요 장점
- 가독성 향상: 배열이나 객체를 펼쳐서 사용하는 코드를 간결하고 명확하게 만들어준다.
- 불변성 유지: 객체나 배열을 복사할 때 원본 데이터를 변경하지 않고 새로운 객체나 배열을 생성할 수 있다.
- 유연성 향상: 함수의 인자로 배열의 요소를 개별적으로 전달하거나, 여러 배열 또는 객체를 쉽게 합칠 수 있다.