Destructuring

Destructuring is a convenient way of extracting multiple values from data

stored in objects and Arrays. The destructuring assignment syntax is a
JavaScript expression that makes it possible to unpack values from arrays, or
properties from objects, into distinct variables.
Ex:-
var a = [10, 20, 30]; Left-hand side of the assignment to define
what values to unpack from the sourced
variable.
[x, y, z] = a;
console.log(x) // 10
console.log(y) // 20
console.log(z) // 30
 Array Destructuring
var a = [“JavaScript”, “SixMonths”, “GeekyShows”];
a[0] = “JavaScript”; var [courseName, duration, tutor] = a;
a[1] = “SixMonths”; console.log(courseName); // JavaScript
a[2] = “GeekyShows”; console.log(duration); // SixMonths
var courseName = a[0]; console.log(tutor); // GeekyShows
var duration = a[1];
var tutor = a[2]; When destructuring Array, we use their
console.log(courseName); // JavaScript index/positions in the assignment.
console.log(duration); // SixMonths
console.log(tutor); // GeekyShows
 Array Destructuring
var a = [“JavaScript”, “SixMonths”, “GeekyShows”]; var a, b;
var [courseName, duration, tutor] = a; [a,b] = [10, 20];
console.log(courseName); // JavaScript console.log(a); // 10
console.log(duration); // SixMonths console.log(b); // 20
console.log(tutor); // GeekyShows
var a, b;
[a, b=20] = [10];
var [courseName, duration] = a;
console.log(a); // 10
console.log(courseName); // JavaScript
console.log(b); // 20
console.log(duration); // SixMonths
var a, b;
var [courseName, , tutor] = a; [a=40, b=20] = [10];
console.log(courseName); // JavaScript console.log(a); // 10
console.log(tutor); // GeekyShows console.log(b); // 20
 Array Passing to a Function
var arr = [10, 20, 30];
function show([value1, value2, value3]){
console.log(value1); // 10
console.log(value2); // 20
console.log(value3); // 30
}
show(arr);
 Array Returning from a Function
var arr = [10, 20, 30];
function show(z){
return z;
}
var x = show(arr);
var [value1, value2, value3] = x;
console.log(value1); // 10
console.log(value2); // 20
console.log(value3); // 30
 Nested Array Destructuring
var a = ["JavaScript", "SixMonths", "GeekyShows", ["Rahul", "Sonam"]];
var [courseName, duration, tutor, [stu1, stu2]] = a;
console.log(courseName);
console.log(duration);
console.log(tutor);
console.log(stu1);
console.log(stu2);
 Object Destructuring
var course = {
courseName: “JavaScript”,
duration: “SixMonths”,
tutor: “GeekyShows” };
console.log(course.courseName);
console.log(course.duration);
console.log(course.tutor);
When destructuring objects, we use the keys as
variable names. This is how JavaScript knows which
property of the object we want to assign.
// JavaScript
// SixMonths
// GeekyShows

var {courseName, duration, tutor} = course;

console.log(courseName); // JavaScript
console.log(duration); // SixMonths
console.log(tutor); // GeekyShows
 Object Destructuring
var course = { courseName: “JavaScript”, duration: “SixMonths”, tutor: “GeekyShows” };
var {courseName, duration, tutor} = course;
console.log(courseName); // JavaScript
console.log(duration); // SixMonths
console.log(tutor); // GeekyShows

var course = { courseName: “JavaScript”, duration: “SixMonths”, tutor: “GeekyShows” };

var {courseName:cname, duration:time, tutor:teacher} = course;
console.log(cname); // JavaScript
console.log(time); // SixMonths
console.log(teacher); // GeekyShows
 Object Destructuring
var course = { courseName: “JavaScript”, duration: “SixMonths”, tutor: “GeekyShows” };
var {courseName, duration, tutor} = course;
console.log(courseName); // JavaScript
console.log(duration); // SixMonths
console.log(tutor); // GeekyShows

var {courseName, duration} = course;

console.log(courseName); // JavaScript
console.log(duration); // SixMonths

var {courseName, tutor} = course;

console.log(courseName); // JavaScript
console.log(tutor); // GeekyShows
 Object Destructuring
var a, b; var {a=40, b=20} = {a:10};
({a, b} = {a:10, b:20}); console.log(a) // 10
console.log(a) // 10 console.log(b) // 20
console.log(b) // 20
var {a: y = 40, b: z = 20} = {a:10};
console.log(y) // 10
var {a, b} = {a:10, b:20}; console.log(z) // 20
console.log(a) // 10
console.log(b) // 20

var {a, b=20} = {a:10};

console.log(a) // 10
console.log(b) // 20
 Object Passing to a Function
var course = {
courseName: “JavaScript”,
duration: “SixMonths”,
tutor: “GeekyShows” };

function show({courseName, duration, tutor}){

console.log(courseName); // JavaScript
console.log(duration); // SixMonths
console.log(tutor); // GeekyShows
}
show(course);
 Object Returning from a Function
var course = {
courseName: “JavaScript”,
duration: “SixMonths”,
tutor: “GeekyShows” };
function show(z){
return z;
}
var x = show(course);
var {courseName, duration, tutor}= x;
console.log(courseName); // JavaScript
console.log(duration); // SixMonths
console.log(tutor); // GeekyShows
 Nested Object Destructuring
var course = {
courseName: "JavaScript",
duration: "SixMonths",
tutor: "GeekyShows",
student: {
stu1: "Rahul",
stu2: "Sonam"
}
};
var {courseName, duration, tutor, student: { stu1, stu2 } } = course;
console.log(courseName);
console.log(duration);
console.log(tutor);
console.log(stu1);
console.log(stu2);