Scope of JavaScript variables

1 - JavaScript 5 / ES5 scopes, with the var keyword

JavaScript 5 / ES5 has the var keyword for declaring variables.

JavaScript 5 / ES5 has two scopes: 1) a global scope for declaring global variables, and 2) a function scope for declaring variables that are local to a function.

Furthermore, like in most programming languages, inside a function, a local variable masks a global variable that has the same name.

See examples below.

1.1 - Global scope / global variable

Global variables are variables declared outside of functions. They can be used anywhere in the code.

Here is an example:

1.2 - Local scope / local variable (also called function scope)

Variables declared with the keyword var in a function, are said to be "local to the function". They "mask" any global variable that may have the same name.

When a variable is declared in a function, we also call it simply "a local variable", as opposed to "a global variable". In JavaScript 5 (and this is not common in programming languages), local variables are local to the function. They can be used anywhere inside the function.

Most programming languages have local variables that are limited to the block of instructions between '{' and '}' that contains the variable declaration. We call these variables "block variables". This is the case with variables declared with the let keyword  introduced by JavaScript 6 / ES6. See examples at the end of this section.

Example of a local variable declared in a function, that is NOT local to the block, but to the whole function:

Here is another example that shows the differences between global and local variables, and highlights the "masking" of global variables by local variables when they share the same name.

1.3 Never declare a variable without the keyword var!

JavaScript is sometimes an overly permissive language. We can make stupid errors that turn out to be very hard to detect. One such error occurs when we forgot to use the var keyword while declaring a local variable.

In JavaScript 5 / ES5, a variable declared in a function without the var keyword, makes it a global variable.

GOOD PRACTICE: in JavaScript 5 / ES5, always use the keyword var when declaring a global or a local variable.

Better: use the keyword let if you target browsers that support JavaScript 6 or above.

Here is an example that shows what happens when you forget to use var or let while declaring a local variable:

2 - JavaScript 6 / ES6 scopes, with the let keyword

JavaScript 6 / ES6 has the let keyword for declaring variables, and the const keyword for declaring constants.

JavaScript 6 / ES6 has two scopes: 1) a global scope for declaring global variables, and 2) a block scope for declaring variables between { and }. This is similar to what we find in many other programming languages such as Java, C# etc.

Furthermore, like in most programming languages, inside a block, a local variable masks other variables located in higher scopes (global or in another block that contains the current block).

Example of a local variable declared with the let keyword. Its scope is the block:

3 - Recommended way to declare variables: var or let?

Well, all modern browsers support the let and const keywords, however, if you target old browsers such as:

• Internet explorer 10 and below (no support)
• Firefox 43 and below (no support)
• Safari 9 and below (no support)
• Opera Mini 8 and below (no support)
• Android browser 4 and below (no support)
• Opera 36 and below (partial support)
• Chrome 51 and below (partial support)

... it's better to use the var keyword, or you can use some advanced tools called "transpilers" that will translate your JavaScript 6 / ES6 code into pure JavaScript 5 code (like Traceur or Babel). 

Current support for let/const(September 2017):