Logo

Developer learning path

News
JavaScript

Destructuring of Objects and Arrays in JavaScript

Introduction to JavaScript
What is JavaScript? How it works? History of JavaScript
Basic Concepts in JavaScript
Variables Data Types Operators Control Flow
Functions and Data Structures
Functions Builtin functions Userdefined functions Parameters and Arguments Arrays Indexes and length Array methods
ObjectOriented JavaScript
Object and Properties Constructors Inheritance Prototype
DOM Manipulation
What is DOM? Accessing HTML elements with JavaScript Manipulating HTML elements with JavaScript Events and event handling
Asynchronous JavaScript
Callbacks Promises Async/await Asynchronous data loading AJAX
jQuery
What is jQuery? Selecting and manipulating HTML elements with jQuery jQuery events
Browser APIs
Working with Web Storage Location API Navigator API Geolocation API Canvas API
Expressions and Regular Expressions
Boolean expressions Regular expressions
Debugging and Testing JavaScript
Debugging basics Chrome Developer Tools Unit testing Testing frameworks
JavaScript Libraries and Frameworks
Introduction to libraries and frameworks React.js Angular.js Vue.js Node.js
Deploying JavaScript Applications
Deploying for the Web Hosting options
Ecmascript6 Features
Classes Arrow functions Promises Destructuring of Objects and Arrays Default parameters and Spread Operator
Security and Best Practices in JavaScript
Security basics Best practices for writing safe and maintainable JavaScript code Code optimization techniques
Conclusion
Recap of the course Next Steps.

Destructuring of Objects and Arrays

60

#description

Destructuring in JavaScript is a powerful technique that allows you to extract specific values from an object or an array and assign them to individual variables. This feature was introduced in ECMAScript 6 to simplify the syntax of assignments and to make the code more readable.

Destructuring of Objects:

You can destruct an object into individual variables by enclosing the keys in curly braces {}. The keys should match the property names of the object.

Here's an example:

 
                    
const person = {
  name: 'John',
  age: 30,
  gender: 'Male'
};

const {name, age, gender} = person;

console.log(name); // 'John'
console.log(age); // 30
console.log(gender); // 'Male'

You can also define default values while destructuring an object, in case the property doesn't exist:

 
                    
const person = {
  name: 'John',
  gender: 'Male'
};

const {name, age = 30, gender} = person;

console.log(name); // 'John'
console.log(age); // 30 (default value)
console.log(gender); // 'Male'

Destructuring of Arrays:

You can destruct an array into individual variables by enclosing the variables in square brackets []. The order of the variables should match the elements of the array.

Here's an example:

 
                    
const numbers = [1, 2, 3];

const [x, y, z] = numbers;

console.log(x); // 1
console.log(y); // 2
console.log(z); // 3

You can also skip elements while destructuring an array:

 
                    
const numbers = [1, 2, 3];

const [x, , z] = numbers;

console.log(x); // 1
console.log(z); // 3

You can also use default values while destructuring an array, in case the element doesn't exist:

 
                    
const numbers = [1];

const [x, y = 2, z = 3] = numbers;

console.log(x); // 1
console.log(y); // 2 (default value)
console.log(z); // 3 (default value)

Destructuring is a very handy feature in JavaScript, it makes the code more simple and readable, especially when dealing with large objects or arrays.

March 25, 2023

If you don't quite understand a paragraph in the lecture, just click on it and you can ask questions about it.

If you don't understand the whole question, click on the buttons below to get a new version of the explanation, practical examples, or to critique the question itself.