How can you retrieve a value from a JavaScript closure function?

Question

How can you retrieve a value from a JavaScript closure function?

I'm struggling with getting a value from a closure function in Javascript. In my initial attempt, I placed the return statement inside the inner function, but it was not effective. Then, I tried moving the return statement to the outer function, however, the result still came back as undefined. Is there a reason why returnVal remains without a value when returned from the outer function even though it is assigned a value within the inner function?

console.log('Returned: ' + getColumn('CPC'));

function getColumn(header) {
  var returnVal = undefined;

  ptor.findElements(protractor.By.className('ngHeaderText')).then(function(headers) {

    for (var i = 0; i < headers.length; i++) {
      (function(i){
        headers[i].getText().then(function(headerResult) {
          if (headerResult == header) {
            console.log('i: ' + i);
            returnVal = i;
          }
        });
      })(i);
    }
  });

  return returnVal;
};

I would greatly appreciate any assistance on this matter!

EDIT: moved the return statement

javascript angularjs function protractor

Answer 1

Answer №1

In JavaScript, a "non-local return" where an inner function returns to an outer function is not possible.

The issue at hand is not with closures, but rather with the need to structure your control flow using promises. Unlike languages like C# or Python that pause the current function when making an async request, JavaScript continues executing without waiting for the request to complete. This results in calling code to initiate an async request and returning undefined before the request finishes. The solution is to return a promise immediately (instead of undefined) and handle all control flow within the promise event handler using promise-specific methods. While it may be inconvenient that return and for loops behave differently in JavaScript compared to other languages, adapting to this nuance is necessary until widespread adoption of ES6 generators.

Your getColumn function should return a promise that includes the value of the column instead of doing computations without returning anything:

function getColumn(header){
     return ptro.findElements(...);
   // ^^^^^ 
}

Additionally, inserting async code directly inside a loop is not standard practice. You must decide whether to execute requests sequentially (fetching one header after another) or concurrently (initiating all header requests simultaneously and awaiting all results). Implementation will vary based on manual processing requirements and chosen promise library.

If opting for sequential processing, recursion can replace traditional for loops:

then(function(headers) {

    function loop(i){
        if( i >= headers.length) {
            return null; //not found
        }else{
            return headers[i].getText().then(function(headerResult) {
                if (headerResult == header) {
                    console.log('i: ' + i);
                    return i;
                }else{
                    return loop(i+1);
                }
             });
         }
     }

     return loop(0);
});

Performing parallel requests will slightly differ depending on the promise library used, with most libraries offering functions designed for such scenarios.

Answer 2

In JavaScript, a "non-local return" where an inner function returns to an outer function is not possible.

The issue at hand is not with closures, but rather with the need to structure your control flow using promises. Unlike languages like C# or Python that pause the current function when making an async request, JavaScript continues executing without waiting for the request to complete. This results in calling code to initiate an async request and returning undefined before the request finishes. The solution is to return a promise immediately (instead of undefined) and handle all control flow within the promise event handler using promise-specific methods. While it may be inconvenient that return and for loops behave differently in JavaScript compared to other languages, adapting to this nuance is necessary until widespread adoption of ES6 generators.

Your getColumn function should return a promise that includes the value of the column instead of doing computations without returning anything:

function getColumn(header){
     return ptro.findElements(...);
   // ^^^^^ 
}

Additionally, inserting async code directly inside a loop is not standard practice. You must decide whether to execute requests sequentially (fetching one header after another) or concurrently (initiating all header requests simultaneously and awaiting all results). Implementation will vary based on manual processing requirements and chosen promise library.

If opting for sequential processing, recursion can replace traditional for loops:

then(function(headers) {

    function loop(i){
        if( i >= headers.length) {
            return null; //not found
        }else{
            return headers[i].getText().then(function(headerResult) {
                if (headerResult == header) {
                    console.log('i: ' + i);
                    return i;
                }else{
                    return loop(i+1);
                }
             });
         }
     }

     return loop(0);
});

Performing parallel requests will slightly differ depending on the promise library used, with most libraries offering functions designed for such scenarios.

Answer 3

Answer №2

Your reasoning is accurate - you have the ability to return a value from an internal function to an external function, and then return that same value from the external function. To illustrate this concept more clearly, here is a simplified version of your code:

console.log('Result: ' + getColumn());

function getColumn() {

  var returnValue = undefined;
  (function(){
      returnValue = 'example';     
  })();  

  return returnValue;
};

When executed, this will display the message in the console:

Result: example

The issue lies in the fact that you are only returning from the function specified in when(), rather than the encompassing function it resides within.

Answer 4

Your reasoning is accurate - you have the ability to return a value from an internal function to an external function, and then return that same value from the external function. To illustrate this concept more clearly, here is a simplified version of your code:

console.log('Result: ' + getColumn());

function getColumn() {

  var returnValue = undefined;
  (function(){
      returnValue = 'example';     
  })();  

  return returnValue;
};

When executed, this will display the message in the console:

Result: example

The issue lies in the fact that you are only returning from the function specified in when(), rather than the encompassing function it resides within.

How can you retrieve a value from a JavaScript closure function?

Answer №1

Answer №2

Similar questions

Issue with React and Mongoose: State Change Not Being Saved

I'm having trouble displaying the content of my list items within the div

What are the steps to retrieve JSON data and display it using an unordered list in an HTML document?

Troubleshooting issues with Vue.js page routing

Utilizing Javascript to Generate a Comma-Separated List from Multiple Select Elements

Displaying an array within a method using Vue.js

ng-repeat not functioning properly with data defined in XMLHttpRequest

Retrieve data from FileReader's onload event asynchronously in Javascript

Tips for passing a function to express-handlebars within a node.js-express application

Having difficulty applying parseFloat directly following a JSON Stringify operation

Resetting the Angular provider configuration whenever the service is injected into a different location

Is the HTML5 type of button functioning properly, while the type of submit is not working as

Angular credit card filter with replacement

I am unable to display my JSON data in Next.js using a fetch request

What is the best way to set one property to be the same as another in Angular?

Properly handling the use of single and double quotation marks in variable declarations within a JavaScript file

Transmit JavaScript code from ASP.NET

Protractor: What is the best way to retrieve the baseUrl from the command line input?

Trouble with parsing dates in JavaScript using Moment.js

Utilizing Moment.js: Transforming 12-hour format to a Date object