DEV Community: AnshulJS

Hoisting in JS. (Part 1 - variable Hoisting)

AnshulJS — Tue, 02 Feb 2021 12:23:19 +0000

Prerequisite: Basic knowledge of JS

What is Hoisting?

In simple words, it means you can use a variable before declaring it (variable declaration is a must).

Ok, what that means? Can’t I use a variable without declaring it?

No, you can’t. You have to declare a variable to use it.

For example:

I am using variable x without declaring it and I got an error. This behavior is common in almost all programming languages. (I guessed)

Ok, now you know that you have to declare a variable to use it.

But now you have the below questions:

What do you mean by variable declaration?
How JS engine know that this is a variable declaration?
Where should I declare a variable? I mean physical location in your code. That is either before or after using a variable?
Where is hoisting in all of this?

Let answered them one by one.

What do you mean by variable declaration?

In JS, If you want to store data in your code you use variables to store them. For that, you inform the JS engine by saying that “Hey JS engine, I want to store some data in my code so I am going to declare a variable to just inform you.”

var x;

This is called a variable declaration. var x this exact piece of code tells the JS engine that you declare a variable and named it x.

JS provides 3 keywords to declare a variable.

var const let

In this article, I will use the var keyword.

Just Remember when you declare a variable with var keyword, behind the scene JS engine allocates memory for it. That's why you have to declare a variable to use it.

JS engine is responsible for executing your JS code. Your JS code is feed into the JS engine and then it spits out the final output. That’s why browsers understand JS code because every major browser comes with its own JS engine like chrome have V8 engine, the edge has Chakra, Mozilla have SpiderMonkey.

Check more: List of JS engine

How does the JS engine know that this `var x` is a variable declaration?

These keywords (var, const, let) help the JS engine to identify that a variable is declared.

So when the JS engine sees the below code:

JS engine is like “Oh I got it. You declared a variable.”

Where should I declare a variable? I mean physical location in your code. That is either before or after using a variable?

To answer this question, let me show you 2 examples.

In 1st example, I first declare a variable and then use it by printing its output.
In 2nd example, I first use it by printing its output and then declare the x variable.

In most programming languages, you cannot use a variable before declaring it.

But in JS, you can. And that's where hoisting comes into the picture.

Where is hoisting in all of this?

Both ways of declaring variable in JS are fine until you use "use strict" in your code.(called strict mode)

In strict mode, you cannot use a variable before declaring it.

But to understand hoisting, we skip the strict mode.

In beginning, I told you that hoisting helps you to use a variable before declaring it with the var keyword.

can you guess the output of the below code?

console.log(x);
var x;

var x;
console.log(x);

Both will print undefined. This means x gets undefined as the default value.

How variable x get `undefined` as the default value?

Let go step by step.

If you do not assign a value to a variable then by default JS engine assigns undefined as the default value. Yes, undefined is a value in JS like number (1,2,3...) and character (a,b,c....)

Ok, so both ways of writing look similar then where is the difference?

The difference comes in how the JS engine parse it.
To understand that you need to understand the different phases your code goes through.

JS engine has 2 phase:

Memory creation phase
Execution phase

var x;
console.log(x);

Let's understand how the JS engine parse the above code.

When the JS engine sees var x, then it sees it as variable declaration, remember our 2nd question How JS engine know that this is a variable declaration?

So after seeing it as variable declaration, JS engine takes the variable x and store it in memory and assign undefined as its value. This happens in the Memory creation phase.

In the Execution phase, when it sees console.log(x);, the JS engine says "I know what x is. I already store it in memory during memory creation phase." And since the JS engine already assigned undefined as its value in this phase, so you will get undefined output.

Explanation:-

During the memory creation phase, JS engine recognizes variable declarations as it reads the code, initializes them to undefined, and puts them into memory to be used during the execution.

So when JS engine start executing your code (Execution phase started), all variable we use in the code, JS engine confirms their existence from Memory creation phase.

Now you know why we get a Reference error in the above code.
When JS engine see console.log(x);, It says "Ok... I do not see the x variable stored in memory. (Why?) because there is no variable declaration code, so when it goes through the memory creation phase it stores nothing in memory.
And since the JS engine does not find the location/ reference of the x variable in memory, so it throws a Reference error.

Few...take a break because the next one is tricky.

console.log(x);
var x;

Let start with how the JS engine will parse this code.

Till now basic understanding will be like this, JS engine will see console.log(x);, and then it will throw a Reference error same as what we see in the last example.

But that's, not the case. Remember that our JS code will go through 2 phases. (memory and execution phase)
So first JS engine will parse the complete code to identify all the variable declarations and then put them in memory with undefined as their values.

Now behind the scene, your code looks like this.

Now you get to know why few folk say that in hoisting your variable declaration move at the top of your code. Actually, it happened behind the scene, not on your actual code.

Once the memory creation phase complete, your code moves to the execution phase. Now JS engine sees this console.log(x); code and say "Yup I know it. This x variable I already save in memory in last phase.". Then it will print undefined as output.

You see hoisting magic. You can access the x variable before declaring it. In c# or java you can't access them before. You will get error there.

Quiz

console.log(a);
var a = 10;
console.log(a);
a = 20;
console.log(a);

Hint: variable declaration is hoisted. Initialization do not.

var a => this is variable declaration.
= 10 => this is initialization.

Comment your output and share how the above code looks behind the scene after going through the JS engine phases.

Summary

Hoisting simply means you can access the variable before declaring it. It has its own pros and cons. But if you do not like hoisting then write code in strict mode (use strict).

I know let & const are not cover but let save them for a future post.
Part 2 will cover how hoisting works with function. Is it the same or diff?

Please share your thoughts here or on LinkedIn. If I missed something please comment below, I will update the post.

Thank you.

input type V/S button type: Part 1

AnshulJS — Sun, 03 May 2020 17:36:23 +0000

Let me ask you a question. Which one is better to use?

It depends on 2 things:

A scenario in which we are using it.
Developer's choice.

Just think... why we do have 2 tags with the same attribute? Isn't input enough to do all sorts of things that a button can do?

There must be a reason for it. Let's find out.

I will divide this post into 3 parts.

Part 1 - input type button V/S button type button
Part 2 - input type reset V/S button type reset
Part 3 - input type submit V/S button type submit

1. input type button V/S button type button

Both look the same.

Let see how both look on an HTML page.

type="button"

It just creates an HTML button. Nothing else. No button's label and no functionality on click of it.

Now after adding value="click", we get button's label.

Input elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event).

Input type="button" elements have no default behavior unlike type="submit" and type="reset" have which I will explain in the later part.

To make input buttons do anything, you have to write JavaScript code to do the work.

For button type="button", it looks like this.

Let's add a label.

button tag does not have value attribute to set button label.
input tag does not have a closing tag while the button tag has a closing tag.
So for those elements that have a closing tag, we can add content between the opening and the closing tag.
Content mean any kind like text, image etc.

What if you put the value attribute in the button tag? Let's see...

Nothing happened because the button has value attribute but it is not it's purpose to set button label. The value attribute specifies the initial value for a button in a form tag.(wait for next Part for form)

Difference

That's where the difference comes. In the input tag, you need value attribute to set label while in button tag, you do not need any attribute. You can directly put the label between opening and closing button tags.

Wait... It doesn't make any significant difference in there use. Till now its completely developer's choice.

BUT what if I ask you:

I want a button that has an image in its label and no text?
I want a button that has an image in its label with a text?

Like this...

Now you can see that we have a download button. If you see this is just a button tag with an image tag inside it.

To achieve this with the input tag, you have to use type="image" with src attribute in it.

See UI Difference.

input type="image" do not support value attirbute. So you cannot add label in input type="image" button

But we can achieve both image and label in button tag.

In simple, button tags can add different types of content but input can't.

button elements are much easier to style than input elements. You can add inner HTML content (think i, br, or even img), and use ::after and ::before pseudo-elements for complex rendering.
You can’t use pseudo-classes to style self-closing tags (img, input, hr etc).

If your buttons are not for submitting form data to a server, be sure to set their type attribute to button. Otherwise, they will try to submit form data and to load the (nonexistent) response, possibly destroying the current state of the document.

NOTE: If the button tag does not have a type attribute then by default type has "submit" as a value.

While input elements of type button are still perfectly valid HTML, the newer button element is now the favored way to create buttons.

button and input both have a lot of attributes but type attribute is the one that creates confusion.

Till now we have seen, UI difference between the attribute. But what about the functionality... what will happen on there click?

Both input and button tag with type="button" attribute only create the idle button. They have no default behavior on click of it.

Even if you add button type="button" in the form, it will do nothing. It will not submit the form.

Same for input type="button".

So to do some action on button click just add onclick on both input and button tag and it will execute the function attached to onclick.

For more detail on button and input go to MDN button and MDN input

Conclusion

input type="button" and button type="button" both look same in UI as well as in functionality.
In the button tag, you can add complex content between closing and opening tags. For the input tag, you can't add complex content without using CSS hacks
Button tag comes with HTML5 and it is a quicker way to create a button. CSS changes are easy on the button tag as compared to the input tag.

In the end, it depends on your choice. I preferred the button tag. Comment down your choice.

I hope you guys get something from this post. If you find this useful, please like it, share it, comment down below, debate on it...

If I missed something, plz point it out. It really helps me and other viewers. Your likes and comments motivate me a lot.

Who am I?

My name is Anshul Nautiyal. I am a Front-End Developer in Ajio.com
AJIO, a fashion and lifestyle brand, is Reliance Retail's first pan-Indian e-commerce venture. You will get an awesome product at an awesome discount. Do visit. AJIO

What I do in Ajio?

I mostly work on implementing new features in AJIO. Apart from that, I work on performance optimization, code refracting, and try to automate every possible manual work which I and my team are doing every day. I follow the DRY principle both in my code and life.

Stay tuned for part 2...

Redux with Vanilla JS: Interview Preparation (Part 1)

AnshulJS — Thu, 20 Feb 2020 12:16:14 +0000

Introduction

In this post, we are going to learn how to use Redux with vanilla JS from scratch. I have divided this article into 3 Parts.

Part 1 will answer these questions:

What is redux?
If you know about redux then do you really need it?

Part 2 will answer this question:

If yes, then how redux work?

Part 3 will answer this question:

You know how it works, then let see how to use it in JS?

Prerequisite

You should have basic theoretical knowledge of JS.

Let's start.

What is redux?

Redux is a predictable state container for JavaScript apps.

Ok...Let me close this article.
wait
.
.
.
.
wait
.
.
.
wait
.
.
.
wait...

I will explain to you in a layman term with some examples.

An example is better than a definition. By Anshul Nautiyal

Let me ask you one question. How did you manage data in vanilla JS?

If your answer is storing local data in a variable and then share it with different parts of an application.
But it will cause a problem because as your codebase increases, managing 100 of variables in a different part of the application is very difficult. right?

Let use the TO DO web app example to answer this question.

index.html

In HTML, we have one h1 tag which shows the counter value and a button tag to increment the h1 value.

<h1 id="counter"><h1>
Add

index.js

Let write some javascript code to make it work. Don't forget to add index.js file in index.html

If you see the h1 tag in the index.html file, it does not have an initial value.
So, let first set it in JS.

NOTE: I add script tag at the end of body tag in the index.html file because in this case, first I want complete body is rendered in a browser and then index.js file should load. If I add script tag below the title tag then I will get error in console: cannot set property 'innerHTML' of null Why? Comment down below.

In the index.js file, I create an IIFE (Immediately-Invoked Function Expression). This function executes immediately after it’s created. In this case, as soon as index.js file loads IIFE function starts executing.

Then it set 0 value in the h1 tag which is an initial value.

You can store initial value in some variable and then assign it like this.

Here is the catch.
I have stored data/state in a variable called initialValue

Both data and state are the same things. I heard state term when I was learning the React library where we store local data/state in class and function. Nothing fancy. Don't get confused.

I will use state to point the data we store in our index.js file.

Now back to the point, remember this thing that I have stored state in initialValue variable. But what if I want to share this initialValue state in some other file. Either I have to export it or I have to make it global.
Shoot me but I will not use or recommend for global use. Global has its own consequences. For example, what if the initial counter value should be 0 and since it is global, someone changes it to some other value which is wrong.

So you have to export it but then exporting it to thousands file and then managing the same value in all files is troublesome (causing difficulty).

So we came back again to use the global variable.

Let see the advantage and disadvantage of using a global variable in our application.

Advantage:

It can be easily accessed in all the files.
The same value will be there throughout the application. So if we change the value in file1 then the file2 will get the updated value.

Disadvantage:

Since global variables are easily accessible in all files, there are chances that if someone tries to change the local variable that have the same name as a global variable then it will show the change effect in all the places. This small mistake can cause a lot of problems in the entire application. For example, if initialValue variable is globally declared and someone mistakenly changes initialValue's value from number to string then it will show the wrong value in the all place where it is being used.
There is no mechanism of how to update or restrict the scope of global value.

So in the end, we came to the conclusion that managing the state with global scope is fine if we can put some restrictions on its update/access.
If we somehow do that we can use the global variable. Don't shoot me, I'm in the mood to use global variables.

Now you can see that managing state in our small application is challenging if its codebase increases with time.

Here comes Redux to the rescue.

In simple terms, Redux is a state management 3rd party javascript library that helps you to manage data for your large application in more efficient and elegant ways.

The concept behind redux is to have one very very big global Javascript Object that will manage the data for our whole application.

Now you know what is Redux and Why you should use it?

Some of you may have doubts that if I can write my own logic to handle global JavaScript Object then I did not need redux. I agree with you but here is the point, now you have 2 challenges:- manage application data and manage/modify the logic of handling global JS object time to time and then test it for thousands of scenarios.
Obviously, No one wants to take this much of headache. It is better to let redux handle state management for your application and we just focus on getting the right data to our application.

How Redux handles and manipulates this big data store will be answered in the next post (Part 2).

Who am I?

What I do in Ajio?

I mostly work on implementing new features in AJIO. Apart from that, I work on performance optimization, code refracting and try to automate every possible manual work which I and my team are doing every day. I follow the DRY principle both in my code and life.

Guys give thumbs up if you like it, share it, and leave a comment down below if you like it or not. Share your valuable feedback to improve this blog.

DEV Community: AnshulJS

Hoisting in JS. (Part 1 - variable Hoisting)

What is Hoisting?

What do you mean by variable declaration?

How does the JS engine know that this var x is a variable declaration?

Where should I declare a variable? I mean physical location in your code. That is either before or after using a variable?

Where is hoisting in all of this?

How variable ** x ** get undefined as the default value?

Explanation:-

Quiz

Summary

input type V/S button type: Part 1

1. input type button V/S button type button

type="button"

Conclusion

Who am I?

What I do in Ajio?

Redux with Vanilla JS: Interview Preparation (Part 1)

Introduction

Prerequisite

Let's start.

What is redux?

index.html

index.js

Advantage:

Disadvantage:

Who am I?

What I do in Ajio?

How does the JS engine know that this `var x` is a variable declaration?

How variable x get `undefined` as the default value?