Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to return a string object from a function to another function?

console.log within myFunction() correctly shows its output. However when the function is called from another function, it’s showing String{”} from console.log.

I’m pretty new to javascript. Any advice would be appreciated.

console.log screenshot

export default class ShippingEstimator {

    constructor($element, shippingErrorMessages) {
...
        this.initFormValidation();
    }

    initFormValidation() {
...
        $('.shipping-estimate-submit', this.$element).on('click', event => {
            if (this.shippingValidator.areAll('valid')) {
                console.log(this.myFunction()); // this outputs String {''}
                return;
            }
        });
    }

    myFunction() {
        var str = new String("");
        utils.api.cart.getCart({}, (err, response) => {
            for (let i = 0; i < response.lineItems.physicalItems.length; i++) {
                str = str + '{' + response.lineItems.physicalItems[i].sku + '}|{' + response.lineItems.physicalItems[i].quantity + '}'; 
            }          
            console.log(str); //this outputs correct data
        });     
        return str;  
    }
}

I tried using string primitive instead of string object. Again, console.log within myFunction() shows correct output while console.log of its return value from a sibling function shows up as undefined.

Tags:

3

Answers


  1. 0

    You are getting a string output because the function myFunction returns str and according to your definition, str = new String("");

    Login or Signup to reply.
  2. 0

    You using api request, and work with network its async thing.
    So, your request callback calls after you returns string, you need use promises, here can help async/await.

    Login or Signup to reply.
  3. 0

    Look at this part here in your code:

            utils.api.cart.getCart({}, (err, response) => {
            for (let i = 0; i < response.lineItems.physicalItems.length; i++) {
                str = str + '{' + response.lineItems.physicalItems[i].sku + '}|{' + response.lineItems.physicalItems[i].quantity + '}'; 
            }          
            console.log(str); //this outputs correct data
        });     
        return str;

    What’s happening here is that utils.api.cart.getCart() has a callback function. That’s the (err, response) => { part.

    That callback function only executes once whenever getCart is done.
    Your code is currently executing getCart which takes a little while, but the code is immediately returning str which is empty. getCart isn’t done yet.

    What you need here is some async/await code, i.e. promises. Sounds like you may be new to javascript, but don’t worry promises aren’t too hard to wrap your head around.

    Start out by reading this: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises.

    Then follow up with looking at the MDN pages for async and await.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search