Can't change global variable inside function (JavaScript)

user_10187497 0
Viewed 11824

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.

scopes variables javascript
4 Answers

There are two things you need to know here:

  1. var result is not same as window.result so use window.result = "Test"; and not the var declaration.
  2. 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);

user_70531900

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);
user_99526050

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:

  1. In first line you are calling your function. The function sets a new result var in the window, global scope

  2. 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);

user_91779200

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.

user_12703620
Related