A practical example of Javascript closures

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

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

losures are something that many companies would like you to know before working for them, therefore, chances are they’ll ask you something related with this topic, or even more, they could make you write a practical example of it.

On this story, I’m gonna tell you about a small function I was asked to develop on an interview a while ago, that involved the use of closures for its solution.

Let’s start with the premise:

Can you write a function that will solve the following test case?

let result = sum(1)(2)(3)();

console.log(result === 6 ? 'SUCCESS' : 'ERROR');

The function we need to create will sum the values sent as a parameter and will accumulate them. Also, it will return another function for the next value to be passed on. If we don’t send any value to it, it will return the accumulated value.

It looks fairly simple at first, but let’s take a look into it:

const sum = (value) => {
  let accum = 0;

  if (value) {
    accum += value;
    const innerSum = (value) => { /*TODO*/ };
  } else {
    return accum;
  }
};
console.log(sum());
0

That’s a good start. First, we create the function called sum that will take a value as a parameter. If that value exists, we will sum the value to the accum and return a function to keep adding values (TODO).

currying javascript-interview javascript closures-functions closure

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

Function Expression vs Function Declaration in JavaScript

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

Currying in Javascript - Top Interview Questions [Solved]

Currying is a powerful pattern in the Javascript language. Many libraries make use of this pattern. It is primarily based on the concept of closures. If you understand scopes and closures well, it would be easy to understand. It's a must read for anyone preparing for a front-end/javascript interview. Questions around currying in javascript are highly expected in an interview. So don't miss it. In this post, we'll discuss multiple javascript interview problems around currying - from a simple one to the advanced ones.

Javascript Closure: How to Use Closure in JavaScript

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

The real reason why JavaScript has arrow functions

The real reason why JavaScript has arrow functions Nowadays, all my code is based on the use of arrow functions. If you are still not using them yourself, then don’t be ashamed of who you are. That’s your parent’s job. Instead, find about all the benefits that you can get by using arrow functions like the cool kids. You may notice that the code is shorter and that there is an arrow. Everything before the arrow is arguments of the function and everything after the arrow is always returned as the result of the function.