Converting for loop to foreach loop

I was taking one of the premium tutorials and am trying to execute a loop we did successfully in a for loop in a foreach loop. In other words it worked in a for loop now I want to try it in a foreach loop but it’s not cooperating.

this works:
var steps = [“brainstorm”, “narrow”, “prototype”, “test”, “propose”];
var stepTerm;

//steps.forEach(function(z) {
for(i=0; i < steps.length; i++) {
switch(i) {
case 0:
stepTerm = “First”;
break;
case steps.length -1:
stepTerm = “Finally”;
break;
default:
stepTerm = “Then”;
}
console.log(stepTerm + " we " + steps[i]);
};

the codepen here demonstrates it working: http://codepen.io/jimeast/pen/MJjMGj?editors=1111

This is the version where I try to use foreach instead of for and it doesn’t work.

var steps = [“brainstorm”, “narrow”, “prototype”, “test”, “propose”];
var stepTerm;

steps.forEach(function(z) {
switch(z) {
case 0:
stepTerm = “First”;
break;
case steps.length -1:
stepTerm = “Finally”;
break;
default:
stepTerm = “Then”;
}
console.log(stepTerm + " we " + steps[z]);
});

the codepen for the foreach version is here.
http://codepen.io/jimeast/pen/Kagjod?editors=1111

What am I doing wrong?

I think you can’t “break” out of the forEach method.

There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool, use a plain loop instead.

The forEach method passes three properties to the provided function, those being value, index, and the array. You can use them like this:

steps.forEach(function (step, index, steps) {

Where step will be each value in the array, index being the position of that value in the array, and steps being a referece to the array that you are working on.

You can use it with your code as follows:

var steps = ["brainstorm", "narrow", "prototype", "test", "propose"];
var stepTerm;

steps.forEach(function(step, index, steps) {
	switch(index) {
		case 0:
			stepTerm = "First";
			break;
		case steps.length -1:
			stepTerm = "Finally";
			break;
		default:
			stepTerm = "Then";
	}
	console.log(stepTerm + " we " + step);
});

However, it can be better to extract parts out to a separate function, which can help to make the forEach loop part of the code easier to understand.

var steps = ["brainstorm", "narrow", "prototype", "test", "propose"];
var stepTerm;

function stepType(index, totalLength) {
	var stepTerm;
	switch(index) {
		case 0:
			stepTerm = "First";
			break;
		case totalLength.length -1:
			stepTerm = "Finally";
			break;
		default:
			stepTerm = "Then";
	}
	return stepTerm;
}

steps.forEach(function(step, index, steps) {
	console.log(stepType(index, steps.length) + " we " + step);
});
2 Likes

The break is for the switch, not the foreach

As for the rest, @Paul_Wilkins nailed it. The foreach passed the element when called directly, not an index counter.

1 Like

Thanks a bunch now I know if I want to use break in a foreach loop I need to put it in a function then call the function from the foreach loop.

Actually, that’s quite the wrong thing to understand. The separate function is beneficial for understanding, but totally not necessary for the solution to your problem.

Please re-read the first sentence from what I posted in post #3 for what you need to understand instead.

I get it now. I skipped to the second example you gave. I was thinking if I didn’t wrap the switch statement in a function it wouldn’t work. Then I was wondering where was ‘step’ defined. I figured it must be build into foreach. If I paid attention in the first place I would of got it the first time. Thank you for this lesson.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.