{"id":206875,"date":"2019-11-13T12:35:46","date_gmt":"2019-11-13T12:35:46","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=206875"},"modified":"2019-11-16T08:05:44","modified_gmt":"2019-11-16T08:05:44","slug":"variables-scope-and-hoisting-in-javascript","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/variables-scope-and-hoisting-in-javascript\/","title":{"rendered":"Variable’s scope and Hoisting in JavaScript"},"content":{"rendered":"\n

Curious about scope of variables? Wanna understand how actually JS variables work? You must read this blog.<\/p>\n\n\n

Variable Scope
<\/strong>A variable\u2019s scope is the context in which the variable exists. The scope specifies from where you can access a variable and whether you have access to the variable in that context.<\/p>\n

Instead of block-level scope, JS has the function-level scope. What does this mean exactly? let’s go through an example of No block-level scope<\/strong><\/p>\n\n\n

var codeWrittenBy = \"Shubham\";\nif (codeWrittenBy) {\n    codeWrittenBy = \"Mehrotra\";\n}\nconsole.log(codeWrittenBy); \/\/ Mehrotra<\/pre>\n\n\n\n
as ( if<\/em><\/code> statement ) has block-level scope so it has access to the global variable and will override codeWrittenBy<\/em><\/code> variable.<\/p>\n\n\n\n

function-level scope<\/strong><\/p>\n\n\n\n
var codeWrittenBy = "Shubham";\n(function changeName() {\n    var codeWrittenBy = "Mehrotra"; \/\/ local variable; only accessible in this changeName function\n    console.log(codeWrittenBy); \/\/ Mehrotra\n})()\nconsole.log(codeWrittenBy); \/\/ Shubham<\/pre>\n\n\n\n
Here, the function changeName<\/em><\/code> has its own scope and you can create a local variable with the same name. Moreover, if you are not making this variable local then this variable will access to the global variable. see below:- <\/p>\n\n\n\n

Note:- <\/strong> As functionchangeName<\/em><\/code><\/code> is a self-invoking function, so we don’t need to call it. Get more knowledge about the self-invoking functions here<\/a><\/strong>.<\/p>\n\n\n\n
var codeWrittenBy = "Shubham";\n(function changeName() {\n    codeWrittenBy = "Mehrotra"; \/\/ global variable; accessible in this changeName function\n    console.log(codeWrittenBy); \/\/ Mehrotra\n})()\nconsole.log(codeWrittenBy); \/\/ Mehrotra<\/pre>\n\n\n\n
We should always define the scope of the variables and try to access the local ones. We must try to write functions that may not affect the value of global variables.<\/p>\n\n\n
Variable Hoisting<\/strong><\/p>\n
All the variables in javascript are hoisted to the top of the function, let’s understand with the help of an example.<\/p>\n
<\/p>\n\n\n
(function() {\n    console.log(`company:- ${company}`); \/\/ name:- undefined\n    var company = "WEBKUL";\n    console.log(`company:- ${company}`); \/\/ name:- WEBKUL\n})()<\/pre>\n\n\n\n
This is because the declaration of the variable name<\/code> was done on the top of the function and assigned to the value undefined therefore we are getting undefined as the result of the first console.log<\/p>\n\n\n\n
NOTE:-<\/strong> The syntax I have used for string concatenation inside the console.log<\/code> is known as template literal<\/em><\/strong>. Explore more on template literals here<\/a>.<\/p>\n\n\n\n
functions in JS are hoisted too but there is a difference, functions have their definition but variable have the default value (undefined).  That’s why we are able to call any function before their declaration.<\/p>\n\n\n\n
showName();\nfunction showName () {\n    console.log(`Shubham Mehrotra`);\n}\n\/\/ Shubham Mehrotra<\/pre>\n\n\n\n
NOTE:-<\/strong> You should try to use anonymous functions most of the time instead of the named functions.
As a result, you will call the function’s definition into the memory when it is actually needed.<\/p>\n\n\n\n
\/\/ Anonymous function\nanonFunc(); \/\/ Exception:- showName is not a function\nvar anonFunc = function () {\n    console.log("anon. function");\n}\n\n\/\/ Named function\nnamedFunc(); \/\/ named function\nfunction namedFunc() {\n    console.log("named function");\n}<\/pre>\n\n\n\n
Thanks for reading me. I hope this blog would help you with a better understanding of the JS variable’s scope and hoisting. Please share your reviews on this, which will support me to write more.

Until next time. \ud83d\udc4b<\/p>\n","protected":false},"excerpt":{"rendered":"
Curious about scope of variables? Wanna understand how actually JS variables work? You must read this blog. Variable ScopeA variable\u2019s scope is the context in which the variable exists. The scope specifies from where you can access a variable and whether you have access to the variable in that context. Instead of block-level scope, JS […]<\/a><\/p>\n","protected":false},"author":213,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[198],"tags":[2064,6960],"class_list":["post-206875","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript","tag-variable"],"yoast_head":"\nScope of variables and hoisting of functions, variable<\/title>\n<meta name=\"description\" content=\"Explore the scope of javascript variables and how functions and variables are hoisted. That will be helpful in understanding the javascript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scope of variables and hoisting of functions, variable\" \/>\n<meta property=\"og:description\" content=\"Explore the scope of javascript variables and how functions and variables are hoisted. That will be helpful in understanding the javascript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-13T12:35:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-16T08:05:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Shubham Mehrotra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shubham Mehrotra\" \/>\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:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/variables-scope-and-hoisting-in-javascript\/\"},\"author\":{\"name\":\"Shubham Mehrotra\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/27789e00ba738363948a0ce8a6fb2067\"},\"headline\":\"Variable’s scope and Hoisting in JavaScript\",\"datePublished\":\"2019-11-13T12:35:46+00:00\",\"dateModified\":\"2019-11-16T08:05:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/variables-scope-and-hoisting-in-javascript\/\"},\"wordCount\":381,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"JavaScript\",\"variable\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/variables-scope-and-hoisting-in-javascript\/\",\"url\":\"https:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/\",\"name\":\"Scope of variables and hoisting of functions, variable\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2019-11-13T12:35:46+00:00\",\"dateModified\":\"2019-11-16T08:05:44+00:00\",\"description\":\"Explore the scope of javascript variables and how functions and variables are hoisted. That will be helpful in understanding the javascript.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Variable’s scope and Hoisting in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/27789e00ba738363948a0ce8a6fb2067\",\"name\":\"Shubham Mehrotra\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a47ef687815aac75e518d9389db8f8c31371b29175f0b7664d739bc99191165c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a47ef687815aac75e518d9389db8f8c31371b29175f0b7664d739bc99191165c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Shubham Mehrotra\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/shubhammehrotra-symfony\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Scope of variables and hoisting of functions, variable","description":"Explore the scope of javascript variables and how functions and variables are hoisted. That will be helpful in understanding the javascript.","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:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Scope of variables and hoisting of functions, variable","og_description":"Explore the scope of javascript variables and how functions and variables are hoisted. That will be helpful in understanding the javascript.","og_url":"https:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2019-11-13T12:35:46+00:00","article_modified_time":"2019-11-16T08:05:44+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Shubham Mehrotra","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Shubham Mehrotra","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/variables-scope-and-hoisting-in-javascript\/"},"author":{"name":"Shubham Mehrotra","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/27789e00ba738363948a0ce8a6fb2067"},"headline":"Variable’s scope and Hoisting in JavaScript","datePublished":"2019-11-13T12:35:46+00:00","dateModified":"2019-11-16T08:05:44+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/variables-scope-and-hoisting-in-javascript\/"},"wordCount":381,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["JavaScript","variable"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/variables-scope-and-hoisting-in-javascript\/","url":"https:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/","name":"Scope of variables and hoisting of functions, variable","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2019-11-13T12:35:46+00:00","dateModified":"2019-11-16T08:05:44+00:00","description":"Explore the scope of javascript variables and how functions and variables are hoisted. That will be helpful in understanding the javascript.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/variable's-scope-and-hoisting-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Variable’s scope and Hoisting in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/27789e00ba738363948a0ce8a6fb2067","name":"Shubham Mehrotra","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a47ef687815aac75e518d9389db8f8c31371b29175f0b7664d739bc99191165c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a47ef687815aac75e518d9389db8f8c31371b29175f0b7664d739bc99191165c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Shubham Mehrotra"},"url":"https:\/\/webkul.com\/blog\/author\/shubhammehrotra-symfony\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/206875","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=206875"}],"version-history":[{"count":25,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/206875\/revisions"}],"predecessor-version":[{"id":207569,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/206875\/revisions\/207569"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=206875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=206875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=206875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}