HowToDoInJava

  • Python
  • Java
  • Spring Boot
  • Dark Mode
Home / JavaScript / JavaScript Variable Scope Rules You Must Know

JavaScript Variable Scope Rules You Must Know

Every programming language has variables, and they can be accesses within certain scope only. With JavaScript, scope is little tricky feature. They are very simple looking, but can go wrong if you are not aware of how exactly javascript variables are scoped. Let’s learn about scope in javascript in little more detail.

In JavaScript, variables are scoped in two ways ONLY:

  1. Global Scope
  2. Functional Scope

Just remember that scopes in JavaScript are declared when you define a variable with var keyword. Let’s start by simple one – global scope variables in java.

Global Scope

A variable declared in javascript will be of global scope when –

a) Variable defined outside any function

//'foo' is global variable
var foo = 'I am GLOBAL foo';

//'foo' is function local variable
function test() {
    var foo = 'I am LOCAL foo';
}

console.log(foo); //I am GLOBAL foo

Variable defined inside any function – without using ‘var’ keyword

//'foo' is function local variable
function test() {
    foo = 'I am GLOBAL foo';
}

console.log(foo); //I am GLOBAL foo
console.log(window.foo); //I am GLOBAL foo

All globally scoped variables are visible as properties of the window object.

Functional Scope

As it’s clear from global scope detail, function scope variables are declared using ‘var’ keyword inside a function.

//'foo' is function local variable
function test() {
    var foo = 'I am LOCAL foo';
    console.log(foo); //I am LOCAL foo
}

console.log(foo); //foo is not defined

Please note that javascript functions have their own scope, but blocks (such as while, if, and for statements) do not.

Mixing global and function scope variables

Now, after basic understanding, let’s see an example where we will be using variable ‘foo’ in different scopes in single page and then we will clear on exactly how javascript scope works.

//Define global scoped 'foo'
var foo = 'I am GLOBAL foo';

//Inside if block foo will refer to global foo
if ( true ) {
    var foo = 'I am GLOBAL foo TOO';
    console.log( foo ); 		//I am GLOBAL foo TOO
}

//As blocks do not have their own scope
//So foo in if block referred to global scope foo
//foo refer to new value
console.log( foo );  			//I am GLOBAL foo TOO

//Inside function - foo has it's own declaration
function test() {
    var foo = 'I am LOCAL foo';
    console.log( foo );  		//I am LOCAL foo
}

test();

//Ouside function foo is still globally declared foo
console.log( foo );				//I am GLOBAL foo TOO

See how foo declared only inside function has it’s own scope, otherwise all foo variables refer to global scope foo.

TIP: You should ALWAYS initialize variables with var, regardless of scope. This way, your variables will have the scope you expected, and you can avoid accidental globals.

I hope I was able to bring more clarity when we talk about scope of javascript variables. Drop me you questions in comments section.

Happy Learning !!

Was this post helpful?

Let us know if you liked the post. That’s the only way we can improve.
TwitterFacebookLinkedInRedditPocket

About Lokesh Gupta

A family guy with fun loving nature. Love computers, programming and solving everyday problems. Find me on Facebook and Twitter.

Comments are closed on this article!

Search Tutorials

JavaScript / jQuery Tutorials

  • Ajax Tutorial
  • jQuery – Ajax
  • jQuery – Deep Cloning
  • jQuery – Selectors
  • jQuery – All Selector
  • jQuery – Cut, Copy or Paste Events
  • jQuery – ENTER Key Press Event
  • jQuery – Keypress vs. Keydown
  • jQuery – Funny Discussion on SO
  • JavaScript – Equality vs Identity
  • JavaScript – Variable Scope Rules
  • JavaScript – Global Variables
  • JavaScript – MVC and PubSub
  • JavaScript – DOM vs. jQuery Objects
  • JavaScript – Unit Test with Jasmine
  • JavaScript – Information Masking

Meta Links

  • About Me
  • Contact Us
  • Privacy policy
  • Advertise
  • Guest and Sponsored Posts

Recommended Reading

  • 10 Life Lessons
  • Secure Hash Algorithms
  • How Web Servers work?
  • How Java I/O Works Internally?
  • Best Way to Learn Java
  • Java Best Practices Guide
  • Microservices Tutorial
  • REST API Tutorial
  • How to Start New Blog

Copyright © 2020 · HowToDoInjava.com · All Rights Reserved. | Sitemap

  • Sealed Classes and Interfaces