Skip to main content

Hoisting In JavaScript Explained Simply

 JavaScript is a weird language. We are all aware of this. But one of the biggest peculiarities is the concept of hoisting. Because hoisting is centered around variable declaration, it confuses beginners to no end. In this blog, I am going to give practical, real-world explanations of hoisting!

Hoisting Introduction

Hoisting is a default behavior which variables and function are moved to the top of the scope before JS executes. Even more simply put, it allows you to use variables and functions before declaring them.

x = 1;
console.log(x); //This is valid and will execute.
var x;

Essentially, JavaScript is taking “var x;” variable declaration and placing it above x = 1.

The biggest caveat to hoisting is that it only works with declaration BUT not initialization of variables.

console.log(x) //This will be undefined because it is being initialized.

var x = 1;

Hoisting Functions in Javascript

JavaScript engine moves function declarations to the top similar to variables.

console.log(sayHello()); //console logs "hello"

function sayHello(value1, value2) {
   return "hello";
}

Very similar to variable initializations, the JavaScript engine DOES NOT move a function expression;

sayHello(); // JS return "sayHello not defined"

var hello = function sayHello() {
     console.log("hello");
}

Hoisting Variables Before Functions

The last hoisting concept to understand is that functions are declared before variable declarations.

console.log(sayHello); // Javascript will return [function] or the actual function
}

var sayHello;

function sayHello() {
  console.log("say hello");
}

In the example above, the JavaScript compiler will return the actual function because it is moves before the variables.

Comments

Post a Comment

Popular posts from this blog

Spring Data JPA One-To-Many Explained Simply

  One-to-many relationships are used when a single entity is associated with many other entities. For example, a  Blog  can have many associated  Posts , BUT each  Post  is only associated with one  Blog . This simply means you map child entities ( Posts ) as a collection in the parent object ( Blogs ). Spring Data JPA then provides the @OneToMany annotation for this case. @OneToMany is the parent-side of the relationship. We call this a unidirectional @OneToMany association. When the child-side manages a relationship, we have a unidirectional @ManyToOne association. In this association, the child entity ( Post ) has an object reference to its parent ( Blog ). This child/parent relationship is created by the use of mapping  child  foreign keys mapping to the parent. In order to get the most fully functional mapping, it is best to use a unidirectional many-to-one association, JPA Unidirectional One To Many Example First, let’s create a model f...
Post a Comment
Read more

Spring Data JPA Many-To-Many Explained Simply

  At a certain point in your Java career, it is inevitable to arrive at a point where you have models that are related to each other but cannot be solved with foreign keys. A good example of a many-to-many relationships is the relationship between rice and sauces. I love ALL types of different rice with different types of sauces. Sometimes I like Jasmine rice with spicy curry, while other times I like sticky rice with soy sauce. In a pinch, I’ve even ate Jasmine rice with soy sauce! *crowd gasps* Overall, many-to-many is a relationship that has infinite amounts of different combinations. Try to apply the rice analogy to a  one-to-many relationship  and it will not work. Many-To-Many Relationships To maintain a many-to-many relationship between two tables in a database, the only way is to have a third table which has a reference to both sides of the table. This table is called a “join” table and each entry in this table will connect the source table and target table. Many-...
Post a Comment
Read more