Скачать или смотреть Understanding Why undefined is Output Instead of test in JavaScript Code

Discover the reasons behind the `undefined` output in the provided JavaScript snippet and learn how variable scoping works in functions.
---
This video is based on the question https://stackoverflow.com/q/72514496/ asked by the user 'Docu Care' ( https://stackoverflow.com/u/19152011/ ) and on the answer https://stackoverflow.com/a/72514604/ provided by the user 'Ian' ( https://stackoverflow.com/u/12709613/ ) 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: can anyone please tell me why given below 's snippet output is coming undefined?, was expecting test

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 Why undefined is Output Instead of test in JavaScript Code

JavaScript developers often encounter unexpected outputs while working with variable scoping. One common issue arises when local variables overshadow global ones. In this guide, we will explore why the following JavaScript code snippet outputs undefined instead of the expected test.

The Problem

The code in question is as follows:

[[See Video to Reveal this Text or Code Snippet]]

When you run this function, you might expect it to print test, since that's the value assigned to the global variable name. However, it prints undefined. Let's investigate the reason behind this behavior.

Understanding Variable Scope in JavaScript

Global vs. Local Variables

In JavaScript, variables can be declared in the global scope or the local scope (inside functions). When a variable is declared using the var keyword inside a function, it is limited to that function's scope.

Global Variable: Defined outside any function and accessible throughout the entire script.

Local Variable: Defined with var, let, or const inside a function. These variables are not accessible outside their function.

Hoisting

JavaScript has a feature called hoisting, where variable declarations are moved to the top of their containing function or script during the compilation phase. However, only the declaration is hoisted, not the initialization.

The Execution Flow

Here’s the step-by-step breakdown of what happens when the message function is called:

The message function starts executing.

The line console.log(name); attempts to access the variable name.

Since there is a local declaration var name within the function, JavaScript hoists this declaration to the top of the function. As a result, name is considered defined but not initialized.

When the console.log(name); line executes, it refers to this local variable, which is currently undefined.

The local variable name is then assigned the value "test 2" after the console.log, but that doesn't affect the previous log.

Therefore, the output is undefined instead of test.

Examples of Variable Scoping

To illustrate this concept further, let’s look at additional functions that emphasize variable scope:

[[See Video to Reveal this Text or Code Snippet]]

Key Takeaways

Local Variables Mask Global Variables: If you declare a local variable with the same name as a global variable, the local variable takes precedence within its scope.

Hoisting affects variables: Although declarations are hoisted, the values aren’t, leading to potential confusion if not understood properly.

Using Window Object: Global variables can be accessed via the window object, enabling you to retrieve the global variable even inside a local scope.

With a solid understanding of variable scope and hoisting in JavaScript, you can avoid common pitfalls and better predict the behavior of your code.

By understanding these concepts, you can more effectively debug your JavaScript programs and ensure the desired outputs.