Executing a function within a loop

Question

Executing a function within a loop

I'm having trouble understanding the output. The first two sets of results (func01 1 and func2 01 - func2 05) make sense to me, but everything else is confusing.

As far as I know, after the first iteration of the for loop in func01(), i becomes 2 and then 3 due to func02(), but still, i <= 3 in func01(). It's puzzling to me why there are no func01 2 and func01 3 outputs displayed.

function func02(){
  for (i = 1; i <= 5; i++){
    document.write("  func02 " + i + "<br>");
  }
}

function func01(){
  for(i = 1; i <= 3; i++){
    document.write("func01 " + i + "<br>");
    func02();
  }
}

func01();

javascript function for-loop

Answer 1

Answer №1

Below is the output presented in a neat format

func01 1
func02 1
func02 2
func02 3
func02 4
func02 5

The function func01 initializes i, a global variable, to 1 and prints a line. It then calls another function named func02. Within func02, i is reset to 1 and lines are printed corresponding to values of i from 1 to 5. After this iteration, control returns to func01, signifying the completion of the loop with i being equal to 5.

Answer 2

Below is the output presented in a neat format

func01 1
func02 1
func02 2
func02 3
func02 4
func02 5

The function func01 initializes i, a global variable, to 1 and prints a line. It then calls another function named func02. Within func02, i is reset to 1 and lines are printed corresponding to values of i from 1 to 5. After this iteration, control returns to func01, signifying the completion of the loop with i being equal to 5.

Answer 3

Answer №2

When a variable is assigned without the use of var, and it cannot be found in the current scope, it is then searched for in the next outer scope. This process continues until the variable is either found or ends up in the global scope.

If the variable is not located within any scope, it will be placed in the global scope. In this case, both func01 and func02 are referencing and updating the same variable i. Therefore, when func02 finishes running and func01 starts, the value of i is already at 6, preventing the loop from executing again in func01.

To achieve the desired outcome, you can modify the counters to utilize var, which will restrict the scope of i to the specific functions they belong to.

function func02(){
  for (var i = 1; i <= 5; i++){
    document.write("&nbsp;&nbsp;func02 " + i + "<br>");
  }
}

function func01(){
  for(var i = 1; i <= 3; i++){
    document.write("func01 " + i + "<br>");
    func02();
  }
}

func01();

Answer 4

When a variable is assigned without the use of var, and it cannot be found in the current scope, it is then searched for in the next outer scope. This process continues until the variable is either found or ends up in the global scope.

If the variable is not located within any scope, it will be placed in the global scope. In this case, both func01 and func02 are referencing and updating the same variable i. Therefore, when func02 finishes running and func01 starts, the value of i is already at 6, preventing the loop from executing again in func01.

To achieve the desired outcome, you can modify the counters to utilize var, which will restrict the scope of i to the specific functions they belong to.

function func02(){
  for (var i = 1; i <= 5; i++){
    document.write("&nbsp;&nbsp;func02 " + i + "<br>");
  }
}

function func01(){
  for(var i = 1; i <= 3; i++){
    document.write("func01 " + i + "<br>");
    func02();
  }
}

func01();

Answer 5

Answer №3

You need to declare the variable i within a local scope using either let or var. Otherwise, it is being treated as a global variable:

 

function func02(){
  for (i = 1; i <= 5; i++){
document.write("&nbsp;&nbsp;func02 " + i + "<br>");
  }
}

function func01(){
  for(i = 1; i <= 3; i++){
document.write("func01 " + i + "<br>");
func02();
  }
}

func01();

Answer 6

You need to declare the variable i within a local scope using either let or var. Otherwise, it is being treated as a global variable:

 

function func02(){
  for (i = 1; i <= 5; i++){
document.write("&nbsp;&nbsp;func02 " + i + "<br>");
  }
}

function func01(){
  for(i = 1; i <= 3; i++){
document.write("func01 " + i + "<br>");
func02();
  }
}

func01();

Answer 7

Answer №4

According to user202729, in JavaScript, if you fail to declare a variable, it defaults to global scope rather than the function's scope where it is used.

To avoid this issue, make sure to declare your variable i like this:

for(var i = 1;i <= 5 ; i++)

You can also declare the variable at the beginning of the function like so:

var i;

function func02(){

  for (var i = 1; i <= 5; i++){
    document.write("&nbsp;&nbsp;func02 " + i + "<br>");
  }
}

function func01(){
  for(var i = 1; i <= 3; i++){
    document.write("func01 " + i + "<br>");
    func02();
  }
}

func01();

For more information on scoping of JavaScript variables, check out https://www.w3schools.com/js/js_scope.asp.

Answer 8

According to user202729, in JavaScript, if you fail to declare a variable, it defaults to global scope rather than the function's scope where it is used.

To avoid this issue, make sure to declare your variable i like this:

for(var i = 1;i <= 5 ; i++)

You can also declare the variable at the beginning of the function like so:

var i;

function func02(){

  for (var i = 1; i <= 5; i++){
    document.write("&nbsp;&nbsp;func02 " + i + "<br>");
  }
}

function func01(){
  for(var i = 1; i <= 3; i++){
    document.write("func01 " + i + "<br>");
    func02();
  }
}

func01();

For more information on scoping of JavaScript variables, check out https://www.w3schools.com/js/js_scope.asp.

Executing a function within a loop

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I'm having an issue where I'm trying to post form data using AJAX, but for some reason, the form continues to submit and refresh the page. Can anyone

What is the significance of declaring a constant array in JavaScript?

How can one achieve an explosion effect using jQuery?

Angular is the best method for properly loading a webpage

Encountered an issue with the Mongoose Schema method: The model method is not recognized as a

Unable to transform Symbol data into a string - Error when making a React AJAX delete call

Using JavaScript to assign function arguments based on arbitrary object values

Discover the method for retrieving the value of a toggle-style checkbox

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

retrieve the preferred item data from the local storage

d3.js attempting to animate data, but each time the data is altered it is always perceived as new

An error popped up out of the blue while attempting to execute Webpack

Utilizing the array result obtained from the fetch function

Issue arises when attempting to incorporate a SET statement into a DO loop for an array

What is the best way to include the toast component in my button?

Organize JSON information in a tabular layout

In order to display the new component upon the first click in React, my button requires a double click

What is the best way to prevent the chaining of promises and catches in JavaScript?

Is there a way to have the user input data into a Firebase database directly from a Vue.js component?

Using Angular.JS to iterate over a nested JSON array using ng-repeat