This is amazing new feature of Objects and Arrays introduced in ES2020, it works on concept of Nullish Coalescing operator which was also introduced in ES2020.

for ex: we have an object openingHours inside an object restaurant and we want to display some value or result from that openingHours by first checking if that exist:const restaurant = {
name: 'casa la vista',
openingHours: {
thu: {
open: 12,
close: 22,
},
fri: {
open: 11,
close: 23,
},
sat: {
open: 0,
close: 24,
}
}
}
// what we will do in old way is:if(restaurant.openingHours.mon){…

In this we will get to know about the full potential of && and || logical operators. Almost 80% of developers aren’t aware of or don’t know that trick or way to short circuit with logical operators .

We mostly use logical operators only to combine boolean values but we can do a lot more with &&(AND) and ||(OR) operators.

console.log(3 || 'honey');
output: 3

In case of OR operator Short Circuiting means that if first value is truthy value it will immediately return that first value, in other words if the first operand is truthy in OR || operator…


Spread syntax can be used when all elements from iterables or an array need to be included in a list of some kind. we can use spread operator to basically expand an array and add new elements.

Spread operators are used when we need to write multiple values by seperated by commas.

Spread operator not only works on arrays but on all iterables.

We can use spread operator when building an array or when we pass values to a function.

(Iterables : arrays, strings, sets, maps but not objects)

So basically unpacking all the array elements at one .

for…

  • Js engine is computer program that executes js code. Every browser has it’s own js engine. but most powerful engine is Google’s V8 engine, V8 engine powers google chrome but also node.js which is javaScript runtime.
  • Any javaScript engine contains a call stack and a heap, call stack is where our code is executed using execution context. Heap is unstructured memory pool which stores all the objects that our memory needs.

In objects we use {} curly braces to destructure. Because this is how we create objects. Then we all have to do is to provide variable names that exactly match the property names of an object we want to destructure.

const restaurant = {name: ‘ bella vista’,restLocation: ‘ chandigarh’,categories: [‘Italian’, ‘Vegetarian ’, ‘Non-vegetarian ’],menu: [‘pizza’, ‘pasta’, ‘garlic bread’],
openingHours: {
thu: {
open: 12,
close: 22
},
fri: {
open: 11,
close: 23,
}
},
orderDelivery: function ({ time = ‘20:00’, address, mainIndex = 2, starterIndex = 1,}) {console.log(`Order received ${this.mainMenu[mainIndex]} , ${this.starterMenu[starterIndex]}, …

Destructuring is an ES6 feature and it’s a way of unpacking values from on array, or properties from an object into separate e variables.

In other words de-structuring is to break complex data structure down into smaller data structure like a variable. So for arrays we use de-structuring to retrieve elements from an array and store them into variables in a very easy way.

Why de-structuring is useful or needed 👉

for ex. we take an very simple array 👉

const firstArray = [1, 2, 3]

now if we want to retrieve each one into variable without destructuring we will…

GURVINDER MAAN

CODE | LIFT

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store