DEV Community: Debarshi Bhattacharjee

JavaScript Basics-Closures

Debarshi Bhattacharjee — Sun, 16 May 2021 09:16:45 +0000

In the previous post, we learnt about of JavaScript Basics- Scopes & Hoisting.

We saw how variables and functions in local/function scope and block scope get restricted within that scope (they cannot be accessed outside the scope).

In this post, we'll learn how the opposite is true, how we can have access to all variables and functions present in the parent scope, from the child scope.

Some basics first

Lexical Scope in JS:

Lexical scope is the ability of a child function where it has to access all variables present in its parent's scope. The child function is said to be lexically bound to the scope of the parent function.

Example :

//Global Scope
var message="Hello JavaScript!"; // Can be accessed anywhere in 
                                    the program

function foo(){  // Function scope
  // Within the scope of foo

  var greet = "Hello World!";
  let number = 45;

  function baz(){ // Another Function Scope, lexically bound to 
                     the scope of foo and has access to all 
                     variables present in the scope of foo.


   console.log(greet); // Prints 'Hello World!'

   console.log(number); // Prints '45'

  }

baz(); // Called baz within the scope of foo

}

In the above example, the child function baz declared within the scope of parent function foo has access to all the variables declared in foo's scope. This was possible as baz was lexically bound to the scope of foo.

Closures

A closure is a feature in JavaScript in which a child function has access to the parent function’s scope even when the function is executed outside its lexical scope.

According to MDN:

A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created.

Any function that forms a closure has access to three scopes:

Its own scope — variables defined between its curly brackets
Parent scope- variables and function defined in parent
function.
Global scope - global variables and functions

Example :

function outer(){
let count=0; // Declared in outer scope

   function increment(){ 
     count++;
     return count; // accessing count from parent scope 
   }
 return increment; // returning the increment method;
}

Here we have two functions:

A parent function called outer which has a
variable count assigned to 0, and returns an
inner function increment.
A child function increment which is lexically scoped and
forms a closure.
As the child function forms a closure it has
access to all three scopes - its own scope, parent
scope and the global scope.

We now invoke the parent function outer and store the returned function to variable x:

// Calling in global scope

const x = outer(); // assigned the function increment to 
                          variable x

console.log(x); // Prints the returned function increment

console.log(x()); // invoked the function increment for the first                 
                  // Prints 1;

console.log(x()); // invoked the function increment second time, 
                  // Prints 2;

Here's what's happens now :

We invoked the function outer which initialized the variable
count to 0 and assigned the returned function increment
to variable x.
Logging x to console, prints the body of returned function
increment.
We now invoke and log x for the first time, it increases the
value of count form parent scope by 1 and returns it.
Invoking x for the second time, increases the previous value
of count again by 1 and returns it.

In the above example, we saw that even though the child function increment was executed outside its parent's scope, it was able to remember the value of the variable count and increased its previous value exactly by 1 one each call. This was possible because the function increment had formed a closure.

Conclusion:

Closures are one of those tricky concepts in JavaScript that are difficult to grasp at first. But once you understand them, you realize that things could not have been any other way.

Resources

MDN

JavaScript Basics- Scopes & Hoisting

Debarshi Bhattacharjee — Mon, 12 Apr 2021 09:04:57 +0000

If you're a JS beginner, you must have heard these words.

Let's get in depth to understand more about these concepts in JS.

What is a Scope in JS?

A scope in JS is a context in which values and expressions are visible or can be referenced.
In simple words, Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime.

Types of scopes in JS:

JavaScript has 3 types of scopes :

Global Scope : Any variable, function, expression that is present globally or not declared inside any other function belongs to the global scope. Variables, functions that declared in global scope can accessed from anywhere in the program.

var foo=23; // declared in the global scope

function greet(){
console.log(foo);
} 

greet();// Prints '23'
console.log(foo)l //Prints '23'

Local or Function Scope : Variables and functions that are enclosed in some other function become part of that function's local or function Scope. In other words, a local scope or function scope is associated with a function, when we declare variables and functions inside another function, they become part of the local/function scope and are restricted to that scope. Variables and function declared in function/local scope are accessible within that scope.

//Declared in Global Scope
var foo=23;

function bar(){ 
// Function or Local Scope
   var message="Hello JavaScript"; // inside the local/function 
                                   scope of bar 
   console.log(message); // Prints 'Hello JavaScript' 
   console.log(foo); // Prints '23'
}

//Global Scope
console.log(message); // Uncaught ReferenceError: message is not 
                         defined

Block Scope : Variables declared with let and const can block scoped. That is, they can be enclosed within a pair of curly braces(blocks). Any variable/function declared with let or const, inside a pair of curly braces are only available within the scope of the braces. It stands true for only for variables that declared with let and const and not with var.

{ //Block scope
  let message = 'Hello JavaScript'; // declared with let
  var name = 'Debarshi'; // declared with var
  console.log(message); // Prints 'Hello JavaScript'
}

//Global scope
console.log(name);// prints 'Debarshi'
console.log(message); // Uncaught ReferenceError: message is not 
                         defined

Hoisting in JS:

In JavaScript, hoisting is a concept in which a function or a variable can be used before declaration.

Hoisting with variables and functions declared with var keyword.

Variables declared with var keyword gets hoisted to the top of the scope. If accessed before initialization they result undefined.

console.log(baz); // Prints 'undefined'

console.log(greet); // Prints 'undefined

greet(); // Prints 'TypeError: greet is not a function'

var baz="Hello World!";

//anonymous function stored in a variable
var greet=function(){
    console.log("Hello JavaScript!");
}

greet(); // Prints 'Hello from JavaScript!'

Hoisting with variables and functions declared/assigned with let and const keyword

Although variables and functions declared/assigned to let and const are also hoisted, but they cannot be accessed until they have been initialized.

console.log(a); // Prints 'ReferenceError: Cannot access 'a' 
                    before initialization'
console.log(name); // Prints 'ReferenceError: Cannot access 'm' 
                       before initialization'

doSomething(); // Prints 'ReferenceError: Cannot access 'm' before 
                   initialization' 

let a = 45; // Initialized
const name="Debarshi"; // Initialized

const doSomething = function (){
   console.log("Hello World!")
}

console.log(a) // Prints '45'

console.log(name) // Prints 'Debarshi'

doSomething(); // Prints 'Hello World!'

Hoisting with functions:

Functions declared with function keyword:
Functions that are declared with the function keyword
are also hoisted and can accessed from the top of the scope.
```
   foo(); // Prints 'Hello from foo!'

   function foo(){
      console.log("Hello from foo!");
    } 
```

Anonymous functions, functions expression:

As anonymous functions and function expressions are
assigned/stored to a variable, they behave same as
that of the variable depending on the variable type they
are assigned to.

   baz(); // TypeError: baz is not a function
   foo();  // Uncaught ReferenceError: Cannot access 'foo' 
              before initialization

   var baz=function(){ // assigned to var
   console.log("Hello from Baz");
   }

  let foo=()=>{  assigned to let
   console.log("Hello from Foo");
  }

  baz(); // Prints 'Hello from Baz'
  foo(); // Prints 'Hello from Foo'

Temporal Dead Zone in JS:

let and const variables cannot be read/written until they
have been fully initialized, which happens when they are
declared (if no initial value is specified on declaration,
the variable is initialized with a value of undefined).
Accessing the variable before the initialization results in
a ReferenceError.

  { // TDZ starts at beginning of scope

  console.log(bar); // undefined

  console.log(foo); // ReferenceError

  var bar = 1;

  let foo = 2; // End of TDZ (for foo)

 }

References:

MDN

Functions in JavaScript

Debarshi Bhattacharjee — Fri, 26 Mar 2021 12:02:39 +0000

Functions are one of the fundamental building blocks of any programming language. Functions are block of code enclosed in some brackets that perform a given task. To use a function, we must define it somewhere in the scope from which we can call/invoke it.

Let's start by declaring a function:

function hello(){
console.log("Hello World");  
}

We just declared a function called hello, in order to execute it, we need to call it.

What do you I mean by call the function?

In all programming languages, whenever you need to execute a function, you have to call it. No matter how many functions you have in your code, it won't be executed until you have called the function.

How to call a function?

It's simple, just add your function name followed by an opening and closing brackets

hello(); //Hello World

Assigning functions to variables:

In JavaScript, you can assign/store a function in a variable.

var someVariable = function(){
console.log("My Function")
}

Notice something, I didn't name the function.
The function is an example of unnamed/anonymous function.

The above function can also be written as:

var justAnotherVariable= function myAnotherFunction(){
console.log("My another named Function");
}

To execute these functions you have to call them.

Let's call myFunction

someVariable(); //My function

Let's call the second function.
But wait how do we call it?
The function has been assigned to a variable.
Should we use the variable name or function name?

In JavaScript, whenever you assign a function to a variable, no matter if it is a named function or anonymous(unnamed) function, to call it, you have to use the variable name followed by an opening and closing brackets.

In the example above someNamed function has been stored in the variable justAnotherVariable, in order to call it, we have to use the variable name followed by parentheses.

justAnotherVariable()  // My another named function

Function Declaration & Function Expression

Functions are declared by using the function keyword.
Every function declaration must begin with the function keyword.

Let's declare a function foo.

function foo() {
console.log("Hello from foo");
}

A declared function gets executed only when it is called.

In order to execute foo, we have to call it.

foo(); // Hello from foo

In JavaScript, functions can also be defined using an expression and function expressions can be stored/assigned to a variable.

Let's declare a variable baz and store a function to it.

var baz = function () {
console.log("Hello from baz")
}

Once a function expression has been assigned to variable, in order to call the function expression we have to use the variable.

baz(); // Hello from baz

The main difference between a function expression and a function declaration is the function name, which can be omitted in function expressions to create anonymous functions.

Argument & Parameters

When we declare a function, we can receive some addition information/values to the function. These additional information will be passed by us when we call the function.

These values when passed while calling the function are called arguments whereas in the function declaration they are called parameters.

Example:

We receive two parameters a and b while declaring the function bar and pass two arguments 5 and 15 when calling it.

function bar(a, b){
return a+b;
}

var add = bar(5, 15); 
console.log(add); //15

First Class Function, High Order Function and Callback

JavaScript has a concept of First class function.

A programming language is said to have First-class functions when functions in that language are treated like any other variable. In such a language, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable.

We have already seen the example of a function being assigned to a variable.

Let's see an example of how a function can be passed as argument to another function and returned from a function.

Example 1:
Function passed to a function

function greet(){
console.log("Hello from greet")
}  

function doSomething(callback){
callback() // calling the passed function
}

doSomething() // Hello from greet

Calling the function doSomething  calls the callback function which is greet in our case

Example 2:

Function returned from a function

function add(num1,num2){
console.log("I'm number 1: "+num1);
console.log("I'm number 2: "+num2);
} 

function adder(){
return add;
}


var x = adder() 
x(10,20) //I'm number 1: 10
         //I'm number 2: 20

In the above example, we called the function adder and stored the returned function add to variable x. Since, x is now storing a function, we call it and pass arguments 10 and 20 respectively.

Callback

A Callback is just an identifier for a function that is passed as argument to another function. In the above examples, the function greet is a callback.

High Order Function

Any function that takes a function as an argument or returns a function is called a high order function. In the examples, both the functions doSomething and adder are high order functions.

Conclusion:

Functions are the building blocks in JavaScript. Functions can perform complex operation, take input values, process and return values. In JavaScript, functions can also return a function from a function, store a function to a variable, pass a function to another function.

If you liked the post then do share your feedback.
I'd love to hear from you. Connect with me @ Twitter

References:

MDN