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
Top comments (0)