Javascript — Function Scope, Block Scope?

Photo by Mark Seletcky on Unsplash

Functions As Scopes

Javascript has function-based scope. That is, each function you declare creates a scope for itself. There are also other ways to create scope in Javascript, but we will mention that later.

Inside a function, it does not matter where in the scope of function a declarations appears, the variable or function belongs to the containing scope function, regardless.

In the screenshot right below, each color shows each function’s scope.

Kyle Simpson’s book — You don’t know JS, Scope&Closures

Function scope encourages the idea that all variables belong to the function, and can bu used and reused throughout the entirety of the function (and indeed, accessible even to nested scopes, if there are no shadow identifier declarations inside of those nested scopes). Variables defined inside a function are not accessible from outside the function. This gives us a chance to hide our code. Sometimes hiding a code block gives us great power. You might need private variables and functions to manage your code.

Hiding the Code

When you take your code and wrap it with a function, you create a scope for those variables and function inside the wrapping function. This makes that part of your code not accessible , hidden, from outside of the wrapping function. Because, as you know, a function can reach the outer scope but the variables inside of a function cannot be reach from outside of the function.

Blocks As Scopes

Many languages other than Javascript support block scope. Block scoping means that, declaring variables as close as possible, as local as possible, to where they will be used (for blocks, if blocks might be good example for this).

In a simple for-loop, we always want our variable to be unique to the for-loop:

for (var i=0; i<10; i++) {
	console.log( i );
}

In the code-snippet right above, variable i directly inside the for-loop head, because we only want to use this variable inside of this for-loop block. But that is not how it works in Javascript, when you thing about the other languages, this might be true, but in Javascript, we do not have block scope (actually we have with ES6 and try/catch blocks, but we will discuss it later), but for now we should know that JavaScript has no facility for block scope. It does not work in this example because, variables declared with var is always refer to the enclosing scope, so variable i will be available inside of the enclosing function.

Ways to use Block Scope in Javascript

try/catch: In Javascript since ES3, the catch in try/catch block, catch is block-scoped.

try {
	undefined(); // illegal operation to force an exception!
}
catch (err) {
	console.log( err ); // works!
}

console.log( err ); // ReferenceError: `err` not found

As you can see in the example — You don’t know JS, Kyle Simpson — err is not defined outside of the catch block.

let: With the ES6 changes, it introduces a new keyword let. This is the another way to declare a variable. This keyword attaches the variable declaration to the scope of whatever block it’s contained in. Declarations made with let will not hoist to the entire scope of the block they appear in. Such declarations will not observably exist in the block until the declaration statement.

Hoisting: Declarations being taken as existing for the entire scope in which they occur. E.g, function declarations, variables declarations.

References

• You don’t know JS, Scopes&Closures by Kyle Simpson.