JavaScript Basics Series: Closure

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The Difference Between Regular Functions and Arrow Functions in JavaScript

<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

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.

Function Expression vs Function Declaration in JavaScript

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

Javascript Closure: How to Use Closure in JavaScript

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

A practical example of Javascript closures

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).