Spread and Rest (...)

Use the ... operator to copy and combine arrays and objects without mutating them — the exact technique React state updates rely on — and to collect extra arguments.

Step 1 of 4

Spread: unpack an array into a new one

The spread operator — three dots ... — takes the items inside an array and "spreads" them into a new array. It's the modern way to copy and combine arrays without touching the originals.

const fruits = ["apple", "mango"];
const more = [...fruits, "lime"];   // a NEW array: apple, mango, lime

This matters enormously in React. When you update state, you must create a new array rather than changing the old one — and spread is how you do it. Adding a todo is [...todos, newTodo]; the original todos stays untouched.

Think of it this way: Spreading an array is like emptying a bag of groceries onto the counter and then packing a fresh bag with those items plus a few more. The original bag isn't modified — you built a new one.

Web Standard — copy, don't mutate

[...fruits, "lime"] creates a brand-new array. The original fruits is unchanged. This "make a new copy instead of editing in place" habit is the foundation of how React (and tools like Redux) track changes.

Learn more on MDN

MDN — Spread syntax (...)

JAVASCRIPTREAD ONLY

CONSOLE

Click "Run" to execute your code...