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 HandlingBeginner

Objects

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

Objects let you group related values under named properties. They are used for configuration, application state, API responses, and custom behavior with methods. Since objects are reference types, mutation and copying need special attention in real applications.

Explanation

Objects let you group related values under named properties. They are used for configuration, application state, API responses, and custom behavior with methods. Since objects are reference types, mutation and copying need special attention in real applications.

Key Points

  • Properties can be read with dot notation or bracket notation.
  • Objects are mutable reference values.
  • Methods are functions stored on objects.

Common Mistakes

  • Expecting object assignment to create a deep copy.
  • Using dot notation when the property name is dynamic.
  • Mutating shared objects without realizing other code references the same object.

Practice Workspace

objects.js

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

Editor

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

objects.js
7 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

Surya
3

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.

Equality

JavaScript has loose and strict equality, and they behave differently because loose equality allows coercion.

Arrays and Methods

Arrays hold ordered collections of values, and their built-in methods make transformation and iteration much easier.

Practice Challenges

Destructure a profile object

7 min

Extract the right properties from an object using destructuring syntax.

Read nested data safely

6 min

Use optional chaining so missing nested data does not throw an error.

Spot shared object mutation

9 min

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