CODEWITHSUNDEEP
javascriptjquerynode.js
BILAL AHMAD
BILAL AHMAD

Reputation: 712

Variable with same name inside function changes the value of the passed parameter

I have a javascript function as below : 

function modifyx(xvalue) {
  val = 1;
  for (x = 0; x < 10; x++) {
    val = val + 1;
  }
  return val;
}

And the main snippet passes a variable named x to the above function as below:

for (x = 0; x < 10; x++) {
  console.log(modifyx(x));
}

The expected output should be "11" printed 10 times but instead it prints one time. The function call changes the value of x eventhough i am not modifying the passed value. The x inside the function has it's own scope. Yet it gets modified. Any help on this would be highly appreciated.

Upvotes: 0

Views: 71

Answers (3)

Mamun
Mamun

Reputation: 68923

The variable x in your code is global. When your method modifyx(xvalue) returns for the first time the value of x is already 11 which is used in the for loop for the second iteration. Thus it fails to execute the method further.

Use let x in the declaration in for (x = 0; x < 10; x++) to create a unique execution environment. 

function modifyx(xvalue) {
  val = 1;
  for (x = 0; x < 10; x++) {
    val = val + 1;
  }
  return val;
}

for (let x = 0; x < 10; x++) {
  console.log(modifyx(x));
}

Upvotes: 2

Ari Seyhun
Ari Seyhun

Reputation: 12531

MDSN documentation on variable scopes in JavaScript:

JavaScript has two scopes: global and local. A variable that is declared outside a function definition is a global variable, and its value is accessible and modifiable throughout your program. A variable that is declared inside a function definition is local. It is created and destroyed every time the function is executed

When using the var keyword, the variable declaration is pulled to the top of it's scope (the function).

In your example code, you are using a for loop without defining var x. When you use for (x = 0..., the browser assumes you meant for (var x = 0... so it creates a global variable called x.

Inside your function modifyx, you are setting the global x to 11 by the end of it's execution. This causes the outer loop to run only once because x is no longer less than 10 after the first loop.

Here is an example of what's going on with comments:

function modifyx(xvalue) {
    val = 1;
    for (x = 0; x < 10; x++) { // sets the global 'x' to 11 after loop finishes
        val = val + 1;
    }
    return val;
}

// 'x' is being defined as a global variable
for (x = 0; x < 10; x++) {
    console.log(modifyx(x)); // modifyx sets 'x' to 11
    // x is now 11, loop will now quit
}

A simple solution is to use the let keyword in both loops, thus restricting the scope.

for (let x = 0; x < 10; x++) { ... }

Upvotes: 0

saiyan
saiyan

Reputation: 572

Just put var in both places in for loop

function modifyx(xvalue) {
  val = 1;
  for (var x = 0; x < 10; x++) {
    val = val + 1;
  }
  return val;
}

for (var x = 0; x < 10; x++) {
  console.log(modifyx(x));
}

because its taking x as global variable in your code.

Upvotes: 2

Related Questions