JIYIK CN >

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. You may have gotten used to these issues because you can solve them after they occur. But if you understand how these traps happen and where they might first appear, you can avoid falling into them.

JavaScript is no longer just a simple toy used for page effects. Those who can survive in the JavaScript ecosystem are the ones who have a deep understanding of how JavaScript works. Below, we will discuss these potential traps through several questions, and we'll talk about why these traps occur and how we should address them.

Problem 1

var a = 'abc';
function foo()
{
     console.log(a);
     var a = 'xyz';
     console.log(a);
}
foo();

In the code above, what will the first console.log(a) print, and what will the second console.log(a) print?

If you say that the first console.log(a) prints 'abc', then you are mistaken. I can understand why this mistake occurs. I believe that the value of the second console.log(a) is 'xyz'. However, the second 'a' is not what we're concerned about; we care about why the first console.log(a) is not 'abc'. So, what is its value?

Let's first understand a concept — regardless of where a variable is declared, it will be hoisted to the top of the scope in which it is declared. This situation occurs in the code we wrote above.

Therefore, the execution of the code above is actually equivalent to the following code:

var a = 'abc';
function foo()
{
var a;
   console.log(a);
    a = 'xyz';
    console.log(a);
}
foo();

From this code, we can see that the value of the first console.log(a) is undefined or null.

I’m often puzzled by this. In other languages, if a variable is defined but not assigned a value, the printed result should be null, unless the variable hasn’t been defined at all, in which case it would be undefined.

But in JavaScript, this is quite magical and different from other languages. In strongly typed languages, when we define a variable, we also specify its data type. Therefore, if we define a variable as an object, the default value is null, but the actual value is 0.

In JavaScript, we don't know the variable's type until it is assigned a value. That's why we often use the keyword 'var' to define a variable — to tell the parser that this is a variable, but its type has not been determined yet. Therefore, any unassigned variable is undefined rather than null.

Problem 2

Now, let's modify the code from above slightly, as follows:

var a = 'abc';
function foo(){
        a = 'xyz';
}
foo();
console.log(a);

What will be printed for 'a' in this code?

This should be a fairly easy problem to solve. Please note that when we call the foo() function, the variable 'a' is not redefined in the function, but it is just assigned a new value. This means that 'a' is now 'xyz'. Since we declared 'a' and assigned it 'abc' at the beginning of the code, the 'a' in foo() refers to the 'a' defined earlier.

Problem 3

Now, let's make further improvements to the code, as follows:

function foo(){
        a = 'xyz';
}
foo();
console.log(a);

Note that in the code above, we haven't declared the variable 'a'; we simply assign 'xyz' to it inside the foo() function. So, what will the value of 'a' be when printed?

Some people might think that the code won’t execute, while others might think that 'a' will be undefined. Both of these views are incorrect. If neither of these cases is true, then the value of 'a' must be 'xyz', and indeed, this is the case. Why is this so, and where was 'a' defined? Since we didn't declare 'a', it must have been defined somewhere automatically, either inside the foo() function or somewhere else. The answer is that it was defined elsewhere, not inside the foo() function. This is because JavaScript works in such a way that if a variable is not declared in the scope in which it is used, it becomes a global variable. In the browser, this global variable is a property of the window object. Therefore, the value of 'a' will be 'xyz'.

Through these three code snippets, I want to highlight the importance of understanding variable behavior in JavaScript, which is a common issue we often encounter. As long as we have a clear understanding of how variables work, I believe we can avoid unnecessary errors in our work. After all, fixing errors takes time, which can result in greater efficiency in the long run.