Function & Block

In JavaScript the most commonly used scope is function. With each function we create a scope for itself.

All variable belong to function and can be used throughout the entirety of function. But, if don’t take careful precaution it can also lead to unexpected pitfalls.

Hiding in plain scope :-

Software design principle Principle of least privilege states that in design of software we should expose only what is minimally necessary and hide everything else.

So instead of writing

It’s better to write

Another benefit of abstraction is collision avoidance. for example

will result in infinite loop. So instead of writing such code we can write

Anonymous vs Named function :-

Let’s take example of setTimeout. This is most common anonymous function we come across. Using anonymous function has couple of advantages. This is quick and easy to type. But there are drawbacks which come with anonymous function. Some of them are :-

1. It has no useful name to display in stackTrace which makes debugging tough.
2. To refer anonymous function we have to use deprecated arguments.callee reference.
3. A descriptive name helps self documenting the code in question.

So the best practise is to always name function expression. We can write the same upper anonymous function like

Immediately invoking function expression :-

while this works, there are certain problems/points it introduces :-

1. To invoke a function we have to use identifier name fun which pollutes enclosing scope, global in this case.
2. We have to explicitly call the function to execute it.

To overcome these JS have a solution which is immediate invoked function expression (IIFE). It does not need identifier to be called. In this way, it doesn’t pollutes the enclosing scope and it does not need to called explicitly.

First pair of () makes the function an expression and second pair of () executes the function.

We can use IIFE to inverse the order of things where the function to execute is given second and parameter to pass to it.

This pattern is used in UMD (universal module definition) project.

Block as Scope :-

Function is most common unit of scope. Other units of scope are possible and use of other units make our code even more better, cleaner and maintainable.

Here comes the block into picture. Block scope is used to hide information in block instead of function.

Here our intent was to use i only within the context of for loop so we declared it inside the for loop instead of polluting the parent scope and to avoid unintended use variable in wrong places. That is what block scoping is all about. Declaring a variable as closer, as local as possible.

Let :- The let keyword attach the variable declaration to the scope of whatever block it’s contained in.

Let implicitly hijacks block scope for it’s variable declaration.

Creating explicit blocks for block scoping making it more obvious where variables are attached or not. Explicit code is preferred over implicit or subtle code.

here in line number 6 and 10 we added opening and closing braces as explicit block. Now it’ll be easier as whole block to move around this code later in refactoring.

Declaration made with let will not hoist to entire scope of block they appear in. Such declaration will not observably ‘exist’ in block until declaration statement.

Garbage collection :- Block scoping is useful to closure and and garbage collection to reclaim memory.

Consider :-

here there is no need of someReallyBigData after the process function but still it exists. ideally is should not be taking space in memory after execution of someReallyBigData function and it should have been vanished.

We can handle this problem using block scope and let variable.

let has block scope so as soon as we invoke the block in line number 8 and 13 someReallyBigData which is let variable will be destroyed and will not be present in memory from line number 14 or in line number 1–7. This is how let and block can be used to do garbage collection better.

Declaring explicit block for variable to locally bind it is powerful tool.

Const :-

const also creates a blocked scope variable but whose value is fixed (constant). Any attempts to change that value will result in error.