Asynchronous callback causing changes to a JavaScript variable

Question

Asynchronous callback causing changes to a JavaScript variable

  let numbers = ["1", "2", "3"];
  const squareNumber = (i, cb) => {
    i = parseInt(i);
    setTimeout(() => cb(null, i * i), 100);
  }

  for (let i of numbers) {
    squareNumber(i, (err, result) => {
      console.log(i + " " + result);
    });
  }

  // output:
  // 3 1
  // 3 4
  // 3 9

  // expected:
  // 1 1
  // 2 4
  // 3 9

If I remove setTimeout, I can get the expected result.

Or it can be written like this:

for (let i of numbers) {
  ((i) => {
    squareNumber(i, (err, result) => {
      console.log(i + " " + result);
    });
  })(i);
}

Could this be a bug in JavaScript?

javascript

Answer 1

Answer №1

This is the modified code in Javascript that provides the same output (view fiddle here: http://jsfiddle.net/99obrntp/)

var numbers = ['1','2','3'];

function squared(num, callback){
    num = parseInt(num);
    setTimeout(function(){
        callback(null, num*num);
    }, 100);
}

for(var j=0; j<numbers.length; j++){
    var val = numbers[j];
    squared(val, function(error, res){
        console.log(val, res);
    });
}

The calculation of the squared values is accurate, but there is an issue with the console.log() function. The problem arises because the callback is not executed until after the loop finishes (due to the setTimeout function). This results in the val variable being assigned as '3' before any console outputs are made. To resolve this, you should pass the value to the callback function. Here's how:

var numbers = ['1','2','3'];

function squared(num, callback){
    num = parseInt(num);
    setTimeout(function(){
        callback(null, num*num, num);
    }, 100);
}

for(var j=0; j<numbers.length; j++){
    var val = numbers[j];
    squared(val, function(error, res, initialVal){
        console.log(initialVal, res);
    });
}

Updated fiddle link: http://jsfiddle.net/3sdjgzv1/

Answer 2

This is the modified code in Javascript that provides the same output (view fiddle here: http://jsfiddle.net/99obrntp/)

var numbers = ['1','2','3'];

function squared(num, callback){
    num = parseInt(num);
    setTimeout(function(){
        callback(null, num*num);
    }, 100);
}

for(var j=0; j<numbers.length; j++){
    var val = numbers[j];
    squared(val, function(error, res){
        console.log(val, res);
    });
}

The calculation of the squared values is accurate, but there is an issue with the console.log() function. The problem arises because the callback is not executed until after the loop finishes (due to the setTimeout function). This results in the val variable being assigned as '3' before any console outputs are made. To resolve this, you should pass the value to the callback function. Here's how:

var numbers = ['1','2','3'];

function squared(num, callback){
    num = parseInt(num);
    setTimeout(function(){
        callback(null, num*num, num);
    }, 100);
}

for(var j=0; j<numbers.length; j++){
    var val = numbers[j];
    squared(val, function(error, res, initialVal){
        console.log(initialVal, res);
    });
}

Updated fiddle link: http://jsfiddle.net/3sdjgzv1/

Asynchronous callback causing changes to a JavaScript variable

Answer №1

Similar questions

What is the best way to loop through an array of strings and make them all plural?

JavaScript: changing text to numbers within an array

JavaScript: Exploring the basics - how to insert a function argument into an empty array

Tips for creating an angularjs login page as the initial page

The execution of form validation and any following code is halted

Enabling clients to access all static files from a Node.js + Express server

What is the best way to align two bootstrap buttons next to each other?

What is the best way to search for documents that have all conditions met within a sub-array entry?

` Why isn't Glide.js functioning correctly when incorporated into a Bootstrap 4 modal component?`

I'm having trouble resolving the issue in my React App after attempting to export a functional component. How can I troubleshoot and

Is it possible to invoke a PHP function from within JavaScript?

Implementing input validation in a Symfony v5.2 project using Jquery-validation v1.19.3 and Bootstrap v4.6

Retrieve vuex state in a distinct axios template js file

What is the proper method for effectively employing destructuring?

Steer clear of redundant information within an array located within a recursive function

Equal-sized tiles in Highchart treemaps

Traverse an array containing nested objects using Javascript

using jQuery to display the image when clicked on

Discover supplementary characters to incorporate into a JavaScript string

Tips for creating a wavy surface on a cylinder using three.js (with images)