• Friday , 22 September 2017

Local and global variables in javascript

Code Canyon



Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2014/12/local-and-global-variables-in-javascript.html

In JavaScript there are 2 types of variables
1. Local variables
2. Global variables

JavaScript local variables : Local variables are the variables declared with in a function. These variables have local scope meaning these are available only inside the function that contains them. Local variables are created when a function starts, and deleted as soon as the function completes execution.

function helloWorld()
{
var greeting = “Hello”;
// The variable greeting is available in the function
greeting = greeting + ” JavaScript”;
alert(greeting);
}

helloWorld();

// The variable greeting is not available outside the function
// Error : ‘greeting’ is undefined
alert(greeting);

JavaScript global variables : Global variables are the variables declared outside a function. Global variables have global scope meaning all scripts and functions on the page can access them. The lifetime of a global variable starts with it’s declaration and is deleted when the page is closed.

// Global variable
var greeting = “Hello”;

function helloWorld()
{
// The variable greeting is available in the function
greeting = greeting + ” JavaScript”;
alert(greeting);
}

helloWorld();

If you assign a value to a variable that has not been declared, it will automatically become a global variable, even if it is present inside a function.

function helloWorld()
{
// The variable greeting is not declared but a value is assigned.
// So it will automatically become a global variable
greeting = “Hello JavaScript”;
}

helloWorld();

// Variable greeting is available outside the function
alert(greeting);

A local variable can have the same name as a global variable. Changing the value of one variable has no effect on the other. If the variable value is changed inside a function, and if a local version of the variable exists then the local variable gets modified. If the variable value is changed outside a function then the global variable gets modified.

var greeting = “This is from global Variable”;

function helloWorld()
{
var greeting = “This is from local variable”;
document.write(greeting + “[br/]”);
}

// This line will modify the global greeting variable
greeting += “!!!”;

helloWorld();

document.write(greeting);

Output :
This is from local variable
This is from global Variable!!!

Sometimes, variable hoisting and local & global variable with the same name can cause unexpected behavior.

var greeting = “This is from global Variable”;
helloWorld();

function helloWorld()
{
document.write(greeting);
var greeting = “Hello from local variable”
}

Output :
undefined

At runtime due to variable hoisting, the above program would look more like as shown below.

var greeting = “This is from global Variable”;
helloWorld();

function helloWorld()
{
var greeting;
document.write(greeting);
greeting = “Hello from local variable”
}

Braces do not create scope in JavaScript : In the following example otherNumber is a global variable though it is defined inside braces. In many languages like C# and Java, braces create scope, but not JavaScript.

var number = 100;

if (number ] 10)
{
var otherNumber = number;
}

document.write(otherNumber);

Output : 100

Original source

3d Ocean

Related Posts

17 Comments

  1. Sam Henderson
    July 21, 2017 at 06:25

    you're a very good explainer kudvenket 🙂

  2. Sriharsha Daram
    July 21, 2017 at 06:25

    when global variables are present on top of the function, due to function hoisting, the variables should not get printed inside the function right..

  3. Abhishek Kumar
    July 21, 2017 at 06:25

    Clear explanation 🙂

  4. Dipak Kumar Vishwakarma
    July 21, 2017 at 06:25

    Dipak kumar vishwakarma

  5. zabana 16
    July 21, 2017 at 06:25

    thank you

  6. weihua zhang
    July 21, 2017 at 06:25

    AMAZING!!!

  7. Timothy Lefkowitz
    July 21, 2017 at 06:25

    I am using freecodecamp and was confused on such a simple topic as local and global var's thank you

  8. Martin Marković
    July 21, 2017 at 06:25

    Thank you this saved me 😀

  9. Azeem Yousaf
    July 21, 2017 at 06:25

    why devolper use window.variableName mostly in js? i learned that some global variables are also gives error of undefined in functions and error disappears if we use window keyword and local variables can be accessed outside of function

  10. Dylan Field
    July 21, 2017 at 06:25

    Javascript is bizzare.

  11. Manoj Karthik
    July 21, 2017 at 06:25

    Excellent!

  12. Gabi A
    July 21, 2017 at 06:25

    Thank you!

  13. Samuel Dickey
    July 21, 2017 at 06:25

    I'm writing a relatively simple script, and this video definitely helped me solve some problems.  Thanks!

  14. RONALDOLOKESH
    July 21, 2017 at 06:25

    I have one question, when u spoke abt a variable when not defined as local or global inside / outside a function it is getting assigned / treated as a global variable. I found out that in 04:19, that when i dont call at all the helloworld method and try to print the greeting either using document.write(greeting) or alert(greeting), it always threw me greeting is undefined error. But when I do call the method and again try to get the value of greeting variable it works fine. I just want to know why there is a dependency of function getting called here…. 

    Thanks,
    Lokesh

  15. manish kumar
    July 21, 2017 at 06:25

    Awesome.. Thanks a lot Sir.. This tutorial solves lots of my confusion..

  16. Abhishek Gupta
    July 21, 2017 at 06:25

    gr8 thanks

  17. Avinash Mamidi
    July 21, 2017 at 06:25

    Very Informative 

Leave A Comment

You must be logged in to post a comment.