{"id":11651,"date":"2014-02-04T17:49:30","date_gmt":"2014-02-04T12:19:30","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=11651"},"modified":"2016-12-19T15:31:04","modified_gmt":"2016-12-19T10:01:04","slug":"scope-in-javascript","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/scope-in-javascript\/","title":{"rendered":"Scope In JavaScript"},"content":{"rendered":"

Many a times we get confused with scope<\/strong> in JavaScript<\/strong>, So here I am going to put some light on scope<\/strong>. There are two types of scope<\/strong> in JavaScript<\/strong>. First one is, function<\/strong> scope<\/strong> which is also called as local<\/strong> scope<\/strong>, and second one is global<\/strong> scope<\/strong>.<\/p>\n

Function<\/strong> Scope<\/strong>: In JavaScript<\/strong>, variables are defined with function<\/strong> scope<\/strong> instead of block<\/strong> scope<\/strong>. If any variable is defined in “if\/else block”<\/strong> or “for block”<\/strong> then that variable will be defined with function<\/strong> scope<\/strong> instead of block<\/strong> scope<\/strong>, i.e. it will be visible to whole function<\/strong>, unlike other programming languages where variable is defined with block<\/strong> scope<\/strong> and is visible to that block<\/strong> only.<\/p>\n

Global<\/strong> Scope<\/strong>: Variables which are defined outside the function<\/strong>, are defined with global<\/strong> scope<\/strong>. We should minimize the use of global<\/strong> scope<\/strong> variables, because if two or more than two functions\/developers are using the global variable<\/a> of same name then result may be unexpected and can lead to hard-to-find bugs. So we always declare variables with var<\/strong> keyword.<\/p>\n

Lets understand scope<\/strong> more with examples:<\/p>\n

[js]
\nvar global1 = 10; \/\/ global scope variable.
\nfunction scopeTest() {
\n var local1 = 20; \/\/ function scope variable.
\n global2 = 30; \/\/ global scope variable.
\n if(true) {
\n var local2 = 40; \/\/ function scope variable.
\n }
\n console.log(local2); \/\/ 40 (local2 variable is visible to whole function.)
\n}
\nconsole.log(global1); \/\/ 10
\nconsole.log(local1); \/\/ local1 is not defined
\nconsole.log(local2); \/\/ local2 is not defined
\n[\/js]<\/p>\n

Here local2 variable is declared in “if block”, so unlike other languages, local2 variable will be defined with function<\/strong> scope<\/strong> instead of block<\/strong> scope<\/strong>, and will be accessible in whole function<\/strong>.<\/p>\n

Note<\/strong>: if we define a variable without using the ‘var’ keyword in function<\/strong> then that variable will be not local variable i.e. it will be defined with global<\/strong> scope<\/strong> instead of function<\/strong> scope<\/strong>.This variable will be visible outside the function<\/strong> too. But global2 variable will be defined with global<\/strong> scope<\/strong> when for the first time scopeTest function<\/strong> will be invoked. Before that global2 will be not defined.<\/p>\n

[js]
\nconsole.log(global2); \/\/ global2 is not defined
\nscopeTest();
\nconsole.log(global2); \/\/ 30
\n[\/js]<\/p>\n

Lets see some twisty code.<\/p>\n

[js]
\n1. var testValue = 10;
\n2. function localScopeTest() {
\n3. console.log(testValue); \/\/ undefined
\n4. var testValue = 20;
\n5. console.log(testValue); \/\/ 20
\n6. }
\n7. localScopeTest();
\n[\/js]<\/p>\n

You might be expecting output “10 and 20”. But correct output will be “undefined and 20”, because inside the function<\/strong> “function<\/strong> scope<\/strong> variable” gets preference. You might be thinking that testValue is defined at line number 4 and we are logging its value on line number 3, so it should log global<\/strong> scope<\/strong> testValue, which is 10. But NO, JavaScript<\/strong> engine executes JavaScript<\/strong> in two steps, first it compiles the JavaScript<\/strong> then executes. At the time of compilation, it gets to know that testValue is declared in function<\/strong> scope<\/strong>, but till line number 3, its was not assigned any value so its logging undefined.<\/p>\n

Amit Kumar
\namit.kumar@intelligrape.com<\/a>
\nin.linkedin.com\/in\/amitkumar0110
\ntwitter.com\/amit_kumar0110
\nMore Blogs by Me<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Many a times we get confused with scope in JavaScript, So here I am going to put some light on scope. There are two types of scope in JavaScript. First one is, function scope which is also called as local scope, and second one is global scope. Function Scope: In JavaScript, variables are defined with […]<\/p>\n","protected":false},"author":52,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":3},"categories":[1185],"tags":[1121,1301,55,1300],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/11651"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=11651"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/11651\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=11651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=11651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=11651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}