JavaScript Introduction | Functions | Variable Scope

Tags:

Variable Scope

In JavaScript, objects and functions are all variables. The scope of a variable means the set of variables, objects, and functions that the variable can access.

In JavaScript, variables are divided by scope as follows.

  1. Local variable
  2. Global variable

Local Variable

A local variable is a variable declared inside a function.
Such a local variable is valid only inside the function where it is declared, and it disappears from memory when the function ends.
Function parameters also behave like local variables defined inside the function.

function localNum() {
    var num = 10; // assigns number 10 to local variable num.
    document.write("Inside the function, the type of variable num is " + typeof num + ".<br>"); // number
}
localNum();       // calls function localNum().
document.write("After the function call ends, the type of variable num is " + typeof num + "."); // undefined

JavaScript throws an error if you try to use or access an undeclared variable.
However, the result of the typeof operator for an undeclared variable returns undefined.

Global Variable

A global variable is a variable declared outside a function.
Such a global variable can be accessed from any area of a program, and it disappears from memory only when the web page is closed.

var num = 10; // declares global variable num.
function globalNum() {
    document.write("Inside the function, the value of variable num is " + num + ".<br>"); // 10
    num = 20; // changes the value of global variable num inside the function.
}
globalNum();  // calls function globalNum().
document.write("After the function call ends, the value of variable num is " + num + "."); // 20

As in the example above, a global variable can be accessed and changed both outside and inside a function.

When declaring a local variable in JavaScript, you must declare it with the var keyword.
If you declare a variable inside a function without using the var keyword, that variable is declared as a global variable, not a local variable.

function globalNum() {
    num = 10; // declares variable num without using the var keyword.
    document.write("Inside the function, the value of variable num is " + num + ".<br>"); // 10
}
globalNum();  // calls function globalNum().
document.write("After the function call ends, the value of variable num is " + num + "."); // 10

Also, if you declare a local variable with the same name as a global variable, only the local variable with that name can be called in that block.

var num = 10; // declares global variable num.
function globalNum() {
    var num = 20; // declares a local variable num with the same name.
    document.write("Inside the function, the value of variable num is " + num + ".<br>"); // 20
}
globalNum(); // calls function globalNum().
document.write("After the function call ends, the value of variable num is " + num + "."); // 10

In a case like the example above, if you want to call the global variable in that block, explicitly state that the global variable is a property of the window object.

var num = 10; // declares global variable num.
function globalNum() {
    var num = 20; // declares a local variable num with the same name.
    document.write("Inside the function, the value of local variable num is " + num + ".<br>");
    document.write("Inside the function, the value of global variable num is " + window.num + ".<br>");
}
globalNum(); // calls function globalNum().