CODEWITHSUNDEEP
javascriptvariablesglobal-variables
ian
ian

Reputation: 12335

Using a global variable in JavaScript

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?

Upvotes: 7

Views: 42577

Answers (7)

CADSolutionsUK
CADSolutionsUK

Reputation: 41

I’ve come across this answer in 2020 and after searching some more online I have found that apparently in the JavaScript definitions if you place variables outside of functions or even create a file called globals.js and just put all your globally required variables in that file, make that file the first user .js file in your script tags after jQuery and any other plugins you need, globals will load before your other scripts and allow you to call variables from globals.js within any script on the page.

W3C JavaScript Scope

I have tested this theory within a PHP application that I am building and I have been able to call variables from the globals.js file within a page that is loaded via Ajax to a jconfirm dialog for a troubleshooting wizard to set up the return values for when the dialog is closed.

Upvotes: 0

Muthukumar
Muthukumar

Reputation: 654

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
}

Upvotes: 2

Kuldip D Gandhi
Kuldip D Gandhi

Reputation: 385

You can also access it in any function like window.number, after removing var inside the function.

Upvotes: 1

kemiller2002
kemiller2002

Reputation: 115538

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;

Upvotes: 12

zombat
zombat

Reputation: 94237

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] + '');
}

Upvotes: 15

Babak Naffas
Babak Naffas

Reputation: 12571

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]+'');
}

Upvotes: 2

SLaks
SLaks

Reputation: 888087

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.

Upvotes: 3

Related Questions