Utilizing const as the iteration variable in a for loop

Question

Utilizing const as the iteration variable in a for loop

I've grasped the concept of using var and let in a for loop in typescript/javascript, but can someone shed light on how and why a const variable as a loop variable behaves?

for (const i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 100 * i);
}

My understanding is that when you declare a variable as const and assign it a value, that value cannot be changed.

However, it seems that the value is indeed changing in the console.log(). Shouldn't this trigger an error during compilation? What am I overlooking here?

I've prepared two examples to showcase this behavior.

Loop variable as a const

Const variable reassignment

Could someone provide some insight into this perplexing issue?

javascript angular typescript ecmascript-6

Answer 1

Answer №1

The code functions properly in Stackblitz due to the fact that it is executing transpiled code:

AppComponent.prototype.test = function () {
    var _loop_1 = function (i) {
        setTimeout(function () {
            console.log(i);
        }, 100 * i);
    };
    for (var i = 0; i < 5; i++) {
        _loop_1(i);
    }
};

However, adding the same snippet here will not work as it is not transpiled.

for (const i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 100 * i);
}

https://i.sstatic.net/bVPLm.png

Answer 2

The code functions properly in Stackblitz due to the fact that it is executing transpiled code:

AppComponent.prototype.test = function () {
    var _loop_1 = function (i) {
        setTimeout(function () {
            console.log(i);
        }, 100 * i);
    };
    for (var i = 0; i < 5; i++) {
        _loop_1(i);
    }
};

However, adding the same snippet here will not work as it is not transpiled.

for (const i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 100 * i);
}

https://i.sstatic.net/bVPLm.png

Answer 3

Answer №2

In response to your inquiry,

  test(){
    for(const i =0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

This piece of code can be rewritten as follows:

  test(){

    // can only be initialized once
    const i;
    for(i = 0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

Since every JavaScript variable is hoisted to the top of its scope, the const variable in this case belongs to the test() block and is not accessible outside of it.

To correct the code snippet:

  test(){

    // can be initialized multiple times within the block
    for(let i = 0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

The updated version would look like this:

  test(){

    let i;
    // can be initialized multiple times within the block
    for(i = 0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

Both const and let have block scope and are hoisted at the top of the block they are defined in. The key difference is that variables declared as const cannot be reinitialized.

Answer 4

In response to your inquiry,

  test(){
    for(const i =0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

This piece of code can be rewritten as follows:

  test(){

    // can only be initialized once
    const i;
    for(i = 0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

Since every JavaScript variable is hoisted to the top of its scope, the const variable in this case belongs to the test() block and is not accessible outside of it.

To correct the code snippet:

  test(){

    // can be initialized multiple times within the block
    for(let i = 0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

The updated version would look like this:

  test(){

    let i;
    // can be initialized multiple times within the block
    for(i = 0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

Both const and let have block scope and are hoisted at the top of the block they are defined in. The key difference is that variables declared as const cannot be reinitialized.

Utilizing const as the iteration variable in a for loop

Answer №1

Answer №2

Similar questions

Exploring Angular's Pipe Asset Library

Exploring objects nested within other types in Typescript is a powerful tool for

Is it possible to modify the text alignment of a div based on the dropdown selection

Selecting a specific element and attaching a particular class to this element, but directing it towards a different element that shares the same index in a separate node list

Exploring the typing for DefaultRootState in React Redux Connect

After pressing the ASP.NET button, the JavaScript function is called followed by the C# function being executed

Error: The specified file or directory does not exist at location 'D:E-commerceJsfrontend ode_modules.axios.DELETE'

How to execute a function in a child process using node.js?

Tips for capturing the output of a dynamically rendered component in Angular 8

What steps can I take to stop Google Maps from resetting after a geocode search?

Is there a way to run /_next/static/xxx.js using a script tag?

What is the reason for the lack of variable assignment within the forEach method in Angular?

"Enhancing User Experience with jQuery: Implementing a Smooth Scroll Feature with Current

Transform a single data point into pixels by converting its latitude and longitude coordinates

Event handler for "copy" on the iPad

Failure to Generate stats.json File When Building Angular 6 with --stats-json Flag

After ngAfterViewInit, the @ViewChild element has not been defined

Using jQuery UI autocomplete with special characters

Steps for sending a POST request for every file in the given array

Displaying images dynamically in React from a source that is not public