Picture yourself enjoying your favourite latte at a coffee shop. Sitting at a corner table, you overhear two friends having a conversation. One of them shares a confidential secret with the other and asks them to keep it to themselves. Later, when you talk to a friend who was also present during the conversation, they still remember the secret and keep it private. This scenario is similar to how closures work in JavaScript. Like how the friend remembers the secret even after the conversation ends, closures allow functions to access variables from their surrounding scope, even after that scope has finished executing. This powerful concept is essential in many JavaScript and React applications, enabling them to efficiently manage data, handle events, and create encapsulated functionality.

In the world of JavaScript and React, numerous concepts and techniques can make your code more efficient and flexible. One such concept that often puzzles developers but proves to be incredibly useful is JavaScript closures. In this blog post, we'll demystify closures, explore their real-world use cases in React, and illustrate their importance through practical examples.

Understanding JavaScript Closures

To fully understand closures, it is crucial to comprehend the idea of lexical scope. In JavaScript, functions possess access to variables from their surrounding scope. If a function is defined within another function, it creates a closure, allowing the inner function to access the outer function's variables and parameters, even after the outer function has finished executing.

Here's a simple example:

function outer() {
  const outerVar = 10;

  function inner() {
    console.log(outerVar); // Accesses outerVar from the outer function
  }

  return inner;
}

const closureFunc = outer();
closureFunc(); // Outputs 10

In this example, inner is a closure because it maintains access to the outerVar variable even after outer has finished executing. This is incredibly useful in React for various scenarios.

Use Cases of Closures in React

1. Event Handlers with Closures

Closures can be used effectively in React to handle events with dynamic data. Consider a scenario where you want to create a list of buttons, each with its unique value:

function ButtonList() {
  const values = [1, 2, 3, 4, 5];

  return (
    <div>
      {values.map((value) => (
        <button key={value} onClick={() => handleButtonClick(value)}>
          Button {value}
        </button>
      ))}
    </div>
  );
}

In this example, the onClick handler creates a closure around value, ensuring that each button knows its corresponding value when clicked.

2. Private Data and Encapsulation

JavaScript closures are also useful for creating private variables and encapsulating data within React components. For instance, consider building a counter component with a private counter variable:

function Counter() {
  let count = 0;

  return {
    increment: () => {
      count++;
      console.log(`Count: ${count}`);
    },
    decrement: () => {
      count--;
      console.log(`Count: ${count}`);
    },
  };
}

const myCounter = Counter();
myCounter.increment(); // Outputs: Count: 1
myCounter.decrement(); // Outputs: Count: 0

In React, you can achieve similar encapsulation by using closures to maintain the component state and hide it from the outside world.

3. Memoization for Performance Optimization

Caching expensive function results using memoization is made possible with closures. In React, you can use closures within functional components to significantly improve performance.

function ExpensiveCalculation() {
  const cache = {};

  return (input) => {
    if (input in cache) {
      return cache[input];
    } else {
      const result = /* Perform expensive calculation */;
      cache[input] = result;
      return result;
    }
  };
}

Conclusion

In React development, JavaScript closures can be a valuable asset. With closures, you can efficiently create encapsulated and maintainable code for a variety of real-world scenarios. This includes handling dynamic data in event handlers, encapsulating private data, and optimizing performance through memoization. By embracing closures, you can unlock their potential and enhance your React projects.

In layman's language, event delegation can be defined as a way to add an event listener to multiple elements with the help of parent elements.

Let’s take an example in real life. We often hear the news that this country's delegation went to another country and made some agreements with different ministries. Now this delegation contains diplomats from different ministries that are our multiple elements and the delegation itself is the parent element Here multiple agreements are our event listeners. These multiple events are made using a single element that is the delegation which is the parent element.

Explanation

Now, if you can relate our event delegation in javascript with a real-life delegation of countries, then it’s simple to understand the concept of event delegation.

Let’s dive into some code for practical understanding. Below is the HTML document with the parent element and its children elements.

<nav class="navbar">
    <ul id="nav_links">
        <li> Home </li>
        <li> About </li>
        <li> Contact </li>
    </ul>
    <button class="nav_login_btn">Login</button>
</nav>

In this example, our nav_links as the parent element and all li tags will be children. Now if we want to add event listeners to each li then we can simply give a class or an id to each li and can access it using querySelector and then can add an event listener explicitly. But we are going to make our life simple. We will only access the parent element and then apply an event listener on it directly. Like the delegation in the above example. And then based on some conditions, we can perform some operations separately on each child.

Let’s take a look at the code.

const list = document.querySelector("#nav_links");// accessed parent element

list.addEventListener("click", (e)=>{  // Added event listener on parent element
    const target = e.target;
    if(target.matches("li")){
            if(target.innerText === "Home"){
                    target.style.color = "red";
                }
            else if(target.innerText === "About"){
                    target.style.color = "blue";
                }
            else{
                    target.style.color = "green";
                }
        }
})

Here matches is the method on the target object which helps to find the child element. It simply returns true or false.

So this is our delegation of the event which performs different operations based on conditions on different elements.

Have a look at the visuals of the above code.

More Action

We can also perform operations like appending or deleting the child element.

const list = document.querySelector("#nav_links"); // accessed parent element

const newElement = document.createElement("li"); // Created new element
newElement.innerText = "Privacy Policy";         // Added inner text to element

list.addEventListener("click", (e)=>{   // Added event listener on parent element
    const target = e.target;
    if(target.matches("li")){
            if(target.innerText === "Home"){
                    target.style.color = "red";
                }
            else if(target.innerText === "About"){
                    target.style.color = "blue";
                } 
            else{
                    target.style.color = "green";  
          list.appendChild(newElement); // New Element inserted here.
                }
        }
})

Here we are adding a new list element which is the Privacy Policy.

Have a look at the visuals of the above code.

Summary

So, in this article, we saw how useful event delegation is.

It is basically :

• A way to add an event listener to multiple elements using a single parent element.
• It can be used to add child elements or to remove child elements.
• It has a single event listener on the parent element.
• Based on different conditions it performs actions on child elements.

Let's first see, what are comparison operators?

A comparison operator compares its operands and returns a logical value based on whether the comparison is true.

Wait, but the definition doesn't stop here. It comes with some predefined conditions such as:

• The operands can be numerical, string, objects or logical values.

• Strings are compared based on standard lexicographical ordering, using Unicode values.

• If the two operands are different for example, one is numerical and another one is a string then JavaScript attempts to convert them to an appropriate type for the comparison.

• And this behaviour generally results in comparing the operands numerically.

And now the important one,

• The sole exceptions to type conversion within comparison involve the === and !== operators.

So far we know that === and !== are the exceptions in comparison operators. Now, let's understand why they are exceptions and what is the difference between == and === of between != and !==.

Understanding ===

Let's consider a variable,

const age = 18;
if(age === 18) console.log(`You are an adult. 🧑 `);

Now, how does this equality operator here in if condition actually works?

Well, just like any other comparison operator it is also a comparison operator so, it will return a true or a false value, so a boolean value, as a result, in case both sides are the same. Let's actually show that to you. If I write in console,

and that's what we use in if condition.

Understanding == .

Now, besides === we also have == as an equality operator. And this also works as a comparison operator. Have a look.

Difference between == and === .

So the difference is that this one here === with triple equal is called the strict equality operator. It is strict because it does not perform type conversion.

So, it returns the true value when both the values are the same.

See the example here,

On the other hand, there is a loose equality operator with only two == signs. And the loose equality operator actually does the type conversion. So let's see that again in console,

In this case, we can do "18" the string equal to the 18 the number and it will still give us true.

So, again the == does not perform type conversion. So what that means is that this "18"the string here will be converted to the number and then the number 18 is just the same as that of the number 18 on the left-hand side.

Difference between != and !== .

So, as we have talked about the equal-to operators, let's also talk about the inequality operators.

Here we have again two inequality operators one is != and the other one is !==. So, != is a loose inequality operator which supports type conversion and !== is a strict inequality operator which does support type conversion. Let's see it again in the console

I hope that's not too confusing to you right now. So for comparing values always use the === or !== operator to avoid bugs in your code.

Wrapping Up!

• The sole exceptions to type conversion within comparison involve the === and !== operators.

• === and !== are strict comparisons operators which do not support type conversion.

• == and != are loose comparisons operators which support type conversion.

• Using strict comparison operators in code always helps in avoiding errors.

Thank you!

I want to start with a definition that you might have learned, where it says that,

JavaScript is a high-level, object-oriented, multi-paradigm programming language.

Now, this is of course 100% correct, but this is just a surface, the tip of the iceberg. So what about this definition,

JavaScript is a high-level, prototype-based object-oriented, multi-paradigm, interrupted or just-in-time compiler, dynamic, single-threaded, garbage-collected programming language with first-class functions and a non-blocking event loop concurrency model.

You might think is this some kind of joke, but I just packed as much information as possible about JavaScript into one unreadable sentence just for fun. But besides fun, this also gives us a great opportunity to unpack all of these concepts to get the first peek into all this stuff that we are going to learn to define JavaScript. I just want you to get the big picture before really getting started and also introduced some topics that are just good to know because getting the big picture before diving deep is in my opinion is amazing learning technique. So with that being said let’s unpack this now a little bit.

High-level programming language.

Starting with a high-level part as you might already know every program that runs on your computer needs some hardware resources such as a memory card and CPU to do with work.

Now, there are low-level languages such as C where you have to manually manage these resources. For example, asking the computer for memory to create a new variable. On the other side, you have high-level languages such as JavaScript and Python where we do not have to manage resources at all. Because these languages have so-called abstractions that take all of the work away from us. This makes the language easier to learn but the downside is the program will never be as fast or as optimised as the C program.

Now one of the powerful tools that take memory management away from us developers is garbage collection. This is basically an algorithm inside the JavaScript engine which automatically removes all unused objects from the computer memory in order not to clog it up with unnecessary stuff.

So it’s a little bit like JavaScript has a cleaning guy, who cleans our memory from time to time, so that we don’t have to do it manually in our code.

Interpreted or just in time compiled language.

Computer's processors only understand 0s and 1s, that’s right. Ultimately every single program needs to be written in zeros and ones which is also called machine code and since that is not really practical to write, is it? We simply write human-readable JavaScript code which is an abstraction over machine code. But this code eventually needs to be translated to the machine code and that step can be either compiling or interpreting.

This step is necessary for every single programming language because no one writes machine code manually. In the case of JavaScript, this happens inside the JavaScript engine.

Multi-paradigm.

Now, one of the things that makes JavaScript so popular is the fact that it's a multi-paradigm language. In programming, a paradigm is an approach and an overall mindset of structuring our code, which will ultimately direct the coding style and technique in a project that uses a certain paradigm. And this definition sounds kind of abstract. But don’t worry it will become more clear as we move on.

Now, three popular paradigms are, Procedural, Object-oriented, Functional programming.

Procedural programming is basically just organizing the code in a very linear way and then with some functions in between.

About object-oriented programming and functional programming I will talk about them in a second. Also, we can classify the paradigm as imperative or as declarative.

Now, many languages are only procedural or only object-oriented or only functional but JavaScript does all of it, so it's really flexible and versatile. And so we can do really whatever we want with it. It’s our choice we can use whatever paradigm we want.

So about the object-oriented nature of JavaScript, it is a prototype-based object-oriented language. What does that mean? Well, first almost everything in JavaScript is an object except for primitive values such as numbers, strings, etc. But arrays for example are just objects.

Have you ever wondered why we can create an array then use the push method on it? Well, it’s because of prototypal inheritance. Basically, we create arrays from an array's blueprint, which is like a template. This is called the prototype.

This prototype contains all the array methods and the arrays that we create in our code then inherit the methods from the blueprint. So that we can use them on the arrays and this, what I just explained to you is actually a huge oversimplification which might still sound confusing.

First class functions.

JavaScript is a language with first-class functions, which simply means that functions are treated just as regular variables. So, we can pass functions into other functions and we can even return functions from functions. And this is extremely powerful because it allows us to use a lot of powerful techniques and allows for functional programming which is one of the paradigms that we just talk about. And in fact, we use them without knowing that they are first-class functions. For example :

result.addEventListener('click', clickHandler);

In this example, `clickHandler is actually a first-class function that we use without knowing its name actually. And not all languages have first-class functions, but JavaScript has and it is amazing. Believe me, it's really really helpful.

Dynamic language.

Javascript is a dynamic language and dynamic actually means dynamically -typed. So, as we already know in javascript we don't assign data types to variables. Instead, they only became known when the javascript engine executes our code. Also, the type of variables can easily be changed as we reassign variables, and this is basically what dynamically-typed means.

The same is not true for most other languages, where we have to manually assign types to variables and this usually prevents bugs from happening which is the reason why many people say that javascript should be a strongly typed language as well. And if you yourself want to use javascript with type then you can always look into typescript.

Single-thread and non-blocking event-loop concurrency.

Let's now finally talk about the single-thread and non-blocking event loop concurrency model. Now, this is a really complex topic and probably the most complex one out of the whole javascript. So, I am not going to go deep but instead, I will just define some things here.

First, what is a concurrency model? Well, it's just a fancy term that means how the javascript engine handles multiple tasks happening at the same time. That's cool but why do we need that? Well, because javascript itself runs in one single thread which means that it can only do one thing at a time. And, therefore we need a way of handling multiple things happening at the same time and by the way, in computing, a thread is like a set of instructions that are executed in the computer CPU. So basically, the thread is where our code is actually executed in a machine's processors.

All right, but what if there is a long-running task like fetching data from a remote server? Well, it sounds like, that would block the signal thread where the code is running, right? But of course, we don't want that. What we want is so-called non-blocking behaviour and how do we achieve that? Well, by using the so-called event loop. The event loop takes long-running tasks executes them in the background and then puts them back in the main thread once they are finished.

And this is in a nutshell JavaScript non-blocking event loop concurrency model with a single thread.

It sounds like a mouthful for sure but in the end, it really just compresses to this.

Wrapping Up!

So to define what is javascript we saw these features of javascript

1. High-level programming language.
2. Interpreted or just in time compiled language.
3. Multi-paradigm.
4. First-class functions.
5. Dynamic language.
6. Single-thread and non-blocking event-loop concurrency.

So, I hope now you can not only be able to define javascript by yourself but also you can be able to elaborate on that definition using these features of javascript.

I know there is a ton of stuff to take in but I hope that you still learned a thing or two here.😊

Thank you.

What is DOM?

DOM stands for document 'Document Object Model'. It is a structured representation of an HTML document that allows javascript to access HTML elements and styles to manipulate them and it is a structured representation of an HTML document.

The DOM allow us to use javascript to access HTML elements and styles to manipulate them, for example, we will be able to change the text in HTML attributes and also to change CSS styles from our javascript so we can say that the DOM is a connection point between HTML document and JavaScript.

The DOM is automatically created by the browser as soon as the HTML page loads and it is stored in a tree structure like this one.

In this tree, each HTML element is one object, so let’s now take a look at this DOM structure in a little bit more detail and to illustrate this here is a very simple document and its DOM tree.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>Hello, this is <a href="#">HTML</a> </p>
</body>
</html>

So as I already mentioned this is a tree structure that looks a bit like a family tree and we use it to turn them, child element, parent element, sibling element and so more when we talk about DOM manipulation and DOM structure.

Anyway as you can see for each element in the HTML here is one element node in the DOM tree and we can access and manipulate each element using JavaScript.

So the DOM always starts with a document object right at the very top and this document is a special object that we have access to in JavaScript and this object serves as an entry point into the DOM.

Remember how we use the document.queryselector() method to select an element so that it means the queryselector method is available on the document of the object and that’s why we say that document is the entry point to the DOM. Because we need it to starts selecting elements.

The first child element of the document is usually the HTML element because that’s usually the root element in all HTML documents. Now moving ahead HTML elements have usually to child elements head and body and so, of course, you can also find them here in the DOM tree and as you can see they are adjacent elements so they are siblings in our DOM as well. As we keep going deeper into the nested HTML structure we keep adding more and more children to the DOM tree. So inside the head and body, you have more child elements.

But the DOM tree has more than just HTML element nodes, it also has the nodes for all the text itself, comments and others stuff. Because basically, the rule is that whatever is in the HTML document also has to be in the DOM. And so as you can see the DOM is a complete representation of the HTML document. So that we can manipulate it in complex ways.

And with this, you should have a good overview of how the DOM works and what it looks like.

What is DOM manipulation?

Manipulating DOM is accessing the objects in the DOM tree and changing the values that belong to them. This also includes the styling of those elements. And how we access these objects that we have seen above.

Why DOM manipulation !== JavaScript?

Many beginners believe that the DOM and all the methods and properties that we can use to manipulate a DOM such as document.queryselector() and lots of other stuff are part of javascript, however, this is not the case. Remember the javascript is actually just a dialect of the ECMA script specification, and all this DOM related stuff is not there in JavaScript.

But now you might ask DOM is not a part of JavaScript then how does this all work? To understand this we need to have no web APIs.

What are web APIs?

The DOM and the DOM methods are part of something called the web APIs. The web APIs are like libraries that the browser implements and we can access them from our JavaScript code.

For now, what you need to know is web APIs are the libraries that are also written in javascript and that are automatically available to us to use. So all this happens behind the scenes we don’t have to import all to do anything to use them. And there is an officially DOM specification that browsers implement which is the reason why DOM manipulation works the same on all browsers.

Now, besides the DOM there are tons of other APIs like timers and fetch and many more we will talk about them in upcoming posts.

Wrapping up.

DOM

1. Stands for Document Object Model.
2. Allows us to access HTML elements using javascript.
3. Browser creates it for us automatically when the page loads.

DOM Manipulation

Accessing objects in the DOM tree and changing values that belong to it.

Why DOM Manipulation !== Javascript?

The DOM and the DOM methods are part of something called the web APIs.

I hope 🤞 now you know why DOM Manipulation !== Javascript.

Thank you!