자바스크립트의 전개 구문 (Spread Syntax)은 ES6부터 도입된 강력한 기능으로, 배열이나 객체의 요소를 펼쳐서 제공하거나 복사할 수 있는 문법입니다. 이 글에서는 자바스크립트의 전개 구문에 대해 알아보고, 어떻게 사용하는지 예제 코드를 통해 살펴보겠습니다.

배열에서의 전개 구문 사용하기

전개 구문은 배열에서 매우 유용하게 사용될 수 있습니다. 배열의 요소를 간편하게 펼칠 수 있어 다른 배열과 결합하거나 함수의 인자로 전달할 때 매우 편리합니다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArray = [...arr1, ...arr2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

위 예제에서는 전개 구문을 사용하여 arr1과 arr2의 모든 요소를 combinedArray에 펼쳐서 결합하고 있습니다.

전개 구문을 사용하여 배열을 간단히 복사할 수도 있습니다.

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // [1, 2, 3]

객체에서의 전개 구문 사용하기

전개 구문은 객체에서도 사용할 수 있습니다. 객체의 속성들을 펼쳐서 새로운 객체를 생성하거나, 기존 객체와 병합할 때 유용하게 사용할 수 있습니다.

const obj1 = { name: 'Alice', age: 28 };
const obj2 = { height: 170 };

const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // { name: 'Alice', age: 28, height: 170 }

위 예제에서는 obj1과 obj2의 속성들을 전개 구문으로 펼쳐서 combinedObject를 생성하고 있습니다.

함수 호출에서의 전개 구문 사용하기

전개 구문은 함수 호출 시에도 유용하게 사용될 수 있습니다. 함수에 배열이나 객체를 인자로 전달할 때, 전개 구문을 사용하여 요소들을 펼쳐서 전달할 수 있습니다.

function greet(name, age) {
  console.log(`Hello ${name}! You are ${age} years old.`);
}

const user = ['Alice', 28];
greet(...user); // Hello Alice! You are 28 years old.

위 예제에서는 greet 함수에 배열을 전달할 때 전개 구문을 사용하여 배열의 요소들을 펼쳐서 함수의 인자로 전달하고 있습니다.

결론

자바스크립트의 전개 구문은 배열이나 객체의 요소를 편리하게 펼치는 기능으로, 코드를 간편하게 작성하고 가독성을 높일 수 있습니다. 배열과 객체의 다양한 상황에서 전개 구문을 활용하여 코드를 개선해보세요!