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

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

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

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

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}

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}

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