본문 바로가기
프로그래밍/JavaScript

JavaScript Spread 구문

by 꾸션 2022. 5. 2.

JavaScript의 Spread 연산자는 배열, 객체 또는 문자열과 같은 iterable 요소를 분해하여 개별 요소로 전개하는 데 사용되는 문법입니다. Spread 연산자는 일반적으로 함수 호출, 배열 생성 및 객체 생성과 같은 곳에서 사용됩니다. 이번 글에서는 JavaScript의 Spread 연산자에 대해 자세히 알아보겠습니다.

 

배열에서 Spread 연산자 사용하기

배열에서 Spread 연산자를 사용하면 기존의 배열 요소를 새로운 배열로 전개할 수 있습니다. 다음 예제를 살펴보세요.

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

console.log(arr2); // [1, 2, 3, 4, 5]

위의 예제에서는 Spread 연산자를 사용하여 arr1 배열의 요소를 새로운 배열인 arr2로 전개합니다. 새로운 배열에는 arr1의 요소와 4, 5라는 새로운 요소가 포함됩니다.

 

함수 호출에서 Spread 연산자 사용하기

함수 호출에서 Spread 연산자를 사용하면 배열을 함수의 인수로 전달할 수 있습니다. 다음 예제를 살펴보세요.

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

const arr = [1, 2, 3];

console.log(sum(...arr)); // 6

위의 예제에서는 Spread 연산자를 사용하여 arr 배열을 sum 함수의 인수로 전달합니다. sum 함수는 배열의 첫 번째, 두 번째 및 세 번째 요소를 인수로 사용하여 합계를 반환합니다.

 

객체에서 Spread 연산자 사용하기

객체에서 Spread 연산자를 사용하면 객체의 속성을 다른 객체로 복사할 수 있습니다. 다음 예제를 살펴보세요.

const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 };

console.log(obj2); // { x: 1, y: 2, z: 3 }

위의 예제에서는 Spread 연산자를 사용하여 obj1 객체의 속성을 obj2 객체로 전개합니다. obj2 객체는 obj1의 x 및 y 속성과 z라는 새로운 속성을 포함합니다.

 

문자열에서 Spread 연산자 사용하기

문자열에서 Spread 연산자를 사용하면 문자열을 배열로 변환할 수 있습니다. 다음 예제를 살펴보세요.

const str = "hello";
const arr = [...str];

console.log(arr); // ['h', 'e', 'l', 'l', 'o']

위의 예제에서는 Spread 연산자를 사용하여 str 문자열을 arr 배열로 전개합니다. arr 배열은 문자열의 각 문자를 개별 요소로 포함합니다.

 

결론

JavaScript의 Spread 연산자는 iterable 요소를 분해하여 개별 요소로 전개하는 데 사용됩니다. Spread 연산자는 배열, 객체, 문자열 및 함수 호출에서 사용할 수 있으며 코드를 간결하고 읽기 쉽게 만들어줍니다. 또한, 객체의 속성을 다른 객체로 복사하거나 배열의 요소를 다른 배열로 복사하는 데에도 유용하게 사용됩니다. Spread 연산자를 적절하게 활용하면 JavaScript 코드를 더욱 효율적이고 간결하게 작성할 수 있습니다.

 

반응형

댓글