Understanding Variable Hoisting in JavaScript with Add Function Examples

Explore the concept of `variable hoisting` in JavaScript through practical examples to better understand its impact on variable scope and closures. --- This video is based on the question https://stackoverflow.com/q/66487642/ asked by the user 'Alexander Nenartovich' ( https://stackoverflow.com/u/8586484/ ) and on the answer https://stackoverflow.com/a/66487800/ provided by the user 'Louay Al-osh' ( https://stackoverflow.com/u/8667766/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions. Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Variable Hoisting in Javascript List of Adders Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l... The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license. If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com. --- Understanding Variable Hoisting in JavaScript with Add Function Examples JavaScript can often make certain concepts confusing, especially for those new to the language. One of these concepts is variable hoisting. If you've ever encountered unexpected behavior in your JavaScript code, it might be due to how hoisting works. In this guide, we will explore an example of this phenomenon using a simple function that creates adders from a list of numbers. The Problem: Unexpected Output from Adders Consider the following block of code: [[See Video to Reveal this Text or Code Snippet]] When you run this code, you might expect to see the outputs 106, 103, and 105, which correspond to adding 100 to each number in the array. Instead, the output is 105 for each function. Why does this happen? The Core of the Issue: Variable Hoisting What Is Variable Hoisting? Hoisting is a behavior in JavaScript where variable declarations are moved to the top of their containing scope. In simpler terms, JavaScript handles variable declaration at the beginning of the function or global scope rather than where they appear in your code. Variables declared with var are hoisted to the top of the function or global context. Variables declared with let and const are also hoisted, but remain block-scoped, meaning they cannot be accessed outside the block they’re defined in until their declaration. Analyzing the Code In our example, notice that the variable n is declared with var, which means it gets hoisted to the function makeAdders, not just the for loop. The Effect of Hoisting Here's the sequence of events happening in the code: Hoisting of Variable n: The n variable is available to all functions in the makeAdders scope. So, when it is updated in the loop, all the inner functions (the adders) reference the same n. Closure Behavior: JavaScript functions create closures, meaning they have access to variables from their surrounding lexical context, even after the outer function has completed execution. By the time the for loop has finished executing, n holds the value of the last item in the list, which is 5. Final Output: Consequently, when you call each function in the adders array with 100, they all use the value of n, which is 5. Therefore, the output for each is 5 + 100, resulting in 105. The Solution: Switching to let If we change the var declarations to let, it will solve our problem: [[See Video to Reveal this Text or Code Snippet]] With let, each iteration of the loop creates a new scope where n is uniquely defined for each function created in that iteration. You will then see the expected results: Output: 106 for 6 103 for 3 105 for 5 Conclusion Understanding variable hoisting in JavaScript is vital for avoiding unexpected outputs and bugs in your code. By utilizing let instead of var, especially within loops, you can ensure that each closure retains a unique reference to its specific variable, leading to the desired outputs. Next time you encounter unexpected behavior in your JavaScript functions, consider revisiting the concept of hoisting. It could save you hours of debugging!