JavaScript Spread 연산자 (...) 소개, 개념, 사용법, 예제 코드

JavaScript에서 Spread 연산자(...) 소개, 개념, 사용법, 예제 코드

 

 

Spread 연산자는 JavaScript에서 다양한 상황에서 유용하게 활용되는 중요한 개념 중 하나입니다. 이 연산자를 이해하고 사용하는 것은 객체와 배열을 다룰 때 매우 유용합니다. 이 글에서는 Spread 연산자의 개념, 사용법, 그리고 예시 코드를 통해 이해해보겠습니다.

 

Spread 연산자란?

 

Spread syntax (...) - JavaScript | MDN

 

Spread 연산자의 개념

Spread 연산자(...)는 배열, 객체, 문자열 등의 요소를 확장하거나 복사하는데 사용됩니다. 이 연산자를 통해 요소를 분해하고 다른 배열 또는 객체에 펼칠 수 있습니다.

 

Spread 연산자의 구문

• 배열에서 사용하는 경우: [...array]
• 객체에서 사용하는 경우: {...object}
• 문자열에서 사용하는 경우: ...string

 

 

배열에서 Spread 연산자 사용

 

 

 

배열 복사하기

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

 

배열 확장하기

const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5];
console.log(array2); // [1, 2, 3, 4, 5]

 

 

객체에서 Spread 연산자 사용

 

인생사진 쏙쏙 코딩네컷 | 스파르타코딩클럽 무료특강

 

객체 복사하기

const originalObject = { name: 'Alice', age: 30 };
const copiedObject = { ...originalObject };
console.log(copiedObject); // { name: 'Alice', age: 30 }

 

객체 확장하기

const object1 = { name: 'Alice' };
const object2 = { age: 30, ...object1 };
console.log(object2); // { age: 30, name: 'Alice' }

 

 

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

 

배열 요소를 함수 인수로 전달

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

const numbers = [1, 2, 3];
const result = sum(...numbers);
console.log(result); // 6

 

배열을 합치기

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

 

 

문자열에서 Spread 연산자 사용

 

Spread syntax (...) - JavaScript | MDN

 

문자열을 문자 배열로 변환

const str = 'Hello';
const chars = [...str];
console.log(chars); // ['H', 'e', 'l', 'l', 'o']

 

문자 배열을 다시 문자열로 변환

const chars = ['H', 'e', 'l', 'l', 'o'];
const str = chars.join('');
console.log(str); // 'Hello'

 

 

끝으로

 

Spread 연산자(...)는 JavaScript에서 객체와 배열을 다룰 때 유용한 기능 중 하나입니다. 이를 통해 복사, 확장, 함수 호출, 문자열 다룸 등 다양한 작업을 간편하게 수행할 수 있습니다. Spread 연산자를 잘 활용하면 코드를 더 간결하고 가독성 있게 작성할 수 있을 것입니다.

 

▼ 아래 글도 읽어보세요! ▼

 

javascript 배열 안 숫자 중 최대값 찾는 다양한 방법 - 알고리즘 풀이

 

JavaScript 화살표 함수 소개, 특징, 활용, 예시 코드, 일반 함수와 차이점

 

부트스트랩 쉽게 사용하는 방법 - 웹사이트 제작 필수 프로그램