Rest and Spread Operator in Javascript

Hey there! 👋 In this blog, we'll explore the Rest and Spread Operator in JavaScript – a useful tool that simplifies coding. Whether you're new to coding or have some experience, this post will explain how the Rest and Spread Operator work and how you can make the most of it in your JavaScript projects. Let's jump right in!

In JavaScript, the rest and spread operators are two powerful features introduced in ECMAScript 6 (ES6) that greatly enhance array and object manipulation concisely and flexibly.

👉 Rest Operator

1. Rest Operator with Arrays

The rest operator, denoted by ..., is used in function parameters to collect multiple arguments into a single array. It allows you to work with a varying number of arguments passed to a function.

Example:

function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // Output: 15

In this example, the sum function uses the rest operator ...numbers to collect all the arguments passed to the function into an array called numbers. This way, we can pass any number of arguments to the sum function, and they will all be accessible within the function body as an array.

1. Rest Operator with Objects

   The rest operator can also be used with objects to collect the remaining properties of an object into a new object.

Example:

const person = {
  name: "John",
  age: 30,
  city: "New York",
  country: "USA",
};

const { name, age, ...address } = person;

console.log(name);     // Output: "John"
console.log(age);      // Output: 30
console.log(address);  // Output: { city: "New York", country: "USA" }

In this example, we use the rest operator ...address to collect the remaining properties of the person object (excluding name and age) into a new object called address.

👉 Spread Operator

1. Spread Operator with Arrays

   The spread operator, denoted by ..., is used to spread the elements of an array into individual elements or to combine multiple arrays into a new array.

Example 1:

var names = ['Diksha', 'Ajay', 'Neha', 'Ram'];
function getNames(name1, name2, name3){
    console.log(name1, name2, name3)
}

getNames(...names);   // Diksha Ajay Neha
console.log(...names);  // Diksha Ajay Neha Ram

Example 2:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Spread the elements of arr1 and arr2 into a new array
const combinedArray = [...arr1, ...arr2];

console.log(combinedArray); // Output: [1, 2, 3, 4, 5, 6]

In this example, we use the spread operator ... to spread the elements of arr1 and arr2 into a new array called combinedArray.

1. Spread Operator with Objects

   The spread operator can also be used with objects to create shallow copies or merge objects into a new object.

Example 1:

var student = {
    name : "Diksha",
    age: 21,
    hobbies: ["Chess", "Dance"]
}

let newStudent = {
    ...student,
    age : 22
}
console.log(newStudent); 
// Output: {name: 'Diksha', age: 22, hobbies: Array(2)}

In this example, we use the spread operator (...) to create a shallow copy of the student object and spread its properties into a new object named newStudent. After spreading the student object's properties into newStudent, the age property is explicitly set to 22, overriding the original age property value of 21.

Example 2:

const person = { name: "John", age: 30 };
const address = { city: "New York", country: "USA" };

// Merge properties of person and address into a new object
const mergedObject = { ...person, ...address };

console.log(mergedObject);
// Output: { name: "John", age: 30, city: "New York", country: "USA" }

In this example, we use the spread operator ... to merge the properties of person and address objects into a new object called mergedObject.

In summary, the rest operator is used for collecting elements or properties into a single variable, while the spread operator is used for spreading elements or properties from a variable into individual elements or combining variables into a new one.

This is it for this blog. As always, happy coding and stay curious! Thank you for joining me on this journey through JavaScript's Rest and Spread Operator.

If you found this helpful or informative, don't forget to give it a thumbs up 👍 to show your appreciation. – see you next time!