Explain Object Destructuring in JavaScript

43 / 100

Objectsbeginner

Object Destructuring

Extracting properties from objects into individual variables using a concise pattern-matching syntax, including renaming, defaults, and nested patterns.

Object destructuring, introduced in ES6, lets you unpack properties from an object directly into variables using a syntax that mirrors the object's own shape, replacing repetitive const x = obj.x; const y = obj.y; boilerplate. It's used constantly in modern codebases — especially for function parameters — so fluency with its various forms is assumed in almost every JS interview.

Destructuring is like using a labeled cookie cutter on a big sheet of dough — instead of trimming out each variable's exact shape by hand, you press one pattern into the object and lift out however many named pieces you asked for, all in one motion.

Key Concepts

Basic destructuring, const { name, age } = person;, creates variables name and age matching property keys on person. You can rename while destructuring with const { name: fullName } = person;, which creates a variable called fullName holding the value of person.name — useful for avoiding naming collisions or clarifying intent. Default values can be supplied for properties that might be missing: const { role = 'guest' } = user; falls back to 'guest' only if user.role is undefined, exactly like default parameters.

const { name, age } = person;nameagepersonconst { name: fullName } = person;

Nested destructuring lets you reach into nested objects in one expression: const { address: { city } } = user; extracts city directly from user.address.city without an intermediate variable — note that this pattern creates a variable named city, not address, since address here is just a pattern label, not a variable declaration itself (unless you also want the intermediate object, which requires listing it separately).

const { address: { city } } = user;cityuser.address.cityaddress

Destructuring combines especially well with function parameters for cleanly handling configuration/options objects: function createUser({ name, role = 'member' }) {} lets callers pass a single object while the function body gets clean, individually-named local variables. A common gotcha is destructuring a value that's null or undefined directly, which throws a TypeError, since there's nothing to pull properties from — providing a default empty object (= {}) at the parameter level guards against a missing argument, though it doesn't help if the argument is explicitly null.

function createUser({ name, role = 'member' }) {}nullundefinedTypeError= {}