Difficulty Displaying "undefined" for Empty Array Indices Using forEach Loop in JavaScript

Question

I'm currently working on a JavaScript project involving arrays and forEach loops, and I'm facing an issue that I can't seem to resolve. I want to display the contents of an array with a twist: I'd like to show the string "undefined" for any empty indices in the array. However, despite trying various approaches, I still can't achieve the desired result.

Here's the code I'm using:

const fruits = ["banana", "apple", "watermelom", "grapes"];
  fruits[7] = "Lemon";

  let text = "<ul>";

  fruits.forEach(myFunction);

  text += "</ul>";

  function myFunction(value, index) {
    if (index in fruits) {
      text += "<li>" + value + "</li>";
    } else {
      text += "<li>undefined</li>";
    }
  }

  document.getElementById("demo").innerHTML = text;

<p id="demo"></p>

Unfortunately, this code isn't achieving the result I want, and I'm still not seeing "undefined" displayed for the empty indices. Is there something I'm missing or misunderstanding about using the forEach loop in this context? Any insights or alternative solutions would be greatly appreciated. Thank you in advance for your assistance!

…then don't use `.forEach`. Use a normal `for … of` loop — Bergi, Aug 29 '23 at 09:14
forEach executes myFunction for each array element. If there is no element (=undefined) it doesn't do anything. If you want to display undefined, you could use a for loop instead. — Emilien, Aug 29 '23 at 09:15
If you still want to use forEach, you can check if the value is empty `const textToDisplay = value == "" ? 'undefined' : value; text += "
@MaraBlack How do you expect that to work? `myFunction` isn't called at all for those elements. — Ivar, Aug 29 '23 at 09:18
It is, `fruits.forEach(myFunction);`, check in the function if the value is empty — Mara Black, Aug 29 '23 at 09:20
@MaraBlack No, it doesn't. See [this example](https://jsfiddle.net/52v0mrbx/). (Elements 4, 5 and 6 are skipped.) — Ivar, Aug 29 '23 at 09:22
@Emilien `undefined` is a valid array entry, and `forEach` ___will___ iterate over it. — Cerbrus, Aug 29 '23 at 09:26
Hello everyone, I'm still struggling to get the desired output using the provided solutions. Could someone please provide a complete code solution that would display "undefined" for the empty indices in the array when using the **forEach** loop? I'd really appreciate it. Thank you! — Rexsaa Gater, Aug 29 '23 at 09:27
@RexsaaGater Update function like this: https://jsfiddle.net/jagdish_j_p/0ocjmy72/3/ — Er Jagdish Patel, Aug 29 '23 at 09:27
@RexsaaGater Remove the `.forEach()` call altogether and replace it with a regular `for` loop. https://jsfiddle.net/crobt2s7/ — Ivar, Aug 29 '23 at 09:30
@ErJagdishPatel There is one too many `undefined`s in that list. And it also seems overly complicated. — Ivar, Aug 29 '23 at 09:30
@Ivar I also agree with your answer. That is short and simple. — Er Jagdish Patel, Aug 29 '23 at 09:35

Difficulty Displaying "undefined" for Empty Array Indices Using forEach Loop in JavaScript

0 Answers0