Javascript Variable Scope & Closures: A Primer

Home / Developer Tools / Javascript Variable Scope & Closures: A Primer
Javascript Variable Scope & Closures: A Primer

 

Javascript might seem like a pretty approachable programming language to most people, however certain concepts can prove quite tricky for beginners. One of the most commonly brought-up topics is that of variable scope and what closures are, so in this artile I will try to introduce these concepts in a beginner-friendly way.

Scope

When we talk about scope, we mean the visibility of one or more entities to certain parts of our code. For the purposes of this article, our entities are going to be limited to variables.

There are two types of scope in Javascript: global and local.

Global scope is pretty straightforward: Any variable defined outside any function or curly braces is part of the global scope and can be accessed from anywhere in the code.

Local scope is slightly more complicated. Any variable defined inside a function declaration or curly braces can only be accessed inside the function or block of code it was declared respectively.

Okay, this is basically all you need to know about variable scope. Let’s look at some simple examples:

// This variable is part of the global scope
var globalVariable = 10;

function someFunction(){
// globalVariable is accessible from someFunction,
// as it is part of the global scope
console.log(globalVariable);
}

someFunction(); // Prints 10

An example of how global scope works

// This is a function and it defines its own
// local scope. argumentVariable is part of the
// function's scope, as it is an argument in its
// definition.
function parentFunction(argumentVariable){
// functionVariable and anotherVariable are both
// part of parentFunction's local scope.
var functionVariable = 10;
let anotherVariable = 15;

// This is another function enclosed inside the
// first one. It also defines its own scope, but
// it has access to its parent function's scope.
function childFunction(){
// childVariable is part of childFunction's local
// scope.
var childVariable = 20;
// anotherVariable is not the same as the one
// defined in parentFunction's scope, due to it
// being defined using the keyword 'let'.
let anotherVariable = 25;
// childFunction has access to variables defined
// in parentFunction and childFunction, however
// it does contain its own definition of
// anotherVariable and has no access to parentFunction's
// anotherVariable.
console.log("Child function: ");
console.log(functionVariable);
console.log(childVariable);
console.log(anotherVariable);
}

// parentFunction does not have access to variables
// defined in childFunction, thus it cannot access
// childVariable and it can only see its definition
// of anotherVariable.
console.log("Parent function: ");
console.log(functionVariable);
console.log(anotherVariable);

childFunction();
}

parentFunction();

An extensive example of how function scope works

function someFunction(){
if (true){
// This variable is defined inside these
// curly braces, which means its part of the
// scope of this block and cannot be accessed
// by other parts of someFunction.
let blockVariable = 30;

// However, using the 'var' keyword this variable,
// while defined inside the same block, is part of
// the scope of the someFunction.
var functionVariable = 30;
// Inside the block, both variables are accessible.
console.log("Block scope: ");
console.log(blockVariable);
console.log(functionVariable);
}
// Outside the block, only the variable defined using
// the keyword 'var' is accessible.
console.log("Function scope: ");
try { console.log(blockVariable); }
catch (e) { console.log("The variable 'blockVariable' is not accessible!"); }
try { console.log(functionVariable); }
catch (e) { console.log("The variable 'functionVariable' is not accessible!"); }

}

someFunction();

An extensive example of how block scope works

Block scope and definitions using var and let might seem slightly confusing at first, but I recommend you read A guide to Javascript variable hoisting with let and const (3 min read) and carefully study MDN’s documentation of thelet keyword to clear up any remaining questions and doubts.

A guide to JavaScript variable hoisting with let and const
New JavaScript developers often have a hard time understanding the unique behaviour of variable/function hoisting.medium.freecodecamp.org

Closures

Closures are one of those things that might seem confusing at first, but really aren’t. A function defined inside another function is a closure. Closures are particularly useful when you want to access a variable defined inside a function’s scope from outside the function.

A practical use of closures could be defining a public set of functions that can get or set some private variables inside a function (which is a pretty common use-case in object-oriented programming). Here’s a pretty simple example of closures in action:

function user(username, password){
// Here we use closures to define public functions
// that can access private variables.
return {
getUsername() { return username; },
setUsername(newUsername) {username = newUsername; },
checkPassword(givenPassword) { return password == givenPassword; }
}
}

var myUser = user("Me", 1234);
console.log(myUser.getUsername()); // Me
myUser.setUsername("NotMe");
console.log(myUser.getUsername()); // NotMe
console.log(myUser.checkPassword(1000)); // false
console.log(myUser.checkPassword(1234)); // true

Using closures to define public getter/setter functions for private variables

Summing up

Scope refers to a variable’s accessibility. It can either be public (defined outside any functions and curly braces and accessible anywhere in the code) or local (defined inside a function or block and accessible only inside said function or block). Closures are functions defined inside other functions and can be used to access a function’s private variables from outside its own scope.

Source: https://hackernoon.com/javascript-variable-scope-closures-a-primer-ace00b362eae

Leave a Reply

Your email address will not be published.