DEV Community

rohit20001221
rohit20001221

Posted on

Destructuring and Spread Syntax in javascript

Hi Guys today i am going to share about what i have learned about destructure and spread operator in javascript

Destructuring Syntax

first lets see about destructure operator in javascript, this operator is used to extract variables out of an array or and object

lets see the below examples to understand more clearly


// let us declare an array here
let arr = [2, 1, 3, 5];

/*
 suppose we want to store the individual numbers into
 variables we can use destructure operator 
*/

const [a] = arr;
console.log(a); // [output]: 2 

const [l, m, n] = arr;
console.log(`${l} ${m} ${n}`); // [output]: 2 1 3

const [p,q,r,s] = arr;
console.log(`${p} ${q} ${r} ${s}`); // [output]: 2 1 3 5

const [z,x,c,v,b] = arr;
console.log(b); // [output]: undefined // as there are only 5 elements in array
Enter fullscreen mode Exit fullscreen mode

as you can see we can destructure any number of elements from an array if the number of variable while destructuring are more than number of elements in array then we get undefined in those extra variables


const student = {name: 'Krishna', age:21, rollNo: '21JK15'};

const {name} = student;
console.log(name); // [output]: Krishna

const {age, rollNo} = student;
console.log(`${age} ${rollNo}`); // [output]: 21 21JK15

const {marks} = student;
console.log(marks); // [output]: undefined
Enter fullscreen mode Exit fullscreen mode

as you can see above the destructuring is used to even extract the properties of an object and extracting the properties not present in object gives us undefined

Spread Syntax

what i have found about this syntax is that, we can use it for passing arguments to a function or we can use it to extend an array or an object lets see few examples here

in javascript we use ... 3 dots as the spread operator

function addNums(a, b) {
   return a+b;
}

const nums = [1,2];

console.log(addNums(...nums)); // [output]: 3
Enter fullscreen mode Exit fullscreen mode

in above example we can see that spread operator is used to pass arguments to a function

const arr1 = [1,2];
const arr2 = [3,4];


const arr3 = [...arr1, ...arr2]; // concat two arrays
const arr4 = [...arr1, 7, 8]; // append new elements to array at last
const arr5 = [7, 8, ...arr1]; // append to the front of array
Enter fullscreen mode Exit fullscreen mode

in the above example we can see that spread operator is used to extend an array

let student = {name:'Krishna', age:21};

student = {...student, marks: 85};
console.log(student); // [output]: {name:'Krishna', age:21, marks:85}
Enter fullscreen mode Exit fullscreen mode

in above example we use the spread operator to add new properties to an object

let student = {name:'Krishna', age:21};

student = {...student, age:18}; // wii modify the age to 18
console.log(student); // [output]: {name:'Krishna', age:18}

student = {name:'Krishna', age:21};

student = {age:18, ...student}; // wrong way to modify object
console.log(student); // [output]: {name:'Krishna', age: 21}
Enter fullscreen mode Exit fullscreen mode

as seen above we can even modify the properties of an object using spread operator note that second method of modifing object is wrong we must first spread the object and then modify if not the other way this is the common mistake that i did many times so i am sharing with you now so that you would be careful next time

Top comments (0)