The concept of Triple CCC: Currying, Closure, Callback in JavaScript
Tags: codenewbie, javascript, webdev, programming
Published: 2022-07-06 04:05:38

<!-- wp:paragraph -->
<p>JavaScript is a programming language that is used in both FrontEnd and BackEnd to build interactive web applications. It is the only scripted language that the browser can understand. As far today, almost 98% of websites use this language on the client-side for web page behavior. It is the most popular programming language in the world.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But the journey of this language was not so smooth. This language was designed by <code>Brendan Eich</code> and first appeared on December 4, 1995. At the initial moment, it was only used to bring interactivity to the web pages while the HTML and CSS are used to structure and design the web page.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The Game-changing moment happens when <code>Ryan Dahl</code> introduces NodeJS for the first time in 2010. It is nothing but an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Since that moment this language has been used widely. In 2022, it is worth learning this amazing language to build a strong career in the Web Development sector. To make your learning journey smooth and also make your base solid, today, I will discuss the concepts of JavaScript those are Currying, Closure, and Callback (CCC). </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>No matter which position you are in now! If you want to make yourself a good JavaScript developer then you need to have a solid understanding of these topics. Moreover, it will help you to crack interview questions because most of the time there’s a common question that interviewers ask about these topics. At the end of this tutorial, you will get a clear understanding of Currying, Closure, and Callback in JavaScript.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>Things You will learn from this tutorial</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We will cover the following topics in this tutorial:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Function as First-Class Citizen</li><li>Currying</li><li>Closure</li><li>Callback</li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Function as First-Class Citizen</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Before learning about the CCC’s concepts, you need to understand the concept of a First-Class Citizen. In JavaScript, a function is said to be a First-Class Citizen for the following three reasons</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>A function can be assigned as a value to a variable</li><li>A function can be passed as an argument to other functions</li><li>A function can be returned by another function</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Let's take a look at some code snippets that show how a function in JavaScript can satisfy the above three reasons</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>A function can be assigned as a value to a variable</h3>
<!-- /wp:heading -->

```javascript
const myFunc = name => `Hello, ${name}! `;

const result = myFunc("Rahul");
console.log(result);

// Output: Hello, Rahul!
```
<!-- wp:paragraph -->
<p>Here, you can see that we have declared an arrow function and later on, we have stored it into a variable named <code>myFunc</code>. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>A function can be passed as an argument to other functions</h3>
<!-- /wp:heading -->

```javascript
const myFunc = (greetings,name) => `${greetings()}, ${name}! `;

const hello = () => "Hello"
const bonjour = () => "Bonjour"
const salut = () => "Salut"

const result_1 = myFunc(hello,"Rahul");
const result_2 = myFunc(bonjour,"Rahul");
const result_3 = myFunc(salut,"Rahul");

console.log(result_1);
console.log(result_2);
console.log(result_3);

// Output: 
// Hello, Rahul! 
// Bonjour, Rahul! 
// Salut, Rahul! 
```
<!-- wp:paragraph -->
<p>Instead of hard-coding "Hello" in our function <code>myFunc</code>, we now accept a parameter which is a function. As you can see, there are three different functions <code>hello</code>,<code>bonjour</code> and <code>salut</code> and each of them are passed as an argument to <code>myFunc</code></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>A function can be returned by another function</h3>
<!-- /wp:heading -->

```javascript
const outerFunc = () => {
  console.log("Outer Function")
  const innerFunc = () =>{
    console.log("Inner Function")
  }
  return innerFunc
}


outerFunc()()
// OUTPUT
// Outer Function
// Inner Function


const myFunc = outerFunc()
myFunc()
myFunc()
// OUTPUT
// Outer Function
// Inner Function
// Inner Function
```
<!-- wp:paragraph -->
<p>We have a function named <code>outerFunc</code>. It doesn't do much, it simply prints a statement to the console. Another function called <code>innerFunc</code> is created inside. The <code>innerFunc</code> also doesn't do much, it simply prints a statement to the console. The <code>outerFunc</code> returns the <code>innerFunc</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are a couple of ways this can be used. The first way is to use two braces together. The first pair of brackets invokes <code>outerFunc</code> and the second pair of brackets invokes the object returned by <code>outerFunc</code>, i.e the function <code>innerFunc</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the second way, we store the returned function in a variable and invoke it it like a normal function</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Currying</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In simple terms, Currying is a technique of chaining multiple functions. It’s a functional programming feature. Let’s understand this concept by solving a common  interview question :</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>The Question</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Look at the below code snippet.</p>
<!-- /wp:paragraph -->

```javascript
function sum(x, y, z){
    return x + y + z
}

console.log(sum(10, 20, 30))

// Output: 60
```
The task you need to perform is to call the sum function like sum(10)(20)(30) instead of sum(10, 20, 30) this. 

```javascript
// Current way of Invoking function
sum(10, 20, 30)

// Desired way of Invoking function
sum(10)(20)(30)
```
How can you perform this action? The answer is simple, the term you need to use is Currying. See the below code example

```javascript
function sum(x){
    return function(y){
        return function(z){
            return x + y + z
        }
    }
}

console.log(sum(10)(20)(30))

// Output: 60
```
<!-- wp:paragraph -->
<p>Here, you can see that we have declared a function inside another and these have created a function chaining. You can also see we are getting exactly the same output and this process is known as Currying in JavaScript.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Currying is used in popular javascript libraries such as <a href="https://lodash.com/" target="_blank" rel="noreferrer noopener">Lodash</a> and <a href="https://ramdajs.com/" target="_blank" rel="noreferrer noopener">Rambda</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Closure</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A closure in JavaScript is nothing but a function that references variables in the outer scope from its inner scope. Let’s see the problem that closure solves in the below section and by doing so, you will be able to know why we need</p>
<!-- /wp:paragraph -->

```javascript
function sayHello(){
    let name = 'Rahul'

    function inner(){
        console.log(`Hello ${name}`)
    }

    return inner
}

let abc = sayHello()
console.log(abc)

// Output: 
// [Function: inner]
// Hello Rahul
```
<!-- wp:paragraph -->
<p>Here, you can see that we are getting the output as expected. But the main question is how we are getting this? Let’s break it down in the below section:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>At first, we declared a function named <code>sayHello()</code> and stored a string inside the <code>name</code> variable. Later on, we declared another function and print the name with a <code>Hello</code> message, and returned the <code>inner()</code> function. Finally, we have stored the returned function into the <code>abc</code> variable.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, when JavaScript will execute the code it will not find the <code>name</code> variable as the <code>sayHello()</code> function’s memory has been destroyed. But how we are getting the output as expected?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The main reason behind this is that Closure. Here, it is true that the <code>sayHello()</code> function’s memory has been destroyed but it creates a reference of that function and as a result, while executing the <code>inner()</code> it can access the variable from the reference of the <code>sayHello()</code> function. To perform this action, you don’t need to write one line of extra code. Because the JavaScript engine is smart enough to perform this action. All you need to do is to understand the concept of closure and it is created by default every time when a function has been created in JavaScript.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Callback</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A callback is a function passed as an argument to another function. Let's look at a use case below.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> Suppose, we have an array of names saved in our database. We want to add a new name and later on, we want to print the names with the newly added name. To perform this action we have written the below code:</p>
<!-- /wp:paragraph -->

```javascript
let names = ['Rahul','Rohit','Rohan']

function addNewName(name){
    setTimeout(function(){
        names.push(name)
    },5000)
}

function printNames(){
    setTimeout(function(){
        console.log(names)
    },3000)
}

addNewName('Alex')
printNames()

// Output:
// [ 'Rahul', 'Rohit', 'Rohan' ]
```
<!-- wp:paragraph -->
<p>Here, you can see that, we have added the functionality for adding new names but in the output, the new name has not been added. The main reason behind this is the <code>asynchronous</code> behavior of JavaScript. We know that for tasks that take much time, JavaScript does not wait for them, rather they work on other lighter tasks and keep the heavy task in the queue. The same things happen here. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We need to use a callback function so that we can break the <code>asynchronous</code> behavior of JavaScript and it can wait for us based on a specific task. See the below code example to understand it more clearly:</p>
<!-- /wp:paragraph -->

```javascript
let names = ['Rahul','Rohit','Rohan']

function addNewName(name, cb){
    setTimeout(function(){
        names.push(name)
        cb()
    },5000)
}

function printNames(){
    setTimeout(function(){
        console.log(names)
    },3000)
}

addNewName('Alex',printNames)

// Output:
// [ 'Rahul', 'Rohit', 'Rohan', 'Alex' ]
```

<!-- wp:paragraph -->
<p>We have passed a function (printNames) as an argument to another function (addNewName). This time <code>printNames</code> will execute only after the previous functions have been executed. This concept is known as the Callback and you can see that we have called this function after the previous function finished its tasks. That’s the reason we have mentioned Callback as Call later.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are many advanced concepts that have been built on top of the Callback. You may also have heard about the concept of <code>Callback hell</code>. I'll be discussing this in one of the future articles.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this tutorial, we have covered three essential concepts of JavaScript (Currying, Closure, and Callback). I hope you found this article helpful and informative.</p>
<!-- /wp:paragraph -->

---
```
This article was originally posted on 
https://realjavascriptproject.com/javascript-currying-closure-callback/

Connect with me on LinkedIn: 
https://www.linkedin.com/in/rahulbanerjee2699/
```