Variable Scope in javascript

What is scope
Scope of a variable determines the areas where the variable will be accessible. Accessing a variable from a location which is outside its scope raises an error.
There are two types of scopes of variables in javascript.
Local: This scope is limited to inside the block in which a variable is declared.
Global: A global scoped variable is accessible from anywhere.

Local variable scope

A variable which is declared inside a code block is accessible or visible only inside that block. Examples of local scoped variables are

• A variable declared inside a loop.
• A variable declared inside a function.
• A variable declared within curly braces.

// here i and j are declared inside loop
for(let i = 0; i < 5; i++) {
  console.log(i);
let j = 10;
}

// name declared inside function
function print() {
   let name = 'codippa';
}

// color declared in curly braces
{
   let color = 'blue';
}

Trying to accessing a variable outside the block in which it is declared will raise an error as below.

Global variable scope
A variable that is in global scope can be accessed from any function defined anywhere on the page. When a variable is defined outside any block(either a code block enclosed within curly braces or a function), it is considered to be within global scope. Example,

// global variable
let color = 'blue';

// name declared inside function
function print() {
   console.log(color); // prints blue
}

It is not recommended to use too many global variables in an application since the value of global variables can be modified from anywhere.
For example, a function written in a different js file may also modify the value of a global variable defined in another js file.

Variables defined with var

All the above explanation of local and global scopes are applicable to variables and constants declared using let and const keywords respectively.
These are the two new keywords introduced in ECMAScript6(or ES6 or ES2015).
A variable declared with var keyword that was used traditionally to declare variables are in global scope. Thus, below code will not be an error.

// here i and j are declared inside loop
for(var i = 0; i < 5; i++) {
   var j = 10;
}

// name declared inside function
function print() {
   var name = 'codippa';
   console.log(j); // prints 10
}
console.log(j); // prints 10
console.log(i); // prints 5
console.log(name); // prints codippa

Note that all variables declared with var are accessible anywhere.

Variable preference

A local variable of same name is always preferred against a global variable of the same name. Example,

let language = 'javascript';

function printLanguage() {
   let language = 'java';
   console.log(language); // will print java
}

Same is the case with constants declared using const keyword.

Hope this article was useful in understanding the concept of local and global variables in javascript.