Scoping in JavaScript

Introduction

In this article we will cover one of the most important concepts in JavaScript, that is, ‘scope’. Scope defines the availability of variables and introduces the idea of local and global variables. Understanding scope will allow you to reduce unexpected errors and more reusable code.

What is scope?

The current context of execution. Scope determines the visibility of variables. In JavaScript there are 3 types of scopes, namely:

1. Block scope
2. Function scope
3. Global scope

Block scope

Prior to ES6, we only had two types of scopes, function and local scope. ES6 introduced two new keywords let, and const. These two keywords provide block scoping in JavaScript. In block scoping, all variables declared inside a { } block cannot be accessed outside the block.

{
    const name = "John";
    let age = 20;
}
// 'name' and 'age' are not available here

This feature cannot be practiced using var

{
    var name = "John"
}
// 'name' can be accessed from here

Function scope

All variables declared inside the function, cannot be accessed outside that function. This means that the variable have local scope as they are local to that function

function example() {
    let name = "James";
}
// 'name' cannot be accessed from here

This allows us to declare a new variable with same name outside the function.

function example() {
    let name = "James";
}
let name = "Jack";

All function (local) variables are born when they are declared and deleted when the function is completed.

NOTE: Function arguments (parameters) act as local variables inside the function.

Global scope

Variables that are declared outside the function have global scope. That is, they are available anywhere in the JS program.

var age = 20;

function example() {
    console.log(20);  // 20
}

Any variable that is assigned a value without declaring it, is automatically a global variable. However, this is not possible while in ‘strict mode’.

function example() {
    name = "Jack";
}

console.log(name);

In a web browser, all global variables are deleted when you close the browser window or tab. With JavaScript, global scope is the JavaScript file itself. In HTML, a variable is said to have global scope when it is in the window object.

Global variables must be defined with a var keyword for it to be included in the window object.

var age = 20;
console.log(window.age);  // 20

let age = 45;
console.log(window.age);  // undefined

NOTE: It is advised not to create global variables as your global variable can overwrite your window variable and your local variables can overwrite your global variables. This can lead to a lot of confusion and inefficient code.

Wrapping up

Any large or small project must have variables to store and manipulate data. By understanding scoping you can reduce the stress of working with JavaScript to some extent and it can also help you in avoiding those small errors that sometimes eats your brain up!

Hope you liked the blog, thanks for reading!