JavaScript Basics Series: Closure

This important concept explained with simple examples. JavaScript Basics is a series that explore some core concepts that every frontend software engineer should understand.

JavaScript Basics is a series that explore some core concepts that every frontend software engineer should understand. Those concepts are not only important for success in job interviews but also for a career as a developer.

In this section of our JavaScript Basics Series, we will explain a very important concept known as closure. What makes it particularly important that it is not only a core concept of JavaScript itself but also very likely to come up in JavaScript-related interviews. Without further ado let’s get into it! 😃

What is Closure?

One of the better definitions of this is the one provided by Mozilla’s web docs:

A _**_closure_ is a combination of a function bundled together (enclosed) with references to its surrounding state (the _lexical environment**). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

In other words, it’s the fact of putting a function inside of another, which gives the enclosed function access to the outer one’s variables. The term ‘lexical environment’ is referring to the scope of the outer function in this case. Let’s illustrates this with an example:

function outer(){
     let outerVar = "outside";

     function inner(){
            let innerVar = "inside";
            console.log("The outer variable is " + outerVar);
     }
 return inner;
}

closure javascript basics fundamentals function

<p>Other then the syntactical differences. The main difference is the way the this keyword behaves? In an arrow function, the this keyword remains the same throughout the life-cycle of the function and is always bound to the value of this in the...

Introduction With Basic JavaScript - Unlike most programming languages, the JavaScript language has no concept of input or output. It is designed to run as a scripting language in a host environment, and it is up to the host environment to provide mechanisms for communicating with the outside world.

In this article, we will acquaint ourselves with three simple terms: function declaration, function expression, and hoisting.

Javascript Closure is the aggregate of functions clumped together with the references to its surrounding environment.

Closures are something that many companies would like you to know before working for them, therefore, Most developers today, know about closures in Javascript. Don’t be sad if you don’t, it’s not something you generally use on your every-day work (well, you may, but it’s not so common).