In JavaScript ES6, the spread operator (...) is a syntactic feature that allows you to spread the elements of an iterable (e.g., an array or a string) or the properties of an object into another array or object. It provides a concise and convenient way to work with arrays, objects, and function arguments.
Spread in Arrays:
1. Copying Arrays:
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // Output: [1, 2, 3]
2. Concatenating Arrays:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const concatenatedArray = [...array1, ...array2];
console.log(concatenatedArray); // Output: [1, 2, 3, 4, 5, 6]
3. Adding Elements to an Array:
const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4, 5];
console.log(newArray); // Output: [1, 2, 3, 4, 5]
Spread in Objects:
1. Copying Objects:
const originalObject = { name: 'John', age: 30 };
const copiedObject = { ...originalObject };
console.log(copiedObject); // Output: { name: 'John', age: 30 }
2. Merging Objects:
const object1 = { name: 'John' };
const object2 = { age: 30 };
const mergedObject = { ...object1, ...object2 };
console.log(mergedObject); // Output: { name: 'John', age: 30 }
Spread in Function Arguments:
function exampleFunction(arg1, arg2, arg3) {
console.log(arg1, arg2, arg3);
}
const args = [1, 2, 3];
exampleFunction(...args); // Output: 1 2 3
The spread operator is versatile and widely used for its ability to simplify code in various situations. It provides a concise syntax for operations like copying, concatenating, and spreading elements in arrays or objects, making JavaScript code more expressive and readable.
Spread Operator in ES6 is three dot(…) to make a copy of array without alter or muted the original array
Example
var array1 = [“Tallac”, “Ralston”, “Rose”]
var array2 = [“Ward”, “Blackwood”]
var array3 = […array1, …array2]
console.log(array3.join(‘, ‘)) // Tallac, Ralston, Rose, Ward, Blackwood
Without the Spead Operator(…) the reverse() method to get the last element from array. it alter the original array
Example:
var array1= [“Tallac”, “Ralston”, “Rose”]
var [last] = array1.reverse()
console.log(last) // Rose
console.log(peaks.join(‘, ‘)) // Rose, Ralston, Tallac
But with spead operator(…). it does not alter the original array. its make the copy of original array
Example:
var array1= [“Tallac”, “Ralston”, “Rose”]
var [last] = […array1].reverse()
console.log(last) // Rose
console.log(peaks.join(‘, ‘)) // Tallac, Ralston, Rose
We can also use the spread operator to collect function arguments as an array. in the given below example .we build a function that takes in n number of arguments using the spread operator
function city(...args) {
var [start, ...remaining] = args
var [finish, ...stops] = remaining.reverse()
console.log(`drive through ${args.length} towns`) // drive through 5 towns
console.log(`start in ${start}`) // start in delhi
console.log(`the destination is ${finish}`) //the destination is deoria
console.log(`stopping ${stops.length} times in between`) //stopping 4 times in in between
}
city("delhi", "mumbai","ghaziabad","noida","deoria")