---
title: "What is JavaScript's spread operator (...), and how is it used?"  
description: "What is JavaScript's spread operator (...), and how is it used?"  
author: "Sandra Emily"  
published: 2024-06-18  
updated: 2024-06-19  
canonical: https://www.mindstick.com/forum/160760/what-is-javascript-s-spread-operator-and-how-is-it-used  
category: "javascript"  
tags: ["web development", "javascript", "front-end development"]  
reading_time: 3 minutes  

---

# What is JavaScript's spread operator (...), and how is it used?

What is [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript)'s [spread](https://yourviews.mindstick.com/story/1544/spread-of-indian-culture-abroad) [operator](https://www.mindstick.com/blog/144/union-intersection-and-except-operator-in-sql-server) (...), and how is it used?

## Replies

### Reply by Ravi Vishwakarma

The spread operator (`...`) in JavaScript is a syntax that allows an **iterable** (**such as an array or string**) or an object to be expanded in places where multiple elements or [**key-value pairs**](https://www.mindstick.com/blog/304386/implementation-of-data-structures-in-javascript) are expected.

This operator is useful for various purposes, including array and **object manipulation**, **function arguments**, and more.

Here’s a detailed explanation of how the spread operator can be used:

#### 1. Expanding [Arrays](https://www.mindstick.com/blog/304376/describe-how-to-implement-a-stack-and-a-queue-in-javascript-using-arrays)

The spread operator can be used to expand the elements of an array into individual elements.

```javascript
const numbers = [1, 2, 3];
console.log(...numbers); // Output: 1 2 3

// Creating a new array by combining existing arrays
const moreNumbers = [4, 5, 6];
const combined = [...numbers, ...moreNumbers];
console.log(combined); // Output: [1, 2, 3, 4, 5, 6]
```

#### 2. Copying Arrays

The spread operator provides an easy way to create a shallow copy of an array.

```javascript
const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // Output: [1, 2, 3]
```

#### 3. Function Arguments

When calling a function, the spread operator can be used to pass an array of arguments as individual arguments to the function.

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

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

#### 4. Expanding Objects

The spread operator can also be used with objects to copy properties from one object to another or to combine multiple objects.

```javascript
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

// Creating a new object by combining existing objects
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); // Output: { a: 1, b: 2, c: 3, d: 4 }

// Copying an object
const copyObj = { ...obj1 };
console.log(copyObj); // Output: { a: 1, b: 2 }
```

#### 5. Rest Parameters

The spread operator is often confused with rest parameters, which also use the `...` syntax but have a different purpose. Rest parameters allow a function to accept an indefinite number of arguments as an array.

```javascript
function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3)); // Output: 6
```

#### Note

- **Arrays**: Expand elements, copy arrays, combine arrays.
- **Function Arguments**: Pass array elements as individual arguments.
- **Objects**: Copy properties, and combine objects.
- **Rest Parameters**: Collect function arguments into an array.


---

Original Source: https://www.mindstick.com/forum/160760/what-is-javascript-s-spread-operator-and-how-is-it-used

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.