DEV Community

Cover image for Spread Operator in JavaScript (...)
Aden Eilers
Aden Eilers

Posted on

Spread Operator in JavaScript (...)

What is the Spread Operator?
This syntax is used to succinctly pass multiple values from either an Array or Object to an expression where elements are expected. Examples are the best way to show this.

Arrays

Combining arrays

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combinedArr = [...arr1, ...arr2];
//  combinedArr = [1, 2, 3, 4, 5, 6]
Enter fullscreen mode Exit fullscreen mode
let arr1 = [1, 2, 3];
let arr2 = [4, ...arr1, 5, 6];
//  arr2 = [4, 1, 2, 3, 5, 6]
Enter fullscreen mode Exit fullscreen mode

Copying an array

let arr = [1, 2, 3];
let arrCopy = [...arr];
//  arrCoppy = [1, 2, 3]
//  changing arr will not effect arrCopy
Enter fullscreen mode Exit fullscreen mode

Objects
Merge Objects

let obj1 = { id: 1, name: 'Aden' };
let obj2 = { birthday: '2022-02-04', hairColor: 'Brown' };
let combinedObj = { ...obj1, ...obj2 };
//  combinedObj = { id: 1, name: 'Aden', birthday: '2022-02-04', hairColor: 'Brown' }
Enter fullscreen mode Exit fullscreen mode

Note: Merging objects with like attributes may not behave the way you expect

let obj1 = { id: 1, name: 'Aden' };
let obj2 = { id: 2, name: 'Bob' };
let combinedObj = { ...obj1, ...obj2 };
//  combinedObj = { id: 2, name: 'Bob' }
Enter fullscreen mode Exit fullscreen mode

A Common use case in React

import { useState } from "react";

const App = () => {
  const [input, setInput] = useState("");
  const [list, setList] = useState([]);

  const addButtonClick = () => {
    // We use the spread operator to add 
    // an item to the end of the array
    setList((list) => [...list, input]);
  };

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => {
          setInput(e.target.value);
        }}
      />
      <button onClick={addButtonClick}>Add</button>
      <ul>
        {list.map((item) => {
          return <li key={Math.random()}>{item}</li>;
        })}
      </ul>
    </div>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

More information about the spread syntax can be found in the MDN docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Leave comment if you have any questions or feedback.

Top comments (0)