{"id":1236,"date":"2021-01-20T10:52:05","date_gmt":"2021-01-20T10:52:05","guid":{"rendered":"https:\/\/www.projectimmerse.com\/blog\/?p=1236"},"modified":"2025-09-29T19:05:44","modified_gmt":"2025-09-29T19:05:44","slug":"block-binding-using-javascript-functions-in-loops","status":"publish","type":"post","link":"https:\/\/www.projectimmerse.com\/blog\/block-binding-using-javascript-functions-in-loops\/","title":{"rendered":"Block Binding using JavaScript \u2013 Functions in Loops"},"content":{"rendered":"\n
\"Flat<\/a>
Block binding in JavaScript makes functions inside loops behave as expected by using let or const.<\/figcaption><\/figure>\n\n\n\n

When writing JavaScript, one of the classic headaches developers run into is how functions behave inside loops. If you\u2019ve ever expected a function in a loop to \u201cremember\u201d the value of a variable at a specific iteration, only to find it doesn\u2019t, you\u2019ve bumped into scope and binding issues.<\/p>\n\n\n\n

Let\u2019s break this down and see how block binding can solve it.<\/p>\n\n\n\n\n\n\n\n

The Old Problem with var<\/code> in Loops<\/h2>\n\n\n\n

Traditionally, JavaScript used var<\/code> for variable declarations. The catch is that var<\/code> is function-scoped, not block-scoped. This means that when you use var<\/code> inside a loop, the variable is shared across all iterations.<\/p>\n\n\n

\nfor (var i = 0; i < 3; i++) {\n  setTimeout(function() {\n    console.log(i);\n  }, 1000);\n}\n\n<\/pre><\/div>\n\n\n
You might expect this to log 0<\/code>, 1<\/code>, and 2<\/code>. But after one second, it prints:<\/p>\n\n\n
\n3\n3\n3\n\n<\/pre><\/div>\n\n\n
Why? Because by the time the setTimeout<\/code> callback runs, the loop has already finished, and i<\/code> is 3<\/code>. Each callback references the same i<\/code>.<\/p>\n\n\n\n
Enter Block Binding with let<\/code><\/h2>\n\n\n\n
The introduction of let<\/code> (and const<\/code>) in ES6 changed the game. Unlike var<\/code>, let<\/code> is block-scoped. That means each iteration of the loop creates a new binding of the variable.<\/p>\n\n\n
\nfor (let i = 0; i < 3; i++) {\n  setTimeout(function() {\n    console.log(i);\n  }, 1000);\n}\n\n<\/pre><\/div>\n\n\n
This prints:<\/p>\n\n\n
\n0\n1\n2\n\n<\/pre><\/div>\n\n\n
Exactly what you\u2019d expect! Each setTimeout<\/code> captures a fresh copy of i<\/code> because let<\/code> binds the variable to the block of the current iteration.<\/p>\n\n\n\n
Using IIFEs (Before let<\/code>)<\/h2>\n\n\n\n
Before ES6, developers often used Immediately Invoked Function Expressions (IIFEs) to work around this issue.<\/p>\n\n\n
\nfor (var i = 0; i < 3; i++) {\n  (function(i) {\n    setTimeout(function() {\n      console.log(i);\n    }, 1000);\n  })(i);\n}\n\n<\/pre><\/div>\n\n\n
By wrapping the loop variable inside a function call, you created a new scope that preserved the value of i<\/code> for each iteration. It worked, but it wasn\u2019t pretty. let<\/code> makes this cleaner and more intuitive.<\/p>\n\n\n\n
Functions in Loops \u2013 Best Practices<\/h2>\n\n\n\n