JavaScript: Scopes

Some of the most fundamental concepts of JavaScript are hoisting, self-executing function blocks, closures, and scopes. They helps us understand how JavaScript relate variables and methods given a block of code. Learning how they work helps us write bug-free, controlled coding. I never been to an interview without a question from these concepts.

In the following series of posts, we will look at them in detail starting with this post about scopes.  

Scopes 🔭

Scopes are, availability of variables or methods to your block of code. Your block of code could be an if condition, for loop, function or simply global. Let's get to coding,

console.log(this); // prints window object

when you try typing the above code on your browser's developer console, it will print a big Window object, or on Node.js it will print a big global object. This is called the Global Scope. You can write your own variable on the global scope, which will obviously be available on all your if conditions, for loops and functions no matter how deep they go. It also exposes your variable to all third party libraries if you include them in the global scope.

var foo = "hello world";
console.log(window.foo); // prints hello world

The second type of scope is called Local Scope. Local scopes are variables available within your function. Let's have a look,

var foo = "Hello";

function america() {
	var bar = "Howdy";
	console.log(foo); // prints Hello
	console.log(bar); // prints Howdy
}

console.log(bar); // *Error: bar is not defined*
console.log(foo); // Prints Hello

america(); // Function declared on global scope, so the function is available globally

As you can see the variable bar is only available within america() method and not  globally.

The last type of scope is called Block Scope. Block scopes are only available on ES6, so you can use it on the latest Node.js but not widely supported by all browsers.

The secret recipe to write block scope variables in JavaScript is by declaring a variable with let keyword instead of var. Let's take our america() method and implement a block scope.

function america() {
	var bar = "Howdy";
 	if (bar === "Howdy") {
		let baz = "YeeHaw!"; // Notice let keyword
        
		console.log(baz); // prints YeeHaw!
		console.log(bar); // prints 
	}
    
	console.log(baz); // *Error: baz is not defined*
}
america();

Notice how variable baz declared with let is only available within the parentheses {} of  if condition. So variables declared with let encapsulates itself to whichever parentheses {} based code block. It could be for, while, switch, function, etc.

If you declare variable baz with keyword var, something special happens with JavaScript. The output on the last console.log will be undefined instead of not defined error. This special case is called variable "Hoisting". Which we can cover on another post.

These are three types of scopes in JavaScript. Understanding them will enable you to write bug-free code, control what to expose where, and generally become a better developer.