Surya JS Journey

Learn JavaScript through concepts, code, and guided practice.

A focused workspace for concept study, interactive examples, visual explanations, and challenge solving.

Data HandlingIntermediate

Pass by Value vs Reference Behavior

Primitives are copied by value, while objects and arrays behave through shared references.

JavaScript passes function arguments by value, but for objects and arrays that value is a reference to the same underlying data. This is why changing an object inside a function can affect the original, while reassigning a number or string does not. This distinction is essential for debugging mutation bugs.

Explanation

JavaScript passes function arguments by value, but for objects and arrays that value is a reference to the same underlying data. This is why changing an object inside a function can affect the original, while reassigning a number or string does not. This distinction is essential for debugging mutation bugs.

Key Points

  • Primitive values are copied independently.
  • Objects and arrays share a reference to the same data.
  • Reassigning a variable is different from mutating the object it references.

Common Mistakes

  • Expecting copied object variables to become independent values.
  • Thinking JavaScript is purely pass-by-reference or purely pass-by-value without nuance.
  • Mutating nested data and then being surprised when other code sees the change.

Practice Workspace

value-vs-reference.js

Edit the code, run it in the browser, and inspect the console output below. Reset restores the original snippet for this page.

Editor

10 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.

Live editing

Safe to change before every run.

Fast reset

Return to the original starter instantly.

value-vs-reference.js
10 linesMonaco Editor
Loading...

Editor Actions

Use the editor to explore the example, then run it to inspect the console.

Console0 entries

Run the code to see output here.

Expected Output

1
2

Continue in Playground

Open this concept example in the shared playground to keep experimenting without leaving the broader workspace flow.

Open in Playground

Related Concepts

Data Types

JavaScript has primitive and reference data types, and knowing the difference affects comparison, copying, and mutation.

Spread and Rest

Spread expands values outward, while rest collects remaining values into an array or object.

Objects

Objects store related data and behavior as key-value pairs and are one of JavaScript’s core building blocks.

Practice Challenges

Spot shared object mutation

9 min

Fix the output so copying an object does not mutate the original lesson state.