JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Variable Scope

The scope of a variable is the region of your program in which it is defined.

JavaScript variables have only two scopes:

  • Local scope
  • Global scope

Scope determines the accessibility (visibility) of variables.

Local JavaScript Variables

Variables declared within a function have LOCAL scope that means they cannot be viewed or manipulated from outside of that function.

Run code

Local variables have Function scope, they can only be accessed from within the function.

Since local variables are only recognized inside their functions, variables with the same name can be used in different functions.

Local variables are created when a function starts, and deleted when the function is completed.

Global JavaScript Variables

Variables declared in a program outside of a function has GLOBAL scope that means they will be available to all script, whether that script is inside a function or outside.

Run code

Global variables can be accessed from anywhere in a JavaScript program.

In the example below, we will create a GLOBAL cityName variable. Within the function is a LOCAL variable with the same name.

Run code

By writing them to the document, we can see how the variable's value is different depending on the scope, and the original value is not changed.

Automatically Global

If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable.

This example will declare a global variable cityName, even if the value is assigned inside a function.

Run code

Do not create GLOBAL variables unless you intend to.

Your GLOBAL variables can overwrite window variables.

Any function, including the window object, can overwrite your GLOBAL variables.

Difference Between var, let, and const

JavaScript has three different keywords to declare a variable, which adds an extra layer of intricacy to the language.

The differences between the three are based on scope, hoisting, and reassignment.

Keyword Scope Hoisting Can Be Reassigned Can Be Redeclared
var Function scope Yes Yes Yes
let Block scope No Yes No
const Block scope No No No

JavaScript Block Scope

Variables declared with the var keyword can not have Block Scope.

Variables declared inside a block {} can be accessed from outside the block:

Variables declared with the let keyword can have Block Scope.

Variables declared inside a block {} can not be accessed from outside the block:

Declaring a variable with const is similar to let when it comes to Block Scope.

The value of a constant cannot change through reassignment, and it can't be redeclared.

The Lifetime of JavaScript Variables

The lifetime of a JavaScript variable starts when it is declared.

Local variables are deleted when the function is completed.

Global variables are deleted when you close the browser window, but remain available to new pages loaded into the same window.