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

Higher Order Functions in JavaScript Explained Simply

  What is a higher order function? In JavaScript, a higher-order function is a function that  takes one or more functions as arguments,  or returns a function as output. These functions are a powerful feature of the language that allow you to write concise and expressive code. The best way to learn higher order functions (and likely the most “real-world”) is to look at “map()” and “filter()”. Both take functions as arguments where the function is applied to each element in an array. Map For example, consider the  map  function, which is used to apply a function to each element of an array and return a new array containing the results. The  map   function is a higher-order function because it takes a function as its argumen t, in this case the function to apply to each element of the array. const numbers = [1, 2, 3, 4, 5]; const squares = numbers.map(x => x * x); Filter Another common higher-order function is  filter , which is used to select el...
Post a Comment
Read more

Basic CRUD Array Operations in JavaScript

  Sometimes it pays just to stick to the basics. Here are CRUD operations for a basic array: 1. Create an element to the end of an array let clubs = ['baseball','running','computer club']; clubs.push('tennis'); console.log(clubs); 2. Delete an element from the end of an array let clubs = ['baseball','running','computer club']; const lastElement = seas.pop(); console.log(lastElement); 3. Reading an index from an element in an array let clubs = ['baseball','running','computer club']; let index = clubs.indexOf("running"); console.log(index); 4. Update an index from an element in an array let clubs = ['baseball','running','computer club']; clubs.splice(1, 0, 'tennis'); console.log(clubs);
Post a Comment
Read more

Immutability in JavaScript

  Immutability is a popular concept not just in JavaScript, but most programming languages in general. The reason behind this of course is functional programming which gives software developers a brand new paradigm to utilize when coding. Let’s dive into the details of mutability and immutability. What is Mutability? A mutable value is one that can be changed without creating an entirely new value.   In JavaScript, objects and arrays are mutable by default, but primitive values are not.  Once a primitive value is created, it cannot be changed, although the variable that holds it may be reassigned. There is nothing wrong with mutability. Take a look at the code below: const dog = { name: 'turtle', age: 10 } // Make a copy of dog object const newDog = dog; // Changing the age of the new dog newDog.age = 12; console.log(newDog === dog); // true As you can see, we’re copying the object to another object and changing the dogs age. The problem is that the change happe...
Post a Comment
Read more