DEV Community: Nitin kalra

Closure and Scope in JavaScript

Nitin kalra — Sat, 04 Jun 2022 07:11:04 +0000

Just heard someone mentioning closure and scope and you've no idea what they are? I got you.

Let's have a brief look over that they mean:

Scope refers to the variables and functions within a block of code.
Closure is when a function is able to access and use variables from outside its own scope.

The key difference between scope and closure is that Scope refers to variables that are accessible to a certain portion of code, while closure is when a function remembers the variables from the scope in which it was created, even if that scope no longer exists.

Confused? here is a simple example to show how closure works:

Suppose we have a function called Add() that takes in a single number as an argument. This function returns another function that takes in a second number, adds the two numbers together, and returns the result:

function Add(x) {
  return function(y) {
    return x + y;
  };
}

Now, if we create a new variable called addFive and set it equal to the result of calling Add() with 5 as an argument, we can see that the addFive function has access to the x variable from the Add() function:

const addFive = Add(5);
console.log(addFive(2)); // 7

This is because the addFive function has closure over the x variable from the Add() function. The x variable is not declared inside of the addFive function, but the function still has access to it.

There are a few things to keep in mind with closures.

If a function has closure over a variable, that variable will stay in memory as long as the function is used. This can lead to memory leaks if the function is never called or is called but never removed from memory.
Functions with closure can access variables from any scope, not just the immediate scope in which they are defined. So, if a function has closure over a global variable, it can modify that variable even if it is not defined inside of the function.
Because functions with closure can access variables from any scope, they can also access variables from any future scope. So, if a function is defined inside of another function, it will have closure over all of the variables from the outer function. This can be used to create closures that are variables in themselves:

function Counter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

let counter = Counter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

In above code we've a counter that can be incremented and accessed from any scope. The counter function has closure over the count variable, which means that the count variable will stay in memory as long as the counter function is used.

Closures can be a powerful tool, but they should be used with caution. Because they can access variables from any scope, they can lead to unexpected results.

So what are you waiting for, fire up the editor and try it all yourself.

Feel free to comment with what you have learnt or any queries that you've.

What is async and defer and how you can use them to load your web app faster

Nitin kalra — Fri, 03 Jun 2022 18:34:56 +0000

No one likes a slow website? do they?

But the question is, how do we make our website more optimized, especially when it's dependent on large stylesheets?

Well, this blog post has the answer.

But first, let's understand how things work behind the scene...

While loading a webpage, the browser sends a request for each and every external JavaScript file. If there are 3 external JavaScript files, then the browser will send 3 requests. This impacts the loading time of the webpage.

And for that, in HTML5, we've the "async" and "defer" attributes for the "script" element.

But how do they help us in improving the performance of our website?

The async attribute tells the browser to load the JavaScript file asynchronously. That means, the browser does not have to wait for the file to finish downloading before it continues parsing the HTML.

The defer attribute also tells the browser to load the JavaScript file asynchronously, but there's a difference. With the defer attribute, the browser downloads the file during HTML parsing, but waits to execute it until after the HTML parser has finished.

Both async and defer have the same impact on the loading time of the webpage. So, which one should you use?

If you use the async attribute, then the browser will execute the JavaScript code as soon as it's downloaded. This might be fine if the code is very simple. But if the code is more complex, there's a risk that it might impact the loading of other resources on the page.

While if you use the defer attribute, then the browser will execute the JavaScript code only after the HTML parser has finished. So, if there are other resources that need to be loaded, the browser will finish loading those first before it executes the JavaScript code.

In general, it's best to use the defer attribute. That way, you can be sure that your JavaScript code will not impact the loading of other resources on the page.

Below is the syntax for both:

//Usual script tag
<script       src="myscript.js"></script>

//Script tag which is calling the resources with async
<script async src="myscript.js"></script>

//Script tag which is calling the resources with defer
<script defer src="myscript.js"></script>

So what are you waiting for, fire up the editor and try it all yourself.

Feel free to comment with what you have learnt or any queries that you've.

Session Storage vs Local Storage: what, why and how?

Nitin kalra — Fri, 03 Jun 2022 08:25:03 +0000

There are two types of storage in the web world: local storage and session storage.

But, what are they???

Local storage and session storage are two mechanisms for storing data on the client side. Local storage is similar to cookies, it stores data on the client side and persists even after the browser is closed. Session storage, on the other hand, only persists for the duration of the session (i.e., until the browser is closed).

Both local storage and session storage are useful for storing small pieces of data on the client side. For example, local storage can be used to store user preferences, while session storage can be used to store data that should only be accessible for the duration of the session.

Both have their own advantages and disadvantages. Let’s take a look at each one.

Local Storage

Local storage is a type of storage that is persistent. This means that the data stored in local storage will remain even after the browser is closed. The only way to remove data from local storage is to do it manually.

Advantages:

Data is persistent, which means it can be used to store data that needs to be accessed at a later time.
Local storage is relatively secure since the data is stored locally and not on a server.
Data stored in local storage is available throughout the application, although any URL can access only and only its own local storage data

Disadvantages:

Since local storage is persistent, it can take up a lot of space if not used carefully. It has a data limit of 5MB
Local storage is not accessible from other devices, which means it can’t be used to sync data across devices.

Session Storage

Session storage is a type of storage that is not persistent. This means that the data stored in session storage will be removed once the browser is closed.

Advantages:

Session storage is not persistent, which means it doesn’t take up a lot of space. The data limit for this is of 5MB.
Session storage is relatively secure since the data is stored locally and not on a server.

Disadvantages:

Since session storage is not persistent, data that needs to be accessed at a later time needs to be stored in local storage or on a server.
Session storage is not accessible from other devices, which means it can’t be used to sync data across devices
Session storage is tab bound, which means data stored in one tab would not be accessible to another tab.

Now, let's look at the syntax for each one of them.

Below is the code snippet to use Session storage.

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
const data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();

Below is the code snippet to use Localstorage.

// Save data to localStorage
localStorage.setItem('myCar', 'Toyota');

// Get saved data from localStorage
const car = localStorage.getItem('myCar');

// Remove saved data from localStorage
localStorage.removeItem('myCar');

// Remove all saved data from localStorage
localStorage.clear();

So what are you waiting for, fire up the editor and try it all yourself.

Feel free to comment with what you have learnt or any queries that you've.