Object and array destructuring for cleaner code
Destructuring is a powerful built-in feature of JavaScript programming that allows JavaScript programmers to unpack values or object properties from a user-declared array into variables in a more detailed and clear order. This makes your JavaScript program source code more readable and simpler. Destructuring features reduce the need for multiple accesses to object properties or array elements in the current program.
JavaScript Array Destructuring Features.
Array destructuring in JavaScript programs allows programmers to unpack values from an array into multiple variables.
Basic syntax of destructuring.
let [variable1, variable2, variable3] = array;
Example of destructuring.
let courses = [“Javascript”, “python”, “html”,”java”];
let [course1, course2, course3,course4] = courses;
console.log(course1); // Result – Javascript
console.log(course2); // Result – python
console.log(course3); // Result – html
console.log(course4); // Result – java
Explanation of destructuring.
Here you are previewed the array of courses destructed elements, and each element is provided in a compatible variable (course1, course2, course3, course4).
Skipping element items in array destructuring.
In a JavaScript program, you can skip array elements using the comma operator, so that it can be indicated in the current program which element values to ignore.
let courses = [“Javascript”, “python”, “html”,”java”];
let [, courses2,] = courses;
console.log(courses2); // Result – python
Explanation of Skipping element items in array.
In this example the first element (“Javascript”) is discarded, and the second element (“python”) is assigned to another variable.
Destructuring with default values in JavaScript.
If a JavaScript array program has no value for a particular index, you can set a default value to avoid outputting undefined data.
let courses = [“Javascript”, “python”];
let [c1, c2, c3 = “matlab”] = courses;
console.log(c1); // Result – Javascript
console.log(c2); // Result – python
console.log(c3); // Result – matlab is here default value
Explanation of Destructuring with default values.
This program array has only two declared elements, so the third element has the default value “matlab”.
Javascript Object Destructuring.
JavaScript object destructuring features allow JavaScript programmers to unpack properties from an object and assign them to variables.
The basic syntax of object destructuring.
let { property1, property2, property3 } = object;
Example of object destructuring.
let employee = {
emp_name: “Harry”,
emp_age: 20,
profession: “Developer”
};
let { emp_name, emp_age, profession } = employee;
console.log(emp_name); // Result – Harry
console.log(emp_age); // Result – 20
console.log(profession); // Result – Developer
Explanation of object destructuring.
In this program, the employee object is the destructured element, and each object property is assigned to a compatible variable.
Renaming variables in JavaScript object destructuring.
JavaScript programmers can rename existing program variables using the colon operator while destructuring a declared object.
let employee = {
emp_name: “Siddhi”,
emp_age: 34,
profession: “Programmer”
};
let { emp_name: efullName, emp_age: employeeAge } = employee;
console.log(efullName); // Result – Siddhi
console.log(employeeAge); // Result – 34
Renaming variables object destructuring Explanation.
During destructuring features in JavaScript program, employee name and employee age properties are renamed to efullName and employeeAge.
JavaScript destructuring features with default values.
Like arrays in JavaScript program, JavaScript programmers can set default values for object properties if they are of undefined nature.
let employee = {
emp_name: “David”,
emp_age: 40
};
let { emp_name, emp_age, profession = “Not specified” } = employee;
console.log(emp_name); // Result – David
console.log(emp_age); // Result – 40
console.log(profession); // Result – Not specified default value
Explanation of destructuring features with default values.
In this example profession object property is not present in employee object, so profession variable is assigned default value “Not specified”.
Destructuring of JavaScript nested objects.
In JavaScript program, you can preview the destructuring of nested objects by indicating the property path in the destructuring pattern.
let employee = {
emp_name: “Harry”,
emp_address: {
street: “231 Abc Colony”,
city: “India”
}
};
let { emp_name, emp_address: { street, city } } = employee;
console.log(emp_name); // Result – Harry
console.log(street); // Result – 231 Abc Colony
console.log(city); // Result – India
Explanation of Destructuring of JavaScript nested objects.
In this program, emp_address object is nested inside employee. Here programmer is destructing street and city object properties from address, here emp_name is destructed from main object.
Destructuring in JavaScript function parameters.
When working with objects or arrays in a JavaScript program, the destructuring feature can also be used directly in function parameters to simplify function calls.
Destructuring for arrays.
function message([text1, text2]) {
console.log(`Welcome to join ${text1} and ${text2}`);
}
let course = [“Javascript”, “Html”];
message(course); // Result – Welcome to join Javascript and Html
Explanation of Destructuring in JavaScript function parameters.
The message() function in this program takes an input array as an argument, and destructs it and displays it directly in the existing function parameters.
Destructuring for objects.
function introduction({ emp_name, emp_age }) {
console.log(`employee name is ${emp_name} and he is ${emp_age} years old`);
}
let employee = { emp_name: “Harry”, emp_age: 20 };
introduction(employee); // Result – employee name is Harry and he is 20 years old
Explanation of destructuring for objects.
The introduction() function in this program inputs an object as an argument, and previews its employee name and employee age properties by destructuring them directly into the function parameters.
Destructuring arrays and objects together in JavaScript.
JavaScript programmers can combine and apply destructuring of both arrays and objects.
let employee = {
emp_name: “Harry”,
emp_age: 40,
profession: [“developer”, “designer”]
};
let { emp_name, emp_age, profession: [profession1, profession2] } = employee;
console.log(emp_name); // Result – Harry
console.log(emp_age); // Result – 40
console.log(profession1); // Result – developer
console.log(profession2); // Result – designer
Explanation of destructuring arrays and objects together.
In this program, we destructure the employee object, which creates employee name, employee age, and employee profession. After this, the profession array is destructured to receive the first two profession elements.
Summary of destructuring in JavaScript programming.
JavaScript array destructuring.
- JavaScript arrays make it easy to unpack and display array values.
- This feature allows programmers to skip array elements and provide default values.
- Object destructuring can be used in loops or functions in a program.
JavaScript object destructuring.
- JavaScript programs provide features to easily unpack object properties into variables.
- It provides support to rename object variables and set default values.
- This feature helps programmers to destructure nested objects.
In JavaScript function parameters.
In JavaScript programs, destructuring is used directly in function parameters to make the program source code more detailed and readable.
