🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Operators › Destructuring
Destructuring - JavaScript - MDN Web Docs - Mozilla
The destructuring syntax is a JavaScript syntax that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. It can be used in locations that receive data (such as the left-hand side of an assignment or anywhere that creates new identifier bindings).
🌐
Dmitri Pavlutin
dmitripavlutin.com › javascript-object-destructuring
How to Use Object Destructuring in JavaScript - Dmitri Pavlutin
January 28, 2023 - Object destructuring is a JavaScript feature to extract properties from objects and bind them to variables.
🌐
W3Schools
w3schools.com › react › react_es6_destructuring.asp
React ES6 Destructuring
Destructuring is a JavaScript feature that allows you to extract values from objects or arrays into distinct variables.
🌐
JavaScript.info
javascript.info › tutorial › the javascript language › data types
Destructuring assignment
February 26, 2026 - The function might only require certain elements or properties. Destructuring assignment is a special syntax that allows us to “unpack” arrays or objects into a bunch of variables, as sometimes that’s more convenient.
🌐
Wes Bos
wesbos.com › destructuring-objects
A Dead Simple intro to Destructuring JavaScript Objects - Wes Bos
November 15, 2016 - What does destructuring mean? It's a JavaScript expression that allows us to extract data from arrays, objects, maps and sets — which we're going to learn more about in a future ES6.io video —into their own variable.
🌐
Reddit
reddit.com › r/learnjavascript › help understanding object destructuring in javascript
r/learnjavascript on Reddit: Help Understanding Object Destructuring in JavaScript
August 25, 2024 -

I'm currently learning JavaScript and practicing some code, but I'm getting a bit confused about how object destructuring works. Below is the code snippet I'm working with:

const person = {
  name: "Harmeet",
  age: 40
}

const { name, age} =  person;

console.log(name); // prints Harmeet
console.log(age); // prints 40

const {anotherName, anotherAge} = person;

console.log(anotherName); // prints undefined
console.log(anotherAge); // prints undefined

Could someone explain how the object destructuring is working in this context? Specifically, I'm confused about during the second time assignment, why object descrtion prints undefined instead of values? Any detailed explanation or examples would be greatly appreciated!

🌐
Greenroots
blog.greenroots.info › javascript-object-destructuring-usages-you-must-know
JavaScript object destructuring usages you must know
May 6, 2025 - You must learn this usage if you want to explore any modern JavaScript-based frameworks/libraries like React, Vue, Svelte, Angular, etc. You can use object destructuring to pass the property values as arguments to the function.
Find elsewhere
🌐
Thomas Step
thomasstep.com › blog › destructuring-objects-in-javascript
Destructuring Objects in Javascript - Thomas Step
August 12, 2021 - The official definition is unpacking values from array or properties from objects into distinct variables. Today, I only want to go over a few examples with objects, but maybe I will make another post with examples for destructuring arrays.
🌐
JavaScript Tutorial
javascripttutorial.net › home › javascript tutorial › javascript object destructuring
JavaScript Object Destructuring
December 17, 2023 - Summary: in this tutorial, you’ll learn about JavaScript object destructuring which assigns properties of an object to individual variables.
🌐
Aleksandr Hovhannisyan
aleksandrhovhannisyan.com › blog › overzealous-destructuring
Overzealous Destructuring | Aleksandr Hovhannisyan
April 17, 2022 - While this article looked at some of the pitfalls of overusing destructuring in JavaScript—particularly in function signatures—this doesn’t necessarily mean that destructuring is bad and should be avoided. There are certainly legitimate use cases for it; these are briefly covered in the following sections. If you’ve worked with CommonJS modules, you’re probably familiar with this old syntax for importing a named export from a module: ... This uses object destructuring to extract the properties from the exported module’s exports object (which is what require returns).
🌐
freeCodeCamp
freecodecamp.org › news › javascript-object-destructuring-spread-operator-rest-parameter
JavaScript Object Destructuring, Spread Syntax, and the Rest Parameter – A Practical Guide
February 8, 2021 - Web developers commonly extract values from an object property to use further in programming logic. With ES6, JavaScript introduced object destructuring to make it easy to create variables from an object's properties.
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Operators › Destructuring_assignment
Destructuring - JavaScript | MDN
The destructuring syntax is a JavaScript syntax that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. It can be used in locations that receive data (such as the left-hand side of an assignment or anywhere that creates new identifier bindings).
🌐
Educative
educative.io › answers › what-is-object-destructuring-in-javascript
What is object destructuring in JavaScript?
Destructuring allows us to extract multiple properties, or items, from an array​ at a time. The right side of the statement contains the Javascript object that we want to split into variables; the left side contains a “pattern” for the ...
🌐
Honeybadger
honeybadger.io › blog › javascript-destructuring
Destructuring in JavaScript - Honeybadger Developer Blog
April 6, 2023 - Destructuring in JavaScript is an elegant way to unpack values from objects and arrays. This guide covers everything from basics to advanced usage of destructur...
🌐
GeeksforGeeks
geeksforgeeks.org › javascript › javascript-object-destructuring-in-js
JavaScript - Object Destructuring in JS - GeeksforGeeks
Object destructuring is a syntax feature in JavaScript that allows you to extract values from objects and assign them to variables in a more concise and readable way.
Published   November 30, 2024
🌐
Syncfusion
syncfusion.com › blogs › javascript › top 7 javascript object destructuring techniques
Top 7 JavaScript Object Destructuring Techniques | Syncfusion Blogs
December 19, 2024 - JavaScript object destructuring was introduced with the ES6 update to help developers extract multiple properties from objects at once.
🌐
DEV Community
dev.to › dianakw8591 › object-destructuring-in-javascript-482k
Object Destructuring in JavaScript - DEV Community
August 14, 2020 - Destructuring is an excellent way to access the properties of an object that might be passed into a function or as the props of a React component. Rather than write a line of code to assign a variable to each property, or use dot or bracket notation every time for access, objects can be destructured for code clarity and ease of writing.
🌐
freeCodeCamp
freecodecamp.org › news › array-vs-object-destructuring-in-javascript
Array vs Object Destructuring in JavaScript – What’s the Difference?
November 10, 2021 - The destructuring assignment in JavaScript provides a neat and DRY way to extract values from your arrays and objects. This article aims to show you exactly how array and object destructuring assignments work in JavaScript. So, without any further ad...