🔥

Search... Write a post

Ritik

Closure, Currying and IIFE in

4 @ritik_dev_js

Being a JavaScript Dev.

1

2
JavaScript + FOLLOW

location
Ritik Apr 20 ・3 min read
India

#javascript #react #angular #vue joined

Mar 13, 2020
DISCUSS

These are some of the concepts of JavaScript where everyone struggle in

beginning.
Lets try to simplify them bit by bit.

Closure
Closure is a function that can remember all the things that are used in its
defination but are available outside its scope.
Lets see what this line means:
Join dev.to

function outerFunction(){
let i=2;
function innerFunction(){
console.log(i);
}
return innerFunction;
}

console.dir(outerFunction());
//[[Scopes]]:
//0: Closure (outerFunction) {i: 2}

You will see something like this when you run the sample code.
Lets break the code:

1.There is an outerFunction() with a variable i.

2.And a function insideFunction() which it returns as an output.

3.When we invoke outerFunction() inside console.log() we get

innerFunction() in return.

4.innerFunction() wants variable i but not in its scope.

What will happen if we invoke innerFunction:

function outerFunction(){
let i=2;
function innerFunction(){
console.log(i);
}
return innerFunction;
}

const inner = outerFunction();

inner();
//2

Output is 2.

But outerFunction is already executed and its scope is vanished from stack.
So how does innerFunction()
get the value of "i" from outerFunction(). Does it Re-Run the
outerFunction()? NO!

So what innerFunction does is, it creates a closure with the lexical

environment it needs.
It has to use the value of variable "i" in future so it saves it,in its lexical
environment(scope).
And whenever innerFunction() is invoked irrespective of outerFunction(), it
gets help from its lexical environment.

Does it stores all variables or functionality of outerFunction() in its lexical

environment? NO:

function outerFunction(){
let i=2;
let j=3;
function innerFunction(){
console.log(i);
}
return innerFunction;
}

console.dir(outerFunction());
//[[Scopes]]:
//0: Closure (outerFunction) {i: 2}

So there is no variable "j" in lexical environment (scope).

It just store what it may need during the time of execution.
Closures are used in IIFE which we will see in later part of this article.(stay
tuned)

Currrying
Currying is process of transforming a function which takes multiple
attributes into nested form of functions which takes
attribute one by one.

function multiply(x,y){
console.log(x*y)
}
multiply(5,4);
//20

Currying it:

function multiply(x){
return function(y){
console.log(x*y);
}
}
multiply(5)(4);
//20

But how it is helping in our code. Lets see:

function multiply(x){
return function(y){
console.log(x*y);
}
}
const multiplyby3 = multiply(3);
const multiplyby5 = multiply(5);

multiplyby3(2);
//6
multiplyby5(2);
//10

It helps in loosely binding the attributes and to make reusable code.

IIFE
IIFE stands for Immediately Invoked Function Expression. It is a design
pattern which helps in running a
function as soon as it is defined.

(function(){
//logic
})();

This is the IIFE syntax consist of an anonymous function with () to invoke

immediately.

Lets create a IIFE:

(function(){
console.log("Its an IIFE")
})();
//Its an IIFE

IIFE also provide other benefits, like it helps in making our variable and
methods private.

const world = (function(){

let val;

return{
createNewWorld: function(){
val = true;
},
destroyWorld: function(){
val=false;
},
result:function(){
val?console.log("New world is Created"):console.log("Your world needs to be recreated
}

})();

world.createNewWorld();
world.result();
//New world is Created

world.destroyWorld();
world.result();
//Your world needs to be recreated

In the above code sample variable "val" is a private member. We can not
access it directly.
The public methods under return function helps in accessing the private
member.
These public methods are the closures that share the same lexical
environment.
This is one of the application of closures.

The End
In this article we learn about Closures, Currying and IIFE. <3
This article is also available at ritikrana.in

Ritik + FOLLOW

Being a JavaScript Dev.

@ritik_dev_js rtktwt ritikrana.in

Add to the discussion

PREVIEW SUBMIT

code of conduct - report abuse

Classic DEV Post from Nov 28 '19

New browser on the block!

Nick Taylor (he/him)
Photo by Jacalyn Beales on Unsplash Well, it looks like the
web browser ecosystem is getting another... Nick Taylor (he/him)

69 14 + FOLLOW

Another Post You Might Like

React, "Diffing" and the

DOM
Rachel Williams
Rachel Williams

84 7 + FOLLOW

Another Post You Might Like

How SWR works behind the

scenes
Julian Garamendy
Julian Garamendy
I first learned about SWR thanks to a video tutorial by Leigh + FOLLOW
Halliday: "React Data Fetching with Hoo...

200 5

React Hooks, Context API, State Management in Pure

and Pokemons React: Context and
TK - Apr 22 useContext
Bipin Rajbhar - Apr 22

Using Pick<T,K> in JavaScript Quiz Question #1:

TypeScript Array Sort Comparison
Gil Creque - Apr 22 Nick Scialli (he/him) - Apr 21

Home About Privacy Policy Terms of Use Contact Code of Conduct

DEV Community copyright 2016 - 2020