Js Objects Destructuring — Free Javascript Tutorial

TL;DR: Learn Js Objects Destructuring in Javascript with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

Js Objects Destructuring in Javascript

JavaScript objects store key-value pairs. You can read, add, update, and delete properties. Methods are functions stored as properties.

Destructuring extracts values from objects or arrays into variables: const { name, age } = student instead of student.name, student.age.

Spread operator (...) copies all properties of an object: const updated = { ...student, age: 16 } creates a new object with one property changed.

Optional chaining (?.) safely accesses nested properties: user?.address?.city — returns undefined if any part is null/undefined instead of throwing an error.

const student = { name: "Priya", age: 15, marks: 92 };

// Destructuring
const { name, marks } = student;
const { name: fullName, age = 16 } = student; // rename + default

// Spread to copy/update
const updated = { ...student, marks: 95 };

// Optional chaining
student.address?.city  // undefined (no error)
student?.guardian?.phone  // safe nested access

// Computed properties
const key = "marks";
student[key]  // 92

Learn Js Objects Destructuring step by step with Syllab's free interactive Javascript tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full Javascript course →