What does '...' mean in JavaScript?
Last Updated :
07 Mar, 2025
The '...' (or 3 dot symbol) in JavaScript is known as the Spread operator or Rest operator based on the usage. This syntax is used to expand the iterable into individual elements such as arrays, objects, etc.
Syntax for Spread Operator
cosnt a1 = [ 10, 20, 30, 40 ];
const a2 = [ ...a1, 50]; // Extracting the array elements using Spread Operator
// Final value of a2 => [ 10, 20, 30, 40, 50 ]
Syntax for Rest Parameter
const a = [ 10, 20, 30, 40, 50 ]
const [ a1 , ... restA ] = a; // Destructureing the aray using Rest Operator
// Final value of a1 => 10, restA => [ 20, 30, 40, 50 ]
The meaning of "..." in JavaScript can be interpreted in the following context.
Spread Operator (...)
The spread operator takes an array or object and spreads its elements or properties into individual components. It’s typically used when we need to pass an array’s elements into a function, combine arrays, or clone objects.
Now let's understand the uses of spread operator using some examples:
Spreading Arrays
One common use of the spread operator is to easily expand arrays. This is useful when we want to combine arrays or make copies without altering the original.
Example: This example creates a new array by adding few elements in the given array.
JavaScript
const a = [ 10, 20, 30 ];
const newA = [...a, 40, 50 ];
console.log(newA);
Output[ 10, 20, 30, 40, 50 ]
Passing Array Elements as Function Arguments
The spread operator can also be used to pass array elements as individual arguments to a function.
Example: This example passes the array using spread operator to pass individual elements as arguments.
JavaScript
const a = [10, 20, 30];
const maxNum = Math.max(...a);
console.log(maxNum);
Cloning Arrays
The spread operator makes it simple to create shallow copies of arrays.
Example: This example creates a clone of the given array using spread operator.
JavaScript
const a1 = ['apple', 'banana', 'cherry'];
const a2 = [...a1];
console.log(a2);
Output[ 'apple', 'banana', 'cherry' ]
Spreading Objects
The spread operator can also be applied to objects it allows us to copy or merge them.
Example: This example creates a new object with exetended properties using the given object.
JavaScript
const obj1 = { name: 'Ajay', age: 25 };
const obj2 = { ...obj1, city: 'New York' };
console.log(obj2);
Output{ name: 'Ajay', age: 25, city: 'New York' }
Rest Operator (...)
The rest operator is the inverse of the spread operator. While the spread operator expands elements, the rest operator collects multiple elements or properties into a single entity, usually an array.
Now let's understand uses of rest operator using some examples:
Using Rest in Function Parameters
The most common use of the rest operator is in function parameters where you don’t know how many arguments will be passed. The rest operator gathers all arguments into an array.
Example: This example convertes the array passed as arguments into individual elements in function declaraion using rest parameter.
JavaScript
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3));
console.log(sum(4, 5, 6, 7));
Destructuring Arrays with Rest
The rest operator can also be used in array destructuring to collect the remaining elements after certain ones are assigned.
Example: This example separates or destructure the elements as first, second and rest elements.
JavaScript
const [first, second, ...rest] = [10, 20, 30, 40, 50];
console.log("First element =", first);
console.log("Second element =", second);
console.log("Rest elements =", rest);
OutputFirst element = 10
Second element = 20
Rest elements = [ 30, 40, 50 ]
Destructuring Objects with Rest
The rest operator can also be used to extract specific properties from an object, while collecting the remaining properties in a new object.
Example: This example desctructures the object and extracts properties from the object.
JavaScript
const o = { name: 'Sandeep', age: 30, city: 'Jaipur', profession: 'CEO' };
const { name, ...rest } = o;
console.log(name);
console.log(rest);
OutputSandeep
{ age: 30, city: 'Jaipur', profession: 'CEO' }
Similar Reads
What does +_ operator mean in JavaScript ?
Unary Operator: A unary operation contain only one operand. Here, the '+' unary plus operator converts its operand to Number type. While it also acts as an arithmetic operator with two operands which returns an addition result on calculation. JavaScript Identifiers: Javascript Identifiers are used t
2 min read
What does !== undefined mean in JavaScript ?
In JavaScript, !== is a strict inequality operator, and undefined is a special value representing the absence of a value or the lack of an assigned value to a variable. The !== operator checks for both value and type equality, and !== undefined is used to verify if a variable is not equal to the und
1 min read
What Does javascript:void(0) Mean?
javascript:void(0) is commonly used in HTML to create a link that doesnât perform any action or navigate to a new page. When placed in the href attribute of an <a> tag, it allows the link to execute JavaScript code without reloading or changing the current page. This is particularly useful for
4 min read
What is JavaScript?
JavaScript is a powerful and flexible programming language for the web that is widely used to make websites interactive and dynamic. JavaScript can also able to change or update HTML and CSS dynamically. JavaScript can also run on servers using tools like Node.js, allowing developers to build entire
6 min read
What is trim in JavaScript ?
JavaScript trim is a built-in function that is used to trim a string. A string is nothing but a group of characters. The trim ( ) removes whitespaces from both ends i.e. start and end of the string. We have to create an instance for a string class to invoke trim( ). It does not affect the original s
1 min read
What is $ {} in JavaScript ?
In JavaScript, the ${} syntax is used within template literals, also known as template strings. Template literals, introduced in ECMAScript 6 (ES6), provide a convenient way to create strings with embedded expressions. They are enclosed within backticks (`) instead of single quotes ('') or double qu
2 min read
What are these triple dots (...) in JavaScript ?
In JavaScript, there are multiple ways in which we can assign the value of one object to another. Sometimes we do not know the exact number of arguments that are to be assigned. In this case, the triple dots are used. The triple dots are known as the spread operator, which takes an iterable(array,
4 min read
What is arguments in JavaScript ?
In this article, we will learn about arguments object in JavaScript in detail. Like what is arguments object in JavaScript and then we will discuss some programs using arguments object. We will discuss the following points: What is the arguments in JavaScript?Programs related to arguments object.The
3 min read
What is Undefined X 1 in JavaScript ?
JavaScript is one of the most popular lightweight, interpreted compiled programming languages. It is single-threaded and synchronous in nature. Scripts(program in JavaScript) re executed as plain text. They can be either written directly on our page or in an external JavaScript file. JavaScript can
2 min read
Why learn JavaScript Foundations ?
JavaScript is like a cornerstone in the world of programming languages. It's famous for being adaptable and everywhere. No matter if you're into making websites, or mobile apps, or diving into server stuff, understanding the basics of JavaScript is super important. Let's talk about why it's so cruci
4 min read