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

Destructuring

Destructuring lets you extract values from arrays and objects into named variables.

Destructuring is a common syntax for pulling values out of objects and arrays more cleanly. It is used in function parameters, API response handling, state updates, and many everyday JavaScript patterns. It can improve readability when used carefully.

Explanation

Destructuring is a common syntax for pulling values out of objects and arrays more cleanly. It is used in function parameters, API response handling, state updates, and many everyday JavaScript patterns. It can improve readability when used carefully.

Key Points

  • Object destructuring extracts properties by name.
  • Array destructuring extracts values by position.
  • You can rename destructured variables or provide defaults.

Common Mistakes

  • Using the wrong property name and getting `undefined`.
  • Forgetting that array destructuring depends on order, not labels.
  • Overusing deep destructuring and making code harder to read.

Practice Workspace

destructuring.js

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

Editor

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

destructuring.js
5 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
JavaScript

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

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.

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.