Can't change global variable inside function (JavaScript)

Question

I have a global variable called result and a function, with the purpose of changing the value of result. here's the code I've tried:

checkdate();

function checkdate() {
    //defining startdate,enddate,hotel_id

    $.ajax({
    method: 'GET',
    url: '/checkdate',
    data: {startdate : startdate, enddate : enddate, checkroom : 1, hotel_id : hotel_id},
    success: function(response){
        storeResponse(response);
    }
    });
}

var result = [];
function storeResponse(response) {
    window.result = response;
}
alert(result);

The alert returns nothing, however if I put the alert INSIDE the function, it returns response alright. This seems to be easy but I can't figure it out.

The function is invoked before all this code.

Be aware depending on where `var result = []` lives it won't be available on the window object. More info on the context of where that code is executing would be helpful. — ste2425, Sep 05 '18 at 10:46
Please add more code as where in code you are calling the function and where are you trying to alert — Nikhil Aggarwal, Sep 05 '18 at 10:46

Ankit Agarwal · Answer 1 · 2018-09-05T11:02:12.053

1

There are two things you need to know here:

var result is not same as window.result so use window.result = "Test"; and not the var declaration.
You need to invoke storeResponse() before alert code so that it set the new value and then get that value in alert.

window.result = "Test"; //in global scope
function storeResponse(response) {
    window.result = response;
    console.log(window);
}
storeResponse("Hello");
alert(result);

edited Sep 05 '18 at 11:02

answered Sep 05 '18 at 10:43

Ankit Agarwal

30,378
5
37
62

it is invoked before all this code, as I said, everything works fine if I put the alert INSIDE the function – HessamSH Sep 05 '18 at 10:44
@HessamShekhasnay that will always work if you put that alert inside. But you need to alert outside for which the function call will be before alert. If this did not work then post your actual code – Ankit Agarwal Sep 05 '18 at 10:46
@AnkitAgarwal please see the edited question. Thanks. – HessamSH Sep 05 '18 at 11:07

score 0 · Answer 2 · answered Sep 05 '18 at 10:44

0

You should call the function first so that the result variable is populated.

var result = []; //in global scope
function storeResponse(response) {
    window.result = response;
}
storeResponse('callSomething');
alert(result);

answered Sep 05 '18 at 10:44

undrftd

331
2
10

Damian Peralta · Answer 3 · 2018-09-05T11:04:27.157

You said you are invoking the function first, so you must have something like this:

storeResponse('someResponse');
var result = []; //in global scope
function storeResponse(response) {
    window.result = response;
}

alert(result);

The issue is the following:

In first line you are calling your function. The function sets a new result var in the window, global scope
In the second line, you are overwriting the result var: var result = []; It lets you with an empty array, that's why the alert looks empty

Try commenting the second line and it will work:

storeResponse('someResponse');
//var result = []; //in global scope
function storeResponse(response) {
    window.result = response;
}

alert(result);

Or even better, declare the var first:

var result = []; 
storeResponse('someResponse');

function storeResponse(response) {
result = response; // You don't need to use window (if the var is not declared inside the function, is global by default)
}

alert(result);

score 0 · Answer 4 · answered Sep 05 '18 at 11:05

0

Thats because AJAX is asynchronous. Meaning the code is non-blocking. Imagine the AJAX call being passed to another thread for processing while the rest of the code is executed. The alert is triggered before the AJAX request has received it's response. Thats why if you do the alert inside the callback it works.

answered Sep 05 '18 at 11:05

Cloud_Ratha

588
1
6
14

What's the solution? the goal is to store ajax response in a global variable. and other answers on stack-overflow didn't help. – HessamSH Sep 05 '18 at 11:11
It does store it. It's just not available at the point you are requesting it. You need to query the value after the response has successfully been fetched. Using events is a good use case for this. Providing a full solution is not possible with this amount of code. – Cloud_Ratha Sep 05 '18 at 11:16

Can't change global variable inside function (JavaScript)

4 Answers4