{"id":1741,"date":"2017-05-22T23:37:06","date_gmt":"2017-05-22T23:37:06","guid":{"rendered":"http:\/\/www.phpmind.com\/blog\/?p=1741"},"modified":"2017-05-22T23:37:06","modified_gmt":"2017-05-22T23:37:06","slug":"understanding-javascript-closure","status":"publish","type":"post","link":"https:\/\/www.phpmind.com\/blog\/2017\/05\/understanding-javascript-closure\/","title":{"rendered":"Understanding Javascript Closure"},"content":{"rendered":"<p>Closure is a nested function that has access to the variables in the outer (enclosing) function\u2019s scope chain. It has access to variables in three scopes:<\/p>\n<ul>\n<li>Variable in its own scope.<\/li>\n<li>Variables in the enclosing (outer) function\u2019s scope.<\/li>\n<li>Global variables.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2017\/05\/closure-diagram.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1742\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2017\/05\/closure-diagram.jpg\" alt=\"\" width=\"721\" height=\"617\" srcset=\"https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2017\/05\/closure-diagram.jpg 721w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2017\/05\/closure-diagram-300x257.jpg 300w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2017\/05\/closure-diagram-624x534.jpg 624w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/a><\/p>\n<pre>\r\nvar globalVariable = 'Global variable.';\r\n\r\nfunction outerFunction() {\r\n  var outerFunctionVariable = 'Outer function variable.';\r\n  \r\n  function innerFunction () {\r\n    var innerFunctionVariable = 'Inner function variable.';\r\n    console.log(\"This is \" + innerFunctionVariable);\r\n    console.log(\"I can also access \" + outerFunctionVariable);\r\n    console.log(\"This is a \" + globalVariable);\r\n  };\r\n  innerFunction();\r\n};\r\nouterFunction();\r\n<\/pre>\n<p>Best part of closure is that the nested (inner) function can access the variables from the outer scope even after the outer function has returned.<\/p>\n<pre>\r\nfunction myFunction(x) {\r\n    var outerVariable = x;\r\n    return function() {\r\n        console.log(outerVariable);\r\n    };\r\n};\r\n\r\nvar secondFunction = myFunction(\"This is outer variable\");\r\nsecondFunction();\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Closure is a nested function that has access to the variables in the outer (enclosing) function\u2019s scope chain. It has access to variables in three scopes: Variable in its own scope. Variables in the enclosing (outer) function\u2019s scope. Global variables. var globalVariable = &#8216;Global variable.&#8217;; function outerFunction() { var outerFunctionVariable = &#8216;Outer function variable.&#8217;; function [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-1741","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/comments?post=1741"}],"version-history":[{"count":2,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1741\/revisions"}],"predecessor-version":[{"id":1744,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1741\/revisions\/1744"}],"wp:attachment":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/media?parent=1741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/categories?post=1741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/tags?post=1741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}