DEV Community: Hamza Nadeem

Understanding Closures in JavaScript

Hamza Nadeem — Thu, 17 Dec 2020 09:49:04 +0000

JavaScript closures were always hard to understand because of the way they are explained. The closure is one of the most important core concepts of JavaScript.

“Writing in ECMAScript language without understanding closure is like writing Java without understanding classes” — Douglas Crockford, father of JSON

In most of the examples, you will see people explaining this as a function inside another function but in reality, it is much more than this.

Take a look at the code below:

var x = 0;

addNumber = () => {
 return 5 + x;
}

console.log(addNumber);

JavaScript is a lexical scoping language, the inheritance flows inwards. The above code uses a global scope and there is nothing to protect it against change. A variable declared outside the function is available for use within the function. You can not use a variable outside that's been declared inside a function.

Now let me introduce you to closure. Look at the below code.

closedFunction = () => {

 var counter = 0;

 var increment = () => {
  counter++;
  console.log(counter);
 }

 return { increment }

}

var countMe = closedFunction();

console.log(countMe.increment()); //returns 1
console.log(countMe.increment()); //returns 2

The scope of the function is created once and memory gets allocated for it. Processing happens until it reaches the end of the function and the memory gets released. There is no permanence gained in the exercise and whatever value created is forever lost.

However, if you wrap your function within a function, it creates another scope — a sort of ring fence around your code that tells JavaScript not to destroy your function when it ends.
The counter variable in the code above becomes the enclosed variable because it is outside the function being called (i.e. Increment). As a result, you can create an unlimited number of function instances with its own set of unique values.

In a way, closures are just functions with preserved data. When you create a closure, you’re telling JavaScript to remember the state of things inside your function — and only the variables that are used are considered ‘closures’.

What is the Prototypal Inheritance in JavaScript?

Hamza Nadeem — Sat, 19 Sep 2020 12:15:18 +0000

For understanding Prototypal Inheritance in JavaScript let's first understand what Inheritance is.

Inheritance is one of the basic concepts of OOP (Object Oriented Programming). Inheritance is the capability of one class to inherit capabilities or properties from another class .let's take an example. We are humans, We inherit certain properties from the class 'Human' such as the ability to speak, breathe, eat, drink, etc.

In JavaScript, objects have a special hidden property [Prototype], that is either null or references another object. That object is called “a prototype”.

When we want to read a property from an object, and it’s missing, JavaScript automatically takes it from the prototype, this is called “prototypal inheritance”.

let animal = {
eats: true
};
let rabbit = {
jumps: true
};

rabbit.proto = animal;

alert( rabbit.eats ); // true
alert( rabbit.jumps ); // true

What is an event loop in JavaScript?

Hamza Nadeem — Sat, 19 Sep 2020 11:42:20 +0000

The event loop is the core concept of JavaScript but for the people who just started writing code in JavaScript, they found it a bit confusing.

So, what really an event loop is?

The event loop is responsible for asynchronous programming in JavaScript. JavaScript is a single thread language but using some great data structures techniques, it gives us the ability of multi-threading. Let's take a look at how things work.

JavaScript uses call stack to keep track of executions line by line. All the operations are pushed to the stack in order and whenever an operation is completed it is popped out of the stack.

The event queue is responsible for sending new functions to the track for processing. It uses the queue data structure to maintain the correct sequence in which all operations should be sent for execution.

Let's take an example of the setTimeout method. When a setTimeout operation is processed in the call stack, it is sent to the related Browser API which waits till the specified time to send this operation back in for processing to the event queue.

The event loop facilitates this process; it constantly checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.