What consequences can declaring a variable with var inside a function lead to?

Declaring a variable with var inside a function has function scope. It means that such a variable is accessible throughout the entire function, ignoring block scopes (like inside if or for).

Consequences:

• Variable overwriting: A variable declared with var inside a block can overwrite a variable with the same name declared earlier in the same function but outside that block.
• Hoisting: The declaration of a var variable is hoisted to the top of the function. It means you can use the variable before its declaration, but its value will be undefined at that point.
• Unexpected behavior in loops: In for loops with asynchronous operations (like setTimeout), a variable declared with var will have the last value from the loop for all asynchronous callbacks, not the value at the iteration time.

Example of hoisting and overwriting:

function exampleVarScope() {
  console.log(a); // undefined (due to hoisting)
  var a = 10;
  if (true) {
    var a = 20; // Overwrites outer 'a'
    console.log(a); // 20
  }
  console.log(a); // 20 (value from the if block)
}

exampleVarScope();

Example with loop and asynchronous operations:

function varLoopExample() {
  for (var i = 0; i < 3; i++) {
    setTimeout(function() {
      console.log(i); // Will print 3, 3, 3 (i has last value from loop)
    }, 100);
  }
}

varLoopExample();

Due to these features, it is recommended to use let or const, which have block scope.