Alternative of 'for' in JavaScript

Python version:

https://dev.to/akuad/alternative-of-for-in-python-3537

Introduction

There are some cases of processing elements in Array. Basically solution is process with for.

Actually, there are other solutions without using for. Them can reduce code and keep code in simple.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array

Note: In some cases, for can be the best solution.

Tutorial - Arrow function expressions

These codes will be take same behavior.

function (e) {
  return e*2;
}

e => { return e*2; }

// if one liner with return, write without return
e => e*2

By using =>, you can omit function, function name, {} and return.

Make an Array what elements processed

E.g. multiplex x2

const input  = [1, 2, 3, 4];
const output = [];

for(let i = 0; i < input.length; i++) {
  output.push(input[i] * 2);
}
// output: [2, 4, 6, 8]

const input  = [1, 2, 3, 4];
const output = input.map(e => e*2);
// output: [2, 4, 6, 8]

Reference: Array.prototype.map()

Other example: Extract elements from objects in Array

const files = document.getElementById("any-input-element").files
const files_name = Array.from(files).map(e => e.name)
//                 ~~~~~~~~~~~~~~~~~
// Convert to Array from FileList

Actually, Array.from() also has same feature of .map().

const files_name = Array.from(files, e => e.name);

It can be able to use .map() to array-like object.

Extract elements what match to a condition

E.g. Extract even numbers from Array

const array     = [1, 2, 3, 4];
const array_use = [];

for(let i = 0; i < array.length; i++) {
  if((array[i] % 2) == 0) {
    array_use.push(array[i]);
  }
}

const array     = [1, 2, 3, 4];
const array_use = array.filter(e => (e % 2) == 0);

Reference: Array.prototype.filter()

Check is a value in Array

E.g. Check is input string day-name

const input     = "mon";
const day_names = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];

let is_input_true = false;
for(let i = 0; i < day_names.length; i++) {
  if(input === day_names[i]) {
    is_input_true = true;
    break;
  }
}
// is_input_true: true

const input     = "mon";
const day_names = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];

let is_input_true = day_names.includes(input);
// is_input_true: true

Reference: Array.prototype.includes()

Conclusion

Sometimes let’s see document (language reference, command help and so on).

You can find good functions, methods or options.