What are three dots (...Spread Syntax) in Javascript?

JavaScript is a versatile programming language that constantly evolves to offer new features and enhancements. One such addition in ECMAScript 6 (ES6) was the introduction of the spread syntax, denoted by three dots (…). This seemingly simple set of characters carries powerful functionality that can greatly simplify and enhance JavaScript code. In this article, we will explore the various use cases and benefits of the three dots (called spread syntax) in JavaScript.

What are the three dots (Spread Syntax) in JavaScript?

The spread syntax in JavaScript ES6 is a powerful feature that allows you to expand an iterable, such as an array, into individual elements. It is commonly used for creating shallow copies of JavaScript objects and arrays, resulting in concise and readable code.

Syntax

The syntax for using the spread operator is denoted by three dots (…). To create a shallow copy of an array, you can use the spread syntax as follows:

let originalArray = [1, 2, 3]; 
let copiedArray = [...originalArray];

In the example above, the spread syntax is used to create a new array copiedArray that contains the same elements as originalArray. This is achieved by expanding originalArray into individual elements using the spread operator.

The spread syntax can also be used to concatenate multiple arrays or combine arrays with other values. Here's an example:

let array1 = [1, 2, 3]; 
let array2 = [4, 5, 6]; 
let combinedArray = [...array1, ...array2];

In this case, the spread syntax is used to concatenate array1 and array2 into a single array combinedArray.

The spread syntax is not limited to arrays; it can be used with any iterable, such as strings or function arguments. Here's an example with a string:

let string = "Hello";
let charArray = [...string];

In this example, the spread syntax is used to convert the string "Hello" into an array charArray, where each character of the string becomes an individual element of the array.

The spread syntax is a versatile tool in JavaScript ES6 that simplifies various coding scenarios, including making shallow copies of objects and combining arrays. It contributes to writing more concise and readable code.

Examples

Since the array data structure is widely used, it will be considered in all the subsequent examples.

1. Copying an array:

In this example, the spread syntax is used to create a shallow copy of array1 into array2. By using [...array1], each element of array1 is expanded and assigned to array2. This ensures that any changes made to array1 will not affect array2, and vice versa. It creates a new array with the same elements as the original array.

let array1 = ['h', 'e', 'l', 'l', 'o']; 
let array2 = [...array1]; 
console.log(array2); 

// Output: ['h', 'e', 'l', 'l', 'o']

2. Inserting the elements of one array into another:

The spread syntax can also be used to append the elements of one array into another array at any desired position. In the first example, the spread syntax is used to append the elements of desserts after the elements of desserts1. In the second example, the spread syntax is used to insert the elements of desserts between 'flan' and 'frozen yoghurt' in desserts2.

let desserts = ['cake', 'cookie', 'donut']; 
let desserts1 = ['icecream', 'flan', 'frozen yoghurt', ...desserts]; 
console.log(desserts1); 

// Output: ['icecream', 'flan', 'frozen yoghurt', 'cake', 'cookie', 'donut']

let desserts2 = ['icecream', 'flan', ...desserts, 'frozen yoghurt']; 
console.log(desserts2); 

// Output: ['icecream', 'flan', 'cake', 'cookie', 'donut', 'frozen yoghurt']

3. Array to arguments:

The spread syntax can be used to pass array elements as individual arguments to a function. In the first example, the elements of the numbers array are passed as arguments to the multiply function. Instead of manually passing numbers[0], numbers[1], and so on, the spread syntax simplifies the process.

In the second example, the spread syntax is used to expand the numbers array and pass its elements as arguments to the Math.min() function. The Math.min() function does not accept an array as an argument, but by using the spread syntax, the elements of the array are expanded into separate arguments for the function.

function multiply(number1, number2, number3) 
{   
    console.log(number1 * number2 * number3); 
} 
let numbers = [1, 2, 3]; 
multiply(...numbers); 
// Output: 6

let numbers = [1, 2, 300, -1, 0, -100]; 
console.log(Math.min(...numbers)); 
// Output: -100

In each of these examples, the spread syntax (...) is used to expand an array into individual elements. This allows for more concise and readable code, whether it's copying an array, inserting elements into another array, or passing array elements as arguments to a function.