{"id":736,"date":"2019-08-24T02:49:31","date_gmt":"2019-08-24T02:49:31","guid":{"rendered":"http:\/\/www.projectimmerse.com\/blog\/?p=736"},"modified":"2020-06-15T11:46:10","modified_gmt":"2020-06-15T11:46:10","slug":"using-var-in-javascript","status":"publish","type":"post","link":"https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/","title":{"rendered":"Using var in Javascript"},"content":{"rendered":"\r\n

So a little bit of history 101 when it comes to the ‘var’<\/strong> keyword in Javascript. Back when Javascript was super weird, I mean Javascript is still weird don’t get me wrong. For this reason I started liking Javascript – I used to think it was just to messy of a language to write in. I had some major trust issues with it, my relationship with PHP was far better. Alright enough with relationships, let’s dive right in.<\/p>\r\n\r\n\r\n\r\n

Again, all credit goes to Tech Sith<\/a> for making this all possible<\/a>. I just seem to be on a roll on this Javascript series so why not finish it you know.<\/p>\r\n\r\n

Function Scope<\/h2>\r\n

Javascript eats, sleeps and breathes functions – it’s all over the place. It’s important to understand that the ‘var’ keyword is so interrelated to functions in javascript. This sets Javascript apart from other languages in how functions are composed and where variable’s are lexically declared.<\/p>\r\n\r\n

Below is a great example of how Javascript variables are functionally scoped. \r\n\r\n

\r\n\r\nvar x = function() {\r\n\r\n\r\n        if (true) {\r\n                \/\/ this should not be available\r\n                \/\/ outside this if block\r\n                var y = 1; \r\n        }\r\n\r\n        console.log(y); \/\/ but it is available!\r\n\r\n}\r\n\r\nx(); \/\/ Output is 1\r\n\r\n<\/pre> \r\n\r\n
Lexical Scoping<\/h2>\r\n
This basically means that variables declared outside a function are available inside inside another function. Check out the below example, we moved a few things around a bit.<\/p>\r\n\r\n
\r\n\r\nvar x = function() {\r\n        \/\/ this variable is available everywhere \r\n        \/\/ within this function\r\n        var y = 1;\r\n\r\n        var z = function() {\r\n                \/\/ y is available here too!\r\n                console.log(y);\r\n        }\r\n\r\n        z();\r\n\r\n\r\n}\r\n\r\nx(); \/\/ Outputs 1\r\n\r\n<\/pre>\r\n\r\n
Hoisting and Scope – Interview Question<\/h2>\r\n
To end this post, I’m going provide a tricky scenario that’s mostly to come up in a Javascript interview. A simple yet fundamental example that can throw any developer off his\/her game.<\/p>\r\n\r\n
\r\n\r\n\/\/ \r\nvar y = 2;\r\n  \r\nvar x = function() {\r\n\r\n        \/\/ this will look for y\r\n        \/\/ but the closest variable \r\n        \/\/ is right underneath it\r\n        \/\/ but... it's defined after calling it\r\n        console.log(y);\r\n\r\n        \/\/ this function will ignore\r\n        \/\/ y variable sitting outside \r\n        var y = 1;\r\n\r\n\r\n}\r\n\r\nx(); \/\/ Output is undefined\r\n\r\n<\/pre>\r\n\r\n
That was a little tricky. I’ll admit this got me the first time and hey if you got it wrong too, there’s nothing to be ashamed of. I expected the output would be “2”, but since Javascript operates by going down a “scope chain” – it first tries to call the nearest variable lexically. However in this case, the variable is defined after it’s called so this would result in undefined.<\/p>\r\n\r\n
In closing, understanding super simple fundamental concepts like this can really improve your program, enforce clean code and eliminate any confusion. Stay tuned for more advanced Javascript topics. I’m really excited to cover “function currying”<\/strong> in my next post! Keep immersing!<\/p>\r\n\r\n\r\n\r\n\r\n\r\n
<\/p>\r\n","protected":false},"excerpt":{"rendered":"
So a little bit of history 101 when it comes to the ‘var’ keyword in Javascript. Back when Javascript was super weird, I mean Javascript is still weird don’t get me wrong. For this reason I started liking Javascript – I used to think it was just to messy of a language to write in. … <\/p>\n
Continue reading “Using var in Javascript”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1102,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"\nUsing var in Javascript - Project Immerse<\/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.projectimmerse.com\/blog\/using-var-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using var in Javascript - Project Immerse\" \/>\n<meta property=\"og:description\" content=\"So a little bit of history 101 when it comes to the ‘var’ keyword in Javascript. Back when Javascript was super weird, I mean Javascript is still weird don’t get me wrong. For this reason I started liking Javascript – I used to think it was just to messy of a language to write in. … Continue reading "Using var in Javascript"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Immerse\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-24T02:49:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-15T11:46:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/08\/using-var-in-javascript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"projectimmerse\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"projectimmerse\" \/>\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.projectimmerse.com\\\/blog\\\/using-var-in-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/using-var-in-javascript\\\/\"},\"author\":{\"name\":\"projectimmerse\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\"},\"headline\":\"Using var in Javascript\",\"datePublished\":\"2019-08-24T02:49:31+00:00\",\"dateModified\":\"2020-06-15T11:46:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/using-var-in-javascript\\\/\"},\"wordCount\":463,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/using-var-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/using-var-in-javascript.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/using-var-in-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/using-var-in-javascript\\\/\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/using-var-in-javascript\\\/\",\"name\":\"Using var in Javascript - Project Immerse\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/using-var-in-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/using-var-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/using-var-in-javascript.png\",\"datePublished\":\"2019-08-24T02:49:31+00:00\",\"dateModified\":\"2020-06-15T11:46:10+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/using-var-in-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/using-var-in-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/using-var-in-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/using-var-in-javascript.png\",\"contentUrl\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/using-var-in-javascript.png\",\"width\":750,\"height\":750,\"caption\":\"Using var in javascript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/using-var-in-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using var in Javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/\",\"name\":\"Project Immerse\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/#\\\/schema\\\/person\\\/c53f2864be524ee6fa08a7e4800dd1e5\",\"name\":\"projectimmerse\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g\",\"caption\":\"projectimmerse\"},\"url\":\"https:\\\/\\\/www.projectimmerse.com\\\/blog\\\/author\\\/projectimmerse\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using var in Javascript - Project Immerse","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.projectimmerse.com\/blog\/using-var-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Using var in Javascript - Project Immerse","og_description":"So a little bit of history 101 when it comes to the ‘var’ keyword in Javascript. Back when Javascript was super weird, I mean Javascript is still weird don’t get me wrong. For this reason I started liking Javascript – I used to think it was just to messy of a language to write in. … Continue reading \"Using var in Javascript\"","og_url":"https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/","og_site_name":"Project Immerse","article_published_time":"2019-08-24T02:49:31+00:00","article_modified_time":"2020-06-15T11:46:10+00:00","og_image":[{"width":750,"height":750,"url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/08\/using-var-in-javascript.png","type":"image\/png"}],"author":"projectimmerse","twitter_card":"summary_large_image","twitter_misc":{"Written by":"projectimmerse","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/"},"author":{"name":"projectimmerse","@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5"},"headline":"Using var in Javascript","datePublished":"2019-08-24T02:49:31+00:00","dateModified":"2020-06-15T11:46:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/"},"wordCount":463,"commentCount":0,"image":{"@id":"https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/08\/using-var-in-javascript.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/","url":"https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/","name":"Using var in Javascript - Project Immerse","isPartOf":{"@id":"https:\/\/www.projectimmerse.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/08\/using-var-in-javascript.png","datePublished":"2019-08-24T02:49:31+00:00","dateModified":"2020-06-15T11:46:10+00:00","author":{"@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5"},"breadcrumb":{"@id":"https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/#primaryimage","url":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/08\/using-var-in-javascript.png","contentUrl":"https:\/\/www.projectimmerse.com\/blog\/wp-content\/uploads\/2019\/08\/using-var-in-javascript.png","width":750,"height":750,"caption":"Using var in javascript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.projectimmerse.com\/blog\/using-var-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.projectimmerse.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using var in Javascript"}]},{"@type":"WebSite","@id":"https:\/\/www.projectimmerse.com\/blog\/#website","url":"https:\/\/www.projectimmerse.com\/blog\/","name":"Project Immerse","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.projectimmerse.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.projectimmerse.com\/blog\/#\/schema\/person\/c53f2864be524ee6fa08a7e4800dd1e5","name":"projectimmerse","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4d06955033d6227bfdcf30014e457e4334f7deeb73907de49b65ec2484921931?s=96&d=mm&r=g","caption":"projectimmerse"},"url":"https:\/\/www.projectimmerse.com\/blog\/author\/projectimmerse\/"}]}},"_links":{"self":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/comments?post=736"}],"version-history":[{"count":7,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/736\/revisions"}],"predecessor-version":[{"id":744,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/posts\/736\/revisions\/744"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/media\/1102"}],"wp:attachment":[{"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/media?parent=736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/categories?post=736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.projectimmerse.com\/blog\/wp-json\/wp\/v2\/tags?post=736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}