[JavaScript] 스프레드 연산자(Spread Operator)

스프레드 연산자(Spread Operator)

들어가며

• 자바스크립트(JavaScript) ES6에 추가된 스프레드 연산자(Spread Operator)에 대해 알아보자.

 

스프레드 연산자(Spread Operator)

개념

• 스프레드 연산자(@...@)는 자바스크립트에서 배열(Array)이나 객체(Object)를 확장하거나 펼치는데 사용된다.
• 이 연산자를 사용하면 배열이나 객체의 요소를 추출하거나 복제하여 다른 배열이나 객체에 포함시킬 수 있다.
• 스프레드 연산자는 코드를 더 간결하게 만들고 배열이나 객체를 조작하거나 복제할 때 유용하게 사용된다.

 

활용 방법

① 배열(Array)에서의 스프레드 연산자 활용

• 배열에서 스프레드 연산자는 다음과 같이 사용될 수 있다.

const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5, 6];    // 또는 [4, 5, 6, ...numbers]

console.log(moreNumbers); // 출력: [1, 2, 3, 4, 5, 6]

 

② 함수 호출 시 배열 요소 전달하기

• 함수 호출 시, 스프레드 연산자를 사용하여 배열의 요소를 인수로 전달할 수 있다.

function addNumbers(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
const sum = addNumbers(...numbers);

console.log(sum); // 출력: 6

 

③ 객체(Object)에서의 스프레드 연산자 활용

• 객체에서도 스프레드 연산자를 사용하여 속성을 병합하거나 복제할 수 있다.

const person = { name: 'John', age: 30 };
const employee = { ...person, position: 'Developer' };    // 병합

console.log(employee);
// 출력: { name: 'John', age: 30, position: 'Developer' }

const person = { name: 'John', age: 30 };
const clonedPerson = { ...person };    // 복제

console.log(clonedPerson);
// 출력: { name: 'John', age: 30 }

 

참고 사이트

전개 구문 - JavaScript | MDN