js-for-loops-and-how-to-use-them.js

// you can run this tutorial - it's executable

// fake function for demonstration
async function fetchSomething(item) {
  return item;
}

async function learnLoops() {
  // let's have some simple array first
  // note that each value has also an 0-base index
  // indexes: 0, 1, 2

  const a1 = ["kevin", "slawa", "thomas"];
  console.log({ a1 });

  // get array length

  console.log({ length: a1.length });

  // most simple stupid loop (from 80s)
  // we use array indexes (i) while we don't care about them
  // don't use - ugly and stupid
  // @deprecated

  for (let i = 0; i < a1.length; i++) {
    console.log(i, a1[i]);
  }

  // better, but still don't use
  // @deprecated
  // this still uses array indexes (i) while we don't care about them
  // syntax: FOR IN

  for (let i in a1) {
    console.log(i, a1[i]);
  }

  // finally, we loop over VALUES(!) without indexes
  // this is good - you can use it (even better options below)
  // syntax: FOR OF

  for (let item of a1) {
    console.log("for of", item); // note: item is already a value - kevin, slawa, thomas
  }

  // special case
  // if you await inside for loop then you should also await inside for

  for await (let item of a1) {
    console.log("for await", await fetchSomething(item));
  }

  // functional programming (trendy, from 2015 onwards)
  // best recommended way if you don't need to return anything as a result of processing

  a1.forEach((item) => {
    console.log("forEach", item);
  });

  // if you need to process each item and return something back
  // !!! best option - most concise and versatile
  // I use it by default everywhere by default
  // TLDR: USE THIS - minimum code for maximum flexibility

  const results1 = a1.map((item) => {
    return "Hello " + item;
  });
  console.log({ results1 });

  // finally, if you have await inside the loop,
  // then we need to await for the final results too
  // special case for API processing in a loop

  const results2 = await Promise.all(
    a1.map(async (item) => {
      return await fetchSomething(item);
    })
  );
  console.log({ results2 });

  // that's all for different ways of looping

  // let me explain about processing complicated items
  // given an array of objects (like order items)

  const a2 = [
    { id: 1, name: "kevin" },
    { id: 2, name: "slawa" },
    { id: 3, name: "thomas" },
  ];

  // the 'item' variable is one such row/object/item/shipment/etc.
  // you can access sub-properties by dot-notation: item.something
  // you can name 'item' as you like: x, orderItem, someShit

  a2.map((item) => {
    console.log(`${item.id}: Hello ${item.name}`);
  });
}

learnLoops();