Using a global variable in JavaScript

Question

How do I do this?

My code is something like this:

var number = null;

function playSong(artist, title, song, id)
{
    alert('old number was: ' + [number] + '');

    var number = '10';

    alert('' + [number] + '');
}

The first alert always returns 'old number was: ' and not 10. Shouldn't it return 10 on both alerts on the second function call?

Solution 1

By using var when setting number = '10', you are declaring number as a local variable each time. Try this:

var number = null;

function playSong(artist, title, song, id)
{
    alert('old number was: ' + [number] + '');

    number = '10';

    alert('' + [number] + '');
}

Solution 2

Remove the var in front of number in your function. You are creating a local variable by

var number = 10;

You just need

number = 10;

Solution 3

The problem is that you're declaring a new variable named number inside of the function. This new variable hides the global number variable, so the line number = 10 assigns only to this new local variable.

You need to remove the var keyword from var number = 10.

Solution 4

Like in C, you need to define your variable outside of the function/method to make it global.

var number = 0;

function playSong(artist,title,song,id)
{
    alert('old number was: '+[number]+'');
    number = '10';
    alert(''+[number]+'');
}

Solution 5

Let me explain in detail. To declare global variables and local variables in JavaScript

var firstNumber = 5; // Local variable
secondNumber = 10; // Global variable or window object

When your program is like this

var number = 1;
function playSong() {
    alert(number);
    var number = 2;
    alert(number);
}

As per the JavaScript compiler, all declarations/initializations of variables will move to the top. This concept is called hoisting.

As per the compiler, the program will execute like:

var number; // Declaration will move to top always in Javascript
number = 1;
function playSong() {
    var number;
    alert(number); // Output: undefined - This is a local variable inside the function
    number = 2;
    alert(number); // Output: 2
}

If you need to access the global variable inside the function, use window.number.

var number = 1;
function playSong() {
   var number = 2;
   alert(window.number); // Output: 1   - From a global variable
   alert(number); // Output: 2   - From local variable
}

View more solutions

Comments

[Babak Naffas]

It's reassuring to see the same answer posted within the same minute.

[Brian Ramsay]

Actually, any definition without 'var' will be a global variable, regardless of where it's defined. Javascript can be scary.

[johnsnails]

How do you then access that variable out site the function playSong and get the value 10?

[Hari Swaminathan]

@johnsnails The variable is declared outside the function, so when assign number=10 its actually the global variable is referred but if we use var number = '10' in side function then it will have local scope, we wont get the value 10 outside the function.

[Peter Mortensen]

That is probably true, but perhaps say something about the context (e.g., would it work in Node.js?).