{"id":7159,"date":"2022-03-17T12:18:11","date_gmt":"2022-03-17T06:48:11","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=7159"},"modified":"2023-01-20T18:54:54","modified_gmt":"2023-01-20T13:24:54","slug":"closures-callback-in-javascript","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/","title":{"rendered":"Closures & Callback in JavaScript"},"content":{"rendered":"

Closures:-<\/strong> <\/span><\/p>\n

One of the greatest features in javascript is closures and it’s widely used but a little bit confusing term of javascript. So let’s understand what is closures. In simple words closures function are gives you access to an outer function from the inner function.<\/span><\/p>\n

We will start the fundamental term lexical scope known as static scoping. Lexical scoping means is determined by the position of the variable which is declared in our nested scopes or function. Let’s see an example.<\/span><\/p>\n

For Example:-<\/span><\/p>\n

const globalVar= 0;\r\n\r\n\r\n\r\n\r\nfunction closuerFunc() {\r\n\r\n\u00a0\u00a0const myFirstVar = 1;\r\n\r\n\u00a0\u00a0console.log(globalVar); \/\/ logs \"0\"\r\n\r\n\u00a0\u00a0function innerOfFunc() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0const myInnerVar = 2;\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log(myFirstVar , globalVar); \/\/ logs \"1 0\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0function innerOfInnerOfFunc() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(myInnerVar, myFirstVar , globalVar); \/\/ logs \"2 1 0\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0innerOfInnerOfFunc();\r\n\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0innerOfFunc();\r\n\r\n}\r\n\r\nclosuerFunc();<\/pre>\n
We can easily understand how to work lexical scope in our closures. But we talk about the closure function let’s see.<\/span><\/p>\n
function outerClosureFunc() {\r\n\r\n\u00a0\u00a0let outerVar = 'I am outside!';\r\n\r\n\u00a0\u00a0function innerClosureFunc() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log(outerVar); \/\/ => logs \"I am outside!\"\r\n\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0innerClosureFunc();\r\n\r\n}\r\n\r\nouterClosureFunc();<\/pre>\n
In other words, here is innerClosureFunc is a Closure because over the variable outerClosureFunc from its lexical scope.<\/span><\/p>\n
Callback:-<\/strong><\/p>\n
What is a callback?<\/strong><\/p>\n
A callback is just a function that takes some time to give our results and generally async terms(async short for asynchronous) are used for accessing the value from our server. And callback concept is a great example of handling asynchronous behavior in javascript. Let’s see an example.<\/span><\/p>\n
const secondFunc =()=>{\r\n\r\n\u00a0\u00a0\u00a0console.log('Hello World!');\r\n\r\n}\r\n\r\n\r\n\r\n\r\nconst firstFunc =()=>{\r\n\r\n\u00a0\u00a0\u00a0console.log('I am calling...');\r\n\r\nsecondFunc ();\r\n\r\n}\r\n\r\nfirstFunc();<\/pre>\n
Output<\/strong> is<\/span><\/p>\n
“I am calling…<\/span><\/em><\/p>\n
Hello World”<\/span><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Closures:- One of the greatest features in javascript is closures and it’s widely used but a little bit confusing term of javascript. So let’s understand what is closures. In simple words closures function are gives you access to an outer function from the inner function. We will start the fundamental term lexical scope known as […]<\/p>\n","protected":false},"author":1,"featured_media":7162,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[256,360],"tags":[760,722,759,758,224,346],"class_list":["post-7159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java-application","category-javascript","tag-article","tag-blog","tag-callback","tag-closure","tag-java","tag-javascript"],"yoast_head":"\nClosures & Callback in JavaScript - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Closures & Callback in JavaScript - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"Closures:- One of the greatest features in javascript is closures and it’s widely used but a little bit confusing term of javascript. So let’s understand what is closures. In simple words closures function are gives you access to an outer function from the inner function. We will start the fundamental term lexical scope known as […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-17T06:48:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-20T13:24:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Closure-and-callback-1-1024x576.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/closures-callback-in-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/closures-callback-in-javascript\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Closures & Callback in JavaScript\",\"datePublished\":\"2022-03-17T06:48:11+00:00\",\"dateModified\":\"2023-01-20T13:24:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/closures-callback-in-javascript\\\/\"},\"wordCount\":194,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/closures-callback-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Closure-and-callback-1.png\",\"keywords\":[\"article\",\"blog\",\"callback\",\"closure\",\"java\",\"JavaScript\"],\"articleSection\":[\"Java Application\",\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/closures-callback-in-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/closures-callback-in-javascript\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/closures-callback-in-javascript\\\/\",\"name\":\"Closures & Callback in JavaScript - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/closures-callback-in-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/closures-callback-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Closure-and-callback-1.png\",\"datePublished\":\"2022-03-17T06:48:11+00:00\",\"dateModified\":\"2023-01-20T13:24:54+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/closures-callback-in-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/closures-callback-in-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/closures-callback-in-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Closure-and-callback-1.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Closure-and-callback-1.png\",\"width\":3556,\"height\":2000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/closures-callback-in-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Closures & Callback in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Closures & Callback in JavaScript - InnovationM - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Closures & Callback in JavaScript - InnovationM - Blog","og_description":"Closures:- One of the greatest features in javascript is closures and it’s widely used but a little bit confusing term of javascript. So let’s understand what is closures. In simple words closures function are gives you access to an outer function from the inner function. We will start the fundamental term lexical scope known as […]","og_url":"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/","og_site_name":"InnovationM - Blog","article_published_time":"2022-03-17T06:48:11+00:00","article_modified_time":"2023-01-20T13:24:54+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Closure-and-callback-1-1024x576.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Closures & Callback in JavaScript","datePublished":"2022-03-17T06:48:11+00:00","dateModified":"2023-01-20T13:24:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/"},"wordCount":194,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Closure-and-callback-1.png","keywords":["article","blog","callback","closure","java","JavaScript"],"articleSection":["Java Application","JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/","url":"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/","name":"Closures & Callback in JavaScript - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Closure-and-callback-1.png","datePublished":"2022-03-17T06:48:11+00:00","dateModified":"2023-01-20T13:24:54+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Closure-and-callback-1.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Closure-and-callback-1.png","width":3556,"height":2000},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/closures-callback-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Closures & Callback in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=7159"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7159\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/7162"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=7159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=7159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=7159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}