How to use forEach method?

JavaScript
1

hello campers,

i’m learning javascript and practice on a small project. In this project i want to create an array of a bus passangers, based on the passangers name who check in.

this code is working with for loop, but when i tried to use forEach() to replaced the for loop, i was lost.

please help me understand how this thing work with forEach or any method that would work.

the code :

// bus passangers
const busPassangers = [];
// check in passanger 
let checkIn = function(name) {
  // if the bus passangers empty
  if (busPassangers.length == 0) {
    busPassangers.unshift(name);
    return;
  } else {
    // check all busPassangers name
    for (i=0; i<busPassangers.length; i++) {
      // if passanger name already in
      if (busPassangers[i] == name) {
        console.log(busPassangers[i] + ' is on the bus');
        return;
      }
      // if seat in between is empty
      else if (busPassangers[i] == undefined) {
        busPassangers[i] = name;
        return;
      }
      // if no empty seat in between
      else if (i == busPassangers.length-1) {
        busPassangers.push(name);
        return;
      }
    }
  }
}

checkIn('aldion'); // checkin
checkIn('donna'); // checkin
checkIn('prast'); // checkin
checkIn('prast'); // already checkin
busPassangers[0]=undefined; // aldion checkout
checkIn('keket') // seat ex: aldion
busPassangers[1]=undefined;
checkIn('alex'); // seat ex: donna

console.log(busPassangers);
// ['keket', 'alex', 'prast']

thanks in advanced

2

Hey there @sobadrdb,

In JavaScript, .forEach() works by taking the array that is chained with it and loop through every single item inside the array and returning them and let you do whatever to them. Here’s an example:

let myArray = [1, 4, 5, 7, 2, 4];

// Using Arrow Function
myArray.forEach(number => {
  // number is going to be every item inside the array iterated. 
  console.log(number);//this will log a long list like: 1, 4, 5, 7, 2, 4
});

// Using Normal Function
myArray.forEach(function(number) {
  // number is going to be every item inside the array iterated. 
  console.log(number);//this will log a long list like: 1, 4, 5, 7, 2, 4
});

Here’s an image showing .forEach() being in use:
image

It will loop over every item in the array and return the value of it one by one. And you can do anything to it… Here’s an image of the items being changed:
image

.forEach() also does not mutate or change the original array in any way, unless you did so. Here’s an example:
image

If you want more information about it, here’s an MDN article about it:

Hope this will help you understand how .forEach() works :slight_smile:

Happy coding!

3

hi @Catalactics,

thanks for the refference.

and this what i tried,

but still can’t figured out why the result is still duplicated :

['keket', 'alex', 'prast', 'keket', 'alex']

not like the for loop result above :

['keket', 'alex', 'prast'].

in this code i just figured that without second argument it won’t work, in for loop i just need the i, but the forEach i need element value and the index element.

busPassanggers.forEach(function(seat, index) { ...});

the code i tried :

// bus passangers
const busPassangers = [];
// check in passanger 
let checkIn = function(name) {
  if (busPassangers.length == 0) {
    busPassangers.push(name);
    return;
  }
  else {
    busPassangers.forEach(function(seat, index) {
      if (seat == name) {
        console.log(seat + ' is on the bus');
        return;
      }
      else if (seat == undefined) {
        busPassangers[index] = name;
        return;
      }
      else if (index == busPassangers.length-1) {
        busPassangers.push(name);
        return
      }
    });
  }
}

checkIn('aldion'); // checkin
checkIn('donnna'); // checkin
checkIn('prast'); // checkin
checkIn('prast'); // already checkin
busPassangers[0] = undefined; // aldion checkout
checkIn('keket') // seat ex: aldion
busPassangers[1] = undefined;
checkIn('alex'); // seat ex: donna

console.log(busPassangers);
// ['keket', 'alex', 'prast', 'keket', 'alex']

thanks.

4

Hey @sobadrdb,

In both functions you are using return to end the function, but here’s the thing, inside .forEach() is a function, so everything inside the foreach is just an anonymous function (function that doesn’t have a name).

So a return statement, will only end the .forEach() function not the main checkIn() function like how in your for loop the return statement will end the whole process.

image
In the image above, using the for loop and the return statement will END the whole function. But if you use .forEach():

image

It will not end the whole function, just the anonymous function inside the .forEach() loop.

Hope this clarifies your question. :slight_smile:

If you still need help, don’t be afraid to ask…

Anyways, Happy coding!!

5

Additional Note:

If you’re trying to find out how to break out of a .forEach()loop, unfortunately, there is no way to stop a .forEach() loop until it finishes the loop. So the for loop may be your best bet.

Fun Fact: for loop is actually faster in terms of performance than .forEach() loop in the big scale

1 Like
6

thanks, that what i did, tried with break, but it not working. :upside_down_face:.

so in this case i can’t use the forEach inside other function? and i guess i can’t use the every, find, filter methods also, it was whole messed up the result.

thanks for the explanation.

1 Like