{"componentChunkName":"component---src-templates-blog-post-js","path":"/what-is-closures-in-javascript","result":{"data":{"markdownRemark":{"id":"cca980b8-bdd7-5605-9e65-5ae67841853e","html":"\n

Closures is an important topic when it comes to JS and it has become so popular that even other big programming languages are adopting the same

\n

To understand closure we first need to have a good knowledge of functions and lexical scoping because closure is dependent on that

\n

You might be using closures without even knowing about it so let's see what closures are why it is such a cool and amazing concept in JS

\n

To start I will explain about functions and higher-order functions so if you already know about it you can directly go to the closure part

\n

Let's start by revising what we know about functions

\n

We know how to call functions

\n
    \n
  1. \n

    Normally calling a function

    \n
    function hello(){\n\tconsole.log(\"hi)\n}\nhello()
    \n
    2. \n
  2. \n

    Calling with an object

    \n
    const obj = {\n\tname:\"Jett\",\n\tspeed(){\n\t\tconsole.log(\"Woos\")\n\t}\n}\nobj.speed()
    \n
    3. \n
  3. \n

    Using the call method

    \n
    function hello(){\n\tconsole.log(\"hi)\n}\nhello.call()
    \n
    4. \n
  4. \n

    We can also use \"new\" operator

    \n
    const four = new Function(\"num\", \"return num\")\n\nfour(4)
    \n
    5. \n
\n

We know that whenever a function is called or invoked it creates an execution context and that execution context consists of the \"this\" keyword, the \"arguments\" keyword, and finally the variable environment

\n
\n

Functions are a special type of object which are called callable objects in JS

\n
\n

Why you ask, well we can back that claim up because if you imagine a box with the name of the function and some code and three properties - call, apply and bind

\n

\n \n \n \n \n
Inside of the function
\n

\n

If you now go to your text editor and type a function and then see by the intelligence you will see something like this

\n

\n \n \n \n \n
Functions are objects
\n

\n

It will give you the options or the methods that you can use with the function itself so that means it behaves like an object

\n

Now how does this concern us, well if functions are objects then we can store them around like objects, move them and pass them to another function

\n
\n

Functions are first-class citizens in JS

\n
\n

What does that mean well three things back that claim

\n

1.We can store a function into a variable

\n
var greet = function(){}
\n

2.We can pass a function as an argument to another function

\n
function greet(fn){\n\tfn()\n}\ngreet(function(){console.log(\"hello\")})
\n
    \n
  1. We can also return a function
    2. \n
\n
function greet(){\n\treturn function(){ console.log(\"Hi there\")}\n}\n\ngreet()()
\n

So basically what I am trying to say is function can do pretty much everything other data types can do in JS

\n

Higher-Order Functions (HOF)

\n

A HOF is a function that can return a function or a function that can take function for an arguments as you have seen from the above examples

\n

And we also know about the lexical scoping in JS and if you don't then you can refer to this article but in short, let me tell you

\n

Lexical scoping or static scoping means the available variable data and functions are dependent on where the function is defined

\n

Closures

\n

Now finally to explain Closures let's start with an example

\n
function hello(){\n  console.log(\"greetings\")\n  var a = \"hi\"\n  return function b(){\n    var b = \"hi there\"\n    return function c(){\n      var c = \"hello there\"\n      return `${a} ${b} ${c}`\n    }\n  }\n}\n\nhello()()() // hi hi there hello there
\n

Now what has happened here, well I wrote the function hello and then declared a variable and returned another function which indeed returns another function, and finally, I accessed all the variables at the end and returned it

\n

Well as you guys know that when function hello is called it is pushed onto the stack and after it returns another function it gets popped off the stack (and if a function gets popped off the stack then their variable environment gets destroyed) then function b comes onto the stack return a function and again pops off the stack

\n

Finally, function c comes and return all the variables that were defined while in function hello and b

\n

But didn't I just said that those functions were popped off the stack and but then too we somehow have access to their variable

\n

And this concept of accessing the variables even if the function is popped off the stack which returning a function is called closure

\n

What happens is the first time when the JS engine parses the code it sees that the variables are mentioned even inside the function which is being returned and so because of that it just stores the variable into a contained called closure and when the function is being called then when the JS engine gets its value from the closure box and puts it in and runs it

\n

This is one of the coolest parts of JS and it can have many uses such they can be memory efficient and use encapsulation

\n

Memory efficient

\n
function work(index){\n\tconst arr = new Array(7000).fill(\":)\") // create new array with 7000 elements of :)\n\tconsole.log(\"created\")\n\treturn arr[index]\n}\n\nwork(55) // created\nwork(99) //created\nwork(800) // created :)
\n

Here we have created a function that creates a new Array of 7000 elements with \":)\" and finally return it will give index well this process takes time if we call it again and again and is not very memory efficient

\n

What we can do instead is

\n
function work(index){\n\tconst arr = new Array(7000).fill(\":)\") // create new array with 7000 elements of :)\n\tconsole.log(\"created\")\n\treturn function (){\n\t\t\treturn arr[index]\n\t}\n}\n\nconst workHard = work()\nworkHard()\nworkHard()\nworkHard() \n// created :)
\n

Here even if we call the workHard function many times it will give only one output and that saves a lot of time and memory instead of creating an array every single time on invocation

\n

Encapsulation

\n

Also with the help of closure, we can use encapsulation which means is a process of bundling the data (i.e. variables) with the functions acting on that data as you have seen in the previous examples

\n

Was the article helpful? Do you have any doubts? Any topic you would like us to cover?

\n

Reach out to us on Twitter and Instagram where we try to provide more value in threads and carousal formats

\n

Thank You for your time

\n

Keep learning, Keep coding :)

\n","excerpt":"Closures is an important topic when it comes to JS and it has become so popular that even other big programming languages are adopting the same To…","frontmatter":{"date":"April 10, 2021","slug":"/what-is-closures-in-javascript","title":"Closures | Javascript","description":"Learn about the famous closures and understand Javascript on an even deeper level here with examples and advantages of closures","featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAACw0lEQVQ4y12TS08TYRiFZ2NiSBDojXamc/3m3mmnV2ixgNiURAIYROsFiUJMiDFha9S9C3+De5esXbt2Z+IPcGli/AfH882UjYuTvp32e75z3vcdxaklkLKrCXy9Dd/sIKDC+WcmowNXa2X/c7UmLNZbVhup3UXg9NH01pGGG2hHt6HY1QakHMpajeHX8tqef88hLURWD149hVCbSN01bIsun3XRYN30h0iDEdqEKlYl5MFcOjW2UsTShQRnzucXso7tHgShiZ7SYYo6n/kSSmBMlw1vCMWsBLAJEtUQzmpEJYQnMFfzVvyvRAzgsjXboocRY4f1FtpODx13gLboQ9ErPgEBgRF/jPgwQWTKfuauzEqURZexZdzAaGfxu/EYO9EQE7+PSbSOaTzClJ+KQaCjBlheCPHutYvfPwz8+Wnh25WTOY+dQTYgdcWDRtWLQXZJveCjxtrgMF0OzeJlltqSQA9CC3HrZoSPbwXwV8fXL2Vcfa5id3MXxwenOHl4junmAY73T3Bv5wh7kweY3T/F7PAUG527sHiBS6BgIkUrClhVFws3fHx6L/Drew1vzhbx4bKA6XgHu9tH2eEnRy9xcXaJ57NXeHZ8jkeEvXh6genWIV37WTvkdihq0YZaclBeEhh3PTzedzDbEziYMF5JwNYaHFAIsxzyoMd+RtnUZezrdbt2J3uuFJYNFJdNQm2UFh0IfQDfHqK46KJe9qGXPfaJQA4tE7dCrprDtfIJklMOuWayzoBr9RAJIxdXTFQJddhPWwuglh1oqz5MOozNJhKjiabJSWtJBpXOpCt37kxcAwOrhZTQbk1gZUmnDJQKbEPVR6RFGOoRRtSwHmNDj3FHtBmxMY+eL36i5ZFlrQRuHzpvbshDRoCeHmLNiLCu+RioHtyyy3ZQjF4peRhzRzt8S3T5QlTzV3NktOCpOfAfxcKHnEPrRVAAAAAASUVORK5CYII=","aspectRatio":1.502145922746781,"src":"/static/ada7c0c108b988d6b962e9f5f539426b/03979/closures-cover.png","srcSet":"/static/ada7c0c108b988d6b962e9f5f539426b/6cdeb/closures-cover.png 350w,\n/static/ada7c0c108b988d6b962e9f5f539426b/b1dd8/closures-cover.png 700w,\n/static/ada7c0c108b988d6b962e9f5f539426b/03979/closures-cover.png 800w,\n/static/ada7c0c108b988d6b962e9f5f539426b/1783d/closures-cover.png 1050w,\n/static/ada7c0c108b988d6b962e9f5f539426b/942ca/closures-cover.png 1400w,\n/static/ada7c0c108b988d6b962e9f5f539426b/b5274/closures-cover.png 3000w","sizes":"(max-width: 800px) 100vw, 800px","maxHeight":533,"maxWidth":800},"sizes":{"src":"/static/ada7c0c108b988d6b962e9f5f539426b/ee604/closures-cover.png"}}}}}},"pageContext":{"id":"cca980b8-bdd7-5605-9e65-5ae67841853e","previous":{"id":"d9d55ecf-df73-5be1-af1f-ddcb87a5cfe4","frontmatter":{"slug":"/what-is-call-bind-apply-in-javascript","template":"blog-post","title":"Call, Bind and Apply In Javascript"}},"next":{"id":"909fe9fc-9e82-5ca0-bf0a-ad4a82feda65","frontmatter":{"slug":"/creating-custom-buttons-in-react-native","template":"blog-post","title":"Creating Custom Buttons in React Native"}}}},"staticQueryHashes":["228695001","3868140423"]}