Skip to main content

Destructuring

  • Extracting values from data stored in objects and arrays.
  • Destructuring allows us to unpack values from arrays or properties from objects into distinct variables.

Object Destructuring:

Example 1:

const student = {
firstName: "Ambreen",
lastName: "Khan"
}

const {firstName, lastName} = student;

console.log(firstName); //Ambreen
console.log(lastName); //Khan
  • You can rename the properties using below syntax
const {firstName:first, lastName:last} = student;

Example 2:

const student = {
name: "Ambreen Khan",
course: "Test Automation"
}

function displayInfo({name,course}){
return [name, course];
}

console.log(displayInfo(student));

output:

[ 'Ambreen Khan', 'Test Automation' ]

Example 3:

  • If the names of the keys are known for an object, you can destructure those keys as parameters
const student = {
name: "Ambreen Khan",
course: "Test Automation"
}

function displayInfo(student){
return [student.name, student.course];
}

console.log(displayInfo(student));

output:

[ 'Ambreen Khan', 'Test Automation' ]

Example: 4

  • Here, we are passing a destructured object as a default parameter
  • If no parameter is passed, we default to destructured object as a parameter
  • We assign an empty object as a default value to let ES6 know that we are working with destructuring
function newStudent({name = {first: "Guest", last:"Guest"}, subject = 'Demo Class'}  = {}){
return [name.first, name.last, subject];
}

console.log(newStudent());
console.log(newStudent({name: {first:'Ambreen', last:'Khan'}}));
console.log(newStudent({name: {first:'Ambreen', last:'Khan'}, subject:'Data Science'}));

output:

[ 'Guest', 'Guest', 'Demo Class' ]
[ 'Ambreen', 'Khan', 'Demo Class' ]
[ 'Ambreen', 'Khan', 'Data Science' ]

Array Destructuring:

Example: 1

const arr = [1,2,3,4,5];

const [a,b,c] = arr

console.log(a); //1
console.log(b); //2
console.log(c); //3

Example: 2

function getStudents(stu1, stu2){
return [stu1, stu2];
}

[student1 , student2] = getStudents('Ambreen','Mariam');

console.log(student1); //Ambreen
console.log(student2); //Mariam

Swapping Values in Array using destructuring

function swapArrayValues(a,b){
return [b,a]
}

console.log(swapArrayValues(98, 77));

output:

[ 77, 98 ]