DEV Community

Cover image for Day 1 - What is hoisting and how to prevent it in javascript?
C K Sanjay Babu
C K Sanjay Babu

Posted on • Originally published at blog.sanjaybabu.dev

Day 1 - What is hoisting and how to prevent it in javascript?

What is hoisting?

The default behavior of the javascript interpreter is to move variable and function declarations to the top. This behavior is called Hoisting.

Take a look at the below code snippet!

console.log(x);
console.log(announce());
var x = 100;
function announce() {
  console.log('Hello World');
}

// Output :
// undefined
// Hello World
Enter fullscreen mode Exit fullscreen mode

Note that, we are calling the variable 'x' and function 'announce' even before we are declaring it. In most languages, this would result in an error!
But it works in javascript due to hoisting!
Now coming to the output itself, we see that the value of the variable is not printed but the function is executed properly. This is because, for variables, only the declarations are hoisted not the initialization. So we don't get an error while calling the variable before its declaration statement. But at the same time, we won't get the initialized value either.

As you can see, clearly hoisting makes our code unpredictable because, even if a variable is assigned a value only once, its value is not the same throughout. Hence many developers don't prefer hoisting.

How to prevent hoisting?

Javascript interpreter will hoist lines starting with


  and

 ```function```


We can prevent hoisting by using

 ```let```

 or

 ```const```

 keywords instead like below.


Enter fullscreen mode Exit fullscreen mode

let x = 100;
let announce=function() {
console.log('Hello World');
}



 Hoisting will not take place for the above code since they don't start with

 ```var```

  or

 ```function```

. So if we try to access the variable 'x' or the function 'announce' before the declaration, we will get a

 ```not defined```

 error.






Enter fullscreen mode Exit fullscreen mode

Top comments (0)