Surya JS Journey
Learn JavaScript through concepts, code, and guided practice.
A focused workspace for concept study, interactive examples, visual explanations, and challenge solving.
Spread and Rest
Spread expands values outward, while rest collects remaining values into an array or object.
Spread syntax is used to copy or combine arrays and objects, and rest syntax is used to gather remaining values in function parameters or destructuring. They look similar but solve opposite problems. These operators appear everywhere in modern JavaScript code.
Explanation
Spread syntax is used to copy or combine arrays and objects, and rest syntax is used to gather remaining values in function parameters or destructuring. They look similar but solve opposite problems. These operators appear everywhere in modern JavaScript code.
Key Points
- Spread expands iterable or object values into a new structure.
- Rest collects remaining values into one variable.
- Spread is useful for shallow copies, but it does not deep clone nested data.
Common Mistakes
- Confusing spread with rest because they use the same `...` syntax.
- Assuming spread performs a deep copy.
- Using rest in a position where JavaScript does not allow it.
Practice Workspace
spread-rest.js
Edit the code, run it in the browser, and inspect the console output below. Reset restores the original snippet for this page.
Editor
9 lines
Output
0 entries
Mode
practice
Workspace Notes
Changes stay local until you run the code. Reset restores the original snippet immediately for another pass.
Editor Actions
Use the editor to explore the example, then run it to inspect the console.
Run the code to see output here.
Expected Output
1,2,3
4,5Continue in Playground
Open this concept example in the shared playground to keep experimenting without leaving the broader workspace flow.
Open in PlaygroundRelated Concepts
Destructuring
Destructuring lets you extract values from arrays and objects into named variables.
Objects
Objects store related data and behavior as key-value pairs and are one of JavaScript’s core building blocks.
Arrays and Methods
Arrays hold ordered collections of values, and their built-in methods make transformation and iteration much easier.