{"id":7174,"date":"2022-03-31T15:09:49","date_gmt":"2022-03-31T09:39:49","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=7174"},"modified":"2022-03-31T15:10:27","modified_gmt":"2022-03-31T09:40:27","slug":"javascript-closures","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/javascript-closures\/","title":{"rendered":"\u00a0JavaScript Closures"},"content":{"rendered":"

A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical scope).<\/p>\n

Lexical scoping<\/strong><\/h3>\n

The stance of a variable asserted in the source code denotes its scope in syntactic figuring.<\/p>\n

For example:<\/strong><\/p>\n

let name = 'John';\r\n\r\n\r\n\r\n\r\nfunction greeting() {\r\n\r\n\u00a0\u00a0\u00a0 let message = 'Hi';\r\n\r\n\u00a0\u00a0\u00a0 console.log(message + ' '+ name);\r\n\r\n}<\/pre>\n
In this example:<\/strong><\/p>\n
    \n
  • The variable name is a global variable. It can be accessed from wherever, including the greetings() function.<\/li>\n
  • The variable message is a local variable that is accessible only within the greeting() function.<\/li>\n<\/ul>\n
    If you try to access the message variable outside the greeting() function, you will get an error.<\/p>\n
    As a result, the JavaScript machine produces use of the scope to handle variable mobility. The scopes can be clustered as per syntactic scoping, and the internal function can access the variables asserted in its external scope.<\/p>\n
    For example:<\/strong><\/p>\n
    function greeting() {\r\n\r\n\u00a0\u00a0\u00a0 let message = 'Hi';\r\n\r\n\r\n\r\n\r\n\u00a0\u00a0\u00a0 function sayHi() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(message);\r\n\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 sayHi();\r\n\r\n}<\/pre>\n
     <\/p>\n
    greeting();<\/strong><\/p>\n
    The greetings() function declares a local variable called message as well as a feature called sayHi (). The sayHi() function is an inner function that is only accessible well within skin of the greetings() function. The sayHi() function has full rights to the variables of the outer function, such as the greetings() function’s memo variable.<\/p>\n
    Inside the greeting() function, we call the sayHi() function to display the message Hi.<\/p>\n
    Closure<\/strong><\/p>\n
    The closure allows you to access the scope of an external function from an internal function. Closures are formed in JavaScript each moment a function is generated, at function creation time.<\/p>\n
    <!DOCTYPE html>\r\n\r\n<html>\r\n\r\n<body>\r\n\r\n\r\n\r\n\r\n<h2>JavaScript Closures<\/h2>\r\n\r\n\r\n\r\n\r\n<p>Counting with a local variable.<\/p>\r\n\r\n\r\n\r\n\r\n<button type=\"button\" onclick=\"myFunction()\">Count!<\/button>\r\n\r\n\r\n\r\n\r\n<p id=\"demo\">0<\/p>\r\n\r\n\r\n\r\n\r\n<script>\r\n\r\nconst add = (function () {\r\n\r\n\u00a0 let counter = 0;\r\n\r\n\u00a0 return function () {counter += 1; return counter;}\r\n\r\n})();\r\n\r\n\r\n\r\n\r\nfunction myFunction(){\r\n\r\n\u00a0 document.getElementById(\"demo\").innerHTML = add();\r\n\r\n}\r\n\r\n<\/script>\r\n\r\n\r\n\r\n\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
    Example Explained<\/strong><\/h4>\n
    A self-supplicating\u00a0function’s returns\u00a0value is assigned to the variable add.<\/p>\n
    The self-supplicating function only runs once. It reverts a function appearance and resets the table to zero (0).<\/p>\n
    This way add becomes a function. The “marvelous” part is that one can gain entry to the parent scope’s table.<\/p>\n
    This is called a JavaScript closure. It makes it possible for a function to have “private” variables.<\/p>\n
    The unidentified function’s scope protects the counter, and it can only be changed with the add function.<\/h4>\n
    Summary<\/strong><\/h4>\n
      \n
    • Lexical scoping defines how the JavaScript engine determines where a variable is available based on its location in the code.<\/li>\n
    • A closure is a feature with the ability to recall variables in the external\u00a0scope.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
      A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical scope). Lexical scoping The stance of a variable asserted in the source code denotes its scope in syntactic figuring. For example: let name = ‘John’; function greeting() { \u00a0\u00a0\u00a0 let message = ‘Hi’; \u00a0\u00a0\u00a0 console.log(message + […]<\/p>\n","protected":false},"author":1,"featured_media":7177,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[120,360],"tags":[722,723,224,346],"class_list":["post-7174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ext-js","category-javascript","tag-blog","tag-blogging","tag-java","tag-javascript"],"yoast_head":"\n\u00a0JavaScript Closures - 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\/javascript-closures\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00a0JavaScript Closures - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical scope). Lexical scoping The stance of a variable asserted in the source code denotes its scope in syntactic figuring. For example: let name = 'John'; function greeting() { \u00a0\u00a0\u00a0 let message = 'Hi'; \u00a0\u00a0\u00a0 console.log(message + […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/javascript-closures\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-31T09:39:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-31T09:40:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Java-closure-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\\\/javascript-closures\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/javascript-closures\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"\u00a0JavaScript Closures\",\"datePublished\":\"2022-03-31T09:39:49+00:00\",\"dateModified\":\"2022-03-31T09:40:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/javascript-closures\\\/\"},\"wordCount\":359,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/javascript-closures\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Java-closure.png\",\"keywords\":[\"blog\",\"blogging\",\"java\",\"JavaScript\"],\"articleSection\":[\"Ext JS\",\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/javascript-closures\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/javascript-closures\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/javascript-closures\\\/\",\"name\":\"\u00a0JavaScript Closures - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/javascript-closures\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/javascript-closures\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Java-closure.png\",\"datePublished\":\"2022-03-31T09:39:49+00:00\",\"dateModified\":\"2022-03-31T09:40:27+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/javascript-closures\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/javascript-closures\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/javascript-closures\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Java-closure.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/Java-closure.png\",\"width\":3556,\"height\":2000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/javascript-closures\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00a0JavaScript Closures\"}]},{\"@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":"\u00a0JavaScript Closures - 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\/javascript-closures\/","og_locale":"en_US","og_type":"article","og_title":"\u00a0JavaScript Closures - InnovationM - Blog","og_description":"A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical scope). Lexical scoping The stance of a variable asserted in the source code denotes its scope in syntactic figuring. For example: let name = 'John'; function greeting() { \u00a0\u00a0\u00a0 let message = 'Hi'; \u00a0\u00a0\u00a0 console.log(message + […]","og_url":"https:\/\/www.innovationm.com\/blog\/javascript-closures\/","og_site_name":"InnovationM - Blog","article_published_time":"2022-03-31T09:39:49+00:00","article_modified_time":"2022-03-31T09:40:27+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Java-closure-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\/javascript-closures\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/javascript-closures\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"\u00a0JavaScript Closures","datePublished":"2022-03-31T09:39:49+00:00","dateModified":"2022-03-31T09:40:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/javascript-closures\/"},"wordCount":359,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/javascript-closures\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Java-closure.png","keywords":["blog","blogging","java","JavaScript"],"articleSection":["Ext JS","JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/javascript-closures\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/javascript-closures\/","url":"https:\/\/www.innovationm.com\/blog\/javascript-closures\/","name":"\u00a0JavaScript Closures - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/javascript-closures\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/javascript-closures\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Java-closure.png","datePublished":"2022-03-31T09:39:49+00:00","dateModified":"2022-03-31T09:40:27+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/javascript-closures\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/javascript-closures\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/javascript-closures\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Java-closure.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/Java-closure.png","width":3556,"height":2000},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/javascript-closures\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"\u00a0JavaScript Closures"}]},{"@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\/7174","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=7174"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7174\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/7177"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=7174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=7174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=7174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}