# Code Smell 213 - Hoisting

*You can prevent undefined*

> TL;DR: Declare your variables and look after the scope

# Problems

- Readability

- Least Surprise Principle violation

- Variable Shadowing 

# Solutions

1. Be explicit on declarations

2. Use ['const' declaration](https://maximilianocontieri.com/code-smell-116-variables-declared-with-var) when possible.

3. Declare variables at the beginning of the scope.

4. Use [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)

# Context

Hoisting allows variable declarations to be moved to the top of their containing scope during the compilation phase. 

Variables declared with var and function declarations are "hoisted" to the top of their respective scopes automatically in several languages.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/6d889d8015a9acd6b8de8382e7dd28fc)
```javascript
console.log(willBeDefinedLater); 
// Output: undefined (but no error)

var willBeDefinedLater = "Beatriz";
console.log(willBeDefinedLater); 
// Output: "Beatriz"
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/fe321a8c79ef2b6520e752ad091f20c3)
```javascript
const dante = "abandon hope all ye who enter here"; 
// Declaring a constant 'dante'
// with value "abandon hope all ye who enter here"

console.log(dante); 
// Output: "abandon hope all ye who enter here"

dante = "Divine Comedy"; // Error: Assignment to constant variable
```

# Detection

[X] Semi-Automatic 

We can perform mutation testing to check if changing the scope of the variables brings unexpected results. 

# Tags

- Mutability

# Conclusion

Hoisting is yet another magic tool some compilers provide to favor lazy programmers. 

But if it fights back in debugging time.

# Relations

%[https://maximilianocontieri.com/code-smell-116-variables-declared-with-var]

%[https://maximilianocontieri.com/code-smell-42-warningsstrict-mode-off]

# More Info

[Wikipedia](https://en.wiktionary.org/wiki/hoisting)

[Strict Mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)

# Disclaimer

Code Smells are my [opinion](https://maximilianocontieri.com/i-wrote-more-than-90-articles-on-2021-here-is-what-i-learned).

# Credits

Photo by [Ash from Modern Afflatus](https://unsplash.com/de/@modernafflatusphotography) on [Unsplash](https://unsplash.com/photos/iiRQxPCDQ_Y)  
  
* * *

> The best error message is the one that never shows up.

_Thomas Fuchs_ 
 
%[https://maximilianocontieri.com/software-engineering-great-quotes]

* * *

This article is part of the CodeSmell Series.

%[https://maximilianocontieri.com/how-to-find-the-stinky-parts-of-your-code]