Rest And Spread Operator in JavaScript

What is Spread Operator?

The spread operator, denoted by three dots("..."), is a feature introduced in javascript ES6 that allow us to expand and spread the elements of an array or an object. It provides a concise and flexible way to manipulate and combine array and object.

Example 1

1  const Example1 = () => {
2    // Array Clone
3  
4    const numbers = [1, 2, 3];
5  
6    const newNumbers = [...numbers];
7  
8    console.log(newNumbers); // [1, 2, 3]
9  
10    return (
11      <></>
12    );
13  };
14  

Example 2

1  const Example2 = () => {
2    // Combine Array
3  
4    const numbers1 = [1, 2, 3];
5    const numbers2 = [4, 5, 6];
6  
7    const combineArray = [...numbers1, ...numbers2];
8  
9    console.log(combineArray); // [1, 2, 3, 4, 5, 6]
10  
11    return <></>;
12  };

Example 3

1  const Example3 = () => {
2    // Compose
3  
4    const numbers1 = [1, 2, 3];
5    const numbers2 = [4, 5, 6];
6  
7    const composedArray = [100, ...numbers1, ...numbers2, 200];
8  
9    console.log(composedArray); // [100, 1, 2, 3, 4, 5, 6, 200]
10  
11    return <></>;
12  };

Example 4

1  const Example4 = () => {
2    //string
3  
4    const string = "iamshiv";
5  
6    const stringArray = [...string];
7  
8    console.log(stringArray); // ["i", "a", "m", "s", "h", "i", "v"]
9  
10    return <></>;
11  };
12  

Example 5

1  const Example5 = () => {
2    // Object Clone
3  
4    const order = {
5      productName: "T-shirt",
6      price: 209,
7      quantity: 1,
8    };
9  
10    const newOrder = { ...order };
11  
12    console.log(newOrder); // { productName: "T-shirt", price: 209, quantity: 1};
13  
14    return <></>;
15  };

Example 6

1  const Example6 = () => {
2    // Spread
3  
4    const numbers = [17, 37, 74, 2, 8218, 27];
5  
6    console.log(Math.max(...numbers)); // 8281
7
8    return <></>;
9  };

What is Rest Operator?

The rest operator also denoted by three dot("..."), is another feature introduced in JavaScript ES6 that works in the opposite way to the spread operator. It Allows us to gather or collect multiple elements into an array.

Example 1

1  const Example1 = () => {
2    // Rest operator packing
3  
4    function sum(...numbers) {
5      console.log(numbers); // [3, 4, 5, 6]
6  
7      let result = 0;
8      for (let num of numbers) {
9        result += num;
10      }
11  
12      return result;
13    }
14  
15    console.log(sum(3, 4, 5, 6)); // 18
16  
17    return <></>;
18  };

Example 2

1  const Example2 = () => {
2    // Rest
3  
4    function sum(number1, number2, ...numbers) {
5      console.log(number1, number2, numbers); // 3, 4, [5, 6]
6  
7      let result = 0;
8      for (let num of numbers) {
9        result += num;
10      }
11  
12      return result;
13    }
14  
15    console.log(sum(3, 4, 5, 6)); // 11
16  
17    return <></>;
18  };

Example 3

1  const Example3 = () => {
2    // Rest operator packing
3  
4    const order = {
5      name: "Water bottle",
6      street: "Hanuman Nagar",
7      city: "Kota",
8    };
9  
10    const { name, ...address } = order; 
11  
12    console.log(name, address);   // water bottle, {street:"Hanuman Nagar", city:"Kota"}
13  
14    return <></>;
15  };