DEV Community: Nikhil

In Depth Guide On Hoisting In JavaScript

Nikhil — Sun, 06 Nov 2022 18:33:25 +0000

In this article we will deep dive into hoisting concept in JavaScript. Before we start let's brush up some programming fundamentals.

Programming Fundamentals

Computer program is just a set of instructions given to the computer to execute. We write programs in high level language (Python, JavaScript, etc.) which is easily understood/read by humans but computers do not understand this high level language. For computers to understand our program, it has to be converted into low level code. So in order to perform this functionality, languages use Compilers and Interpreters. Compilers and Interpreters take human readable code and convert it to computer readable machine code.

Difference between Compilers and Interpreters :

Compiler, scans the entire program in one go and translates it as a whole into machine code.

Where as Interpreter, translates program one statement at a time. Before interpreting next statement, previous statement is executed.

Therefore, compiled languages are faster than interpreted languages as compiled language overall execution time is less compared to interpreted language.

Some examples of compiled and interpreted languages are:

Compiled languages : C, C++, Go, Rust, etc.

Interpreted languages : Python, Ruby, PHP, etc.

Now, coming back to JavaScript. Let's check whether JavaScript is interpreted or compiled.

So according to Google and MDN docs, JavaScript is an interpreted language.

This means that JavaScript code is executed line by line, top to bottom.

Hoisting in JavaScript

Now that we know JavaScript is interpreted language, let's try to solve below problem.

console.log(platform)

var platform = "Dev"

Let’s try to execute the code line by line in our mind, same as the interpreter would do.

1st line is console.log(platform).

This should give “Reference Error: platform is not defined” because as per interpreter there is no as such variable called platform.

But you will be amazed to know that the correct output is "undefined". Wondering how? 🤔

This is where concept called JavaScript Hoisting comes into picture.

According to MDN docs,

"JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code".

Do you really think that the interpreter takes our code and tosses it up before execution? 🤔 Let's dig in more deeper.

Getting output undefined is weird, this means that our variable is declared but not initialised. This also means that the interpreter somehow knows what's happened in next line 🤯. Interpreter here is showing some glimpses of behaviour like a Compiler.

The real reason behind this is that JavaScript is just-in-time compiled before it’s interpreted. Because of which concepts like hoisting and lexical scoping exist. In this compilation phase, all variables and functions in program is assigned with their appropriate scope.

So, the best way to think about this is that all declarations, both variables and functions, are processed first and scope is assigned to them, before any part of your code is executed. Because of this, interpreter knows about the declaration even before it starts execution.

Now that we know JavaScript code is parsed before any execution begins then why does JavaScript spec say that variable and function declarations are moved to the top of their scope, before the code is executed?

To maintain simplicity, so that we can just think about the program as if it's executed by the JS engine in a single pass, top-to-down approach. Moving forward we will also understand examples with this ideology.

Now let's understand how hoisting differs in var, let and const variables.

Hoisting in `var` variables

console.log(a); // undefined
var a = 5;

As we see in above example that console.log prints undefined and not ReferenceError this is because after hoisting, the above program behaves as:

var a;
console.log(a);
a = 5;

Here we can see that var declaration is hoisted at the top of the program.

Hoisting in `let` and `const` variables

Hoisting in let and const variables is little different compared to var variable hoisting.

console.log(a);
// ReferenceError

let a = "Hello";

when we run the above code, we get Reference Error : Cannot access 'a' before initialization. From this error we can notice that the variable a is defined in the scope but it cannot be accessed before initialization.

So the main catch is that, with variables declared with var keyword are automatically initialised to undefined at the top of the scope whereas variable declared with let and const keywords are not initialised.

Hoisting in function declarations

greet(); // Hello

function greet() {
    console.log("Hello");
}

Above code works fine even though greet function is called before it's even declared. In JavaScript the entire function is hoisted to the top.

Thank you for reading this article. I hope that now you have clear understanding of JavaScript hoisting. Feel free to correct me if i have made any mistakes.

Improve Web Performance With Web Workers

Nikhil — Wed, 27 Apr 2022 05:55:03 +0000

If your are looking to optimise or improve performance of your web application then you should definitely use web workers but still many people are unaware of it and don't know how to setup with web application. In this post i'll do my best to help you with web workers.

What is Web Worker?

In simple terms web worker is nothing but a javascript file that is executed by the browser in background separate from your application javascript file.

How Web Worker can increase your application performance?

As Web worker runs separate from the main javascript file you can put your computational intensive functions present in main javascript file into web worker file so main thread can run smoothly with no hiccups in user interface.

How to setup web worker

Create a javascript file named worker.js as shown below in your project directory.


// worker.js
console.log("Hello from web worker!")
this.onmessage = e => {
  console.log('worker.js: Message received from main script', e.data)
  this.postMessage('Hello main')
}

onmessage : It is used to listen to any messages sent by the main application thread.

postMessage : It is used send message to main application thread.

In main.js file you can instantiate worker object by passing worker.js path address to Worker class and then similarly you can use onmessage and postMessage function to communicate with the worker thread.

// main.js
const worker = new Worker('worker.js')
worker.postMessage('Hello Worker')
worker.onmessage = e => {
  console.log('main.js: Message received from worker:', e.data)
}
// if you want to "uninstall" the web worker then use:
// worker.terminate()

You can use worker.terminate() function to terminate your web worker execution.

With this simple steps now you can put your compute intensive functions in web worker and communicate with main application thread once it's executed.

Thank you for reading this article. Follow me on Twitter if you are interested in web development and javascript content.

React: useEffect vs useLayoutEffect

Nikhil — Tue, 16 Feb 2021 09:57:53 +0000

If you have just started working on React or have ever written a functional component, I am pretty sure that you may have come across useEffect hook and you may know that it is used to perform some side effects like data fetching, sending HTTP requests, etc. But in this post we will talk about another react hook called useLayoutEffect and see how it is different from useEffect hook.

useLayoutEffect

To be honest there is not much difference between useEffect and useLayoutEffect the only noticable difference is that useLayoutEffect runs before browser paints DOM elements on the screen as you can see in the image below.

Credits- Donavon Github

As you can see in the image useEffect runs after the UI is painted. The only case where useLayoutEffect is useful and should be preferred over useEffect is when you are directly making DOM changes. As DOM changes would be done before it is painted on the screen and thus making the experience smooth.

Conclusion

One should prefer useEffect most of the time until and unless you are mutating DOM or want to do some performance measurements.

Wrap Up!

Thank you for your time!! Let's connect to learn and grow together. LinkedIn

Build an In-Browser Transpiler

Nikhil — Tue, 02 Feb 2021 09:23:51 +0000

Recently I wanted to build an In-Browser transpiler for my react project. So in this article I will try to explain the process of building one.

Understanding Transpiling

Let us first understand what is transpiling?

Transpiling is nothing but process of converting your source code from one language to another. Transpiling is done by a software program called transpilers or source-to-source compilers.

Why do we need transpilers?

We know browser only understands javaScript. So transpilers helps us to write different languages, like CoffeeScript, TypeScript, or ClojureScript which during execution can be compiled to plain javaScript.

The most famous transpiler in javaScript world is Babel, but in this article we will use esbuild which I personally found out to be quite fast and it also allows us to do In-Browser bundling( will talk about this in future post😉 ).

What are we building here?

We will be building a simple react application that will take the JSX code in textarea and will transpile the code into ES2015 javaScript.

Initializing

npx create-react-app react-transpiler
cd react-transpiler
npm install esbuild-wasm

Node and npm should be preinstalled.

Building The App

After initializing, open the code editor at current path.

Index.js

import * as esbuild from "esbuild-wasm";
import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const ref = useRef<any>();
  const [input, setInput] = useState("");
  const [code, setCode] = useState("");

  const startService = async () => {
    ref.current = await esbuild.startService({
      worker: true,
      wasmURL: "https://unpkg.com/esbuild-wasm@0.8.27/esbuild.wasm",
    });
  };
  useEffect(() => {
    startService();
  }, []);

  const onClick = async () => {
    if (!ref.current) {
      return;
    }

    const result = await ref.current.transform(input, {
      loader: "jsx",
      target: "es2015",
    });

    setCode(result.code);
  };

  return (
    <div>
      <h2>JSX Transpiler</h2>
      <textarea
        value={input}
        style={{ height: "300px", width: "500px" }}
        onChange={(e) => setInput(e.target.value)}
      ></textarea>
      <div>
        <button onClick={onClick}>Transpile</button>
      </div>
      <pre>{code}</pre>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("#root"));

Output

Hurray🎉🎉

We built an In-Browser JSX transpiler using esbuild.

Wrap Up!

Thank you for your time!! Let's connect to learn and grow together. LinkedIn

DEV Community: Nikhil

In Depth Guide On Hoisting In JavaScript

Programming Fundamentals

Difference between Compilers and Interpreters :

Some examples of compiled and interpreted languages are:

Hoisting in JavaScript

Hoisting in var variables

Hoisting in let and const variables

Hoisting in function declarations

Improve Web Performance With Web Workers

What is Web Worker?

How Web Worker can increase your application performance?

How to setup web worker

React: useEffect vs useLayoutEffect

useLayoutEffect

Conclusion

Wrap Up!

Build an In-Browser Transpiler

Understanding Transpiling

Let us first understand what is transpiling?

Why do we need transpilers?

What are we building here?

Initializing

Building The App

Index.js

Output

Wrap Up!

Hoisting in `var` variables

Hoisting in `let` and `const` variables