Is it true that when you return from a callback in JavaScript, it gives back

Question

Is it true that when you return from a callback in JavaScript, it gives back

Here's the code I'm working with:

function retrieveSocialCount(type, filePath, executeCallback){
    var request = new XMLHttpRequest();
    request.onload = function(){
        if(request.status === 200 && request.readyState === 4){
            var countResponse = JSON.parse(request.responseText);
            executeCallback(countResponse);
        }
    }
    request.open("GET","../scripts/php/getSocialCount.php",false);
    request.send();
}
var result = retrieveSocialCount("img", "example.png", function(count){
    return count;
});

console.log(result);

However, when I try to use result, it turns out to be undefined. The AJAX call is successful and returns an object. Any ideas on what might be causing this issue?

javascript ajax callback return undefined

Answer 1

Answer №1

Your test returns the value of fetchSocialCount, which is currently undefined because it does not have a return statement.

You can update your code like this:

function fetchSocialCount(type, fileSrc) {
    var req = new XMLHttpRequest()
        , result = null;

    req.onload = function(){
        if(req.status === 200 && req.readyState === 4){
            result = JSON.parse(req.responseText);
        }
    }
    req.open("GET","../scripts/php/returnSocialCount.php",false);
    req.send();

    return result;
}

Since you are using a synchronous request, you should be able to directly return the result from it. Returning from the callback as you are currently doing will not work effectively, as pointed out by @Trolleymusic in the comments

The callback only returns to its immediate caller, in this case callback(countResponse), and not beyond that

Answer 2

Your test returns the value of fetchSocialCount, which is currently undefined because it does not have a return statement.

You can update your code like this:

function fetchSocialCount(type, fileSrc) {
    var req = new XMLHttpRequest()
        , result = null;

    req.onload = function(){
        if(req.status === 200 && req.readyState === 4){
            result = JSON.parse(req.responseText);
        }
    }
    req.open("GET","../scripts/php/returnSocialCount.php",false);
    req.send();

    return result;
}

Since you are using a synchronous request, you should be able to directly return the result from it. Returning from the callback as you are currently doing will not work effectively, as pointed out by @Trolleymusic in the comments

The callback only returns to its immediate caller, in this case callback(countResponse), and not beyond that

Is it true that when you return from a callback in JavaScript, it gives back

Answer №1

Similar questions

It appears that the flex-grow property is not functioning as expected

What is the best way to clear an arrayList when an error occurs in the ajax response?

Utilizing JQuery UI autocomplete for dynamically loaded textbox using AJAX

How can I efficiently utilize HTML/CSS/JS to float items and create a grid that accommodates expandable items while minimizing wasted space?

activate the button once valid input has been provided

Looking to bring in a non-ES6 library into VueJS without using export statements

What is the best way to retrieve the result of a JavaScript function in an HTML form?

Next.js components do not alter the attributes of the div element

Using TypeScript's union type to address compatibility issues

The variable fails to receive the AJAX response

Is it advisable to use npm devDependencies in a production environment?

Under specific circumstances, it is not possible to reset a property in vue.js

Automatically simulate the pressing of the enter key in a text field upon page load using Javascript

Sharing tips for sending error objects to a socket.io callback

What are the steps to effectively populate a mongoose schema?

React application not functioning on localhost:3000 despite successful compilation with no errors, only displaying the title on localhost but failing to show any content

Why is it possible for a callback function to successfully add data to mongoDB even after the client has been closed?

Creating an active tab using Material UI on a particular route

Error: Angular7 Unable to locate namespace 'google'

What is the procedure for obtaining an Observable for an Event?