DEV Community: Coal

11 ways to iterate an array in Javascript

Coal — Tue, 10 Mar 2020 04:13:59 +0000

Ahh... Javascript, our beloved language, Its freedom can be either a blessing or a curse.

In this post, we're going to explore 11 different ways (In no specific order) to iterate an array (Not an object) in Javascript.

Let's define our array

Alright, that's a pretty simple array, let's move on.

1- Trusty old forEach `Array.prototype.forEach`

The classic forEach array takes two arguments:

1- A function that contains three parameters: the current item, an index, and the original array.
2- A this replacement to be passed to the callback function (It's ignored by arrow functions).

It's the most recommended way to iterate and it's compatible with IE9

2- The for-in loop

This kind of loop usage is discouraged and reserved only for debugging sometimes, yet you might encounter it out there the wild being used in production. It iterates over any custom property defined on an object excluding the default javascript ones. It also works to loop through arrays, but if you define anything on the array prototype, then it's totally going to be iterated too.

3 - The for-of loop (ES6)

This is one of the most generous kinds of loops, it's baked in the language specification itself. It's really similar to the for-in loop, but the main difference between both loops is the fact that for-of is used exclusively on collection types (Maps, Sets, Arrays, TypedArrays, NodeLists, etc...). It will avoid object properties and can be used with any object that implements the [Symbol.iterator] Symbol too (See advanced usage).

The main difference to Array.prototype.forEach is the fact that you can use the break keyword to stop the loop and the continue keyword to skip the current iteration.

4 - The C Style for loop

This is one of the most used and taught arrays in Compute Science. Its syntax is inherited from the C language and it is composed of three parts:

An index initializer
A run condition
An index modifier that runs at the end of every loop

You can use both break and continue keywords for this kind of loop too.

5 - The While loop

The while loop is the fastest one (for some reason), it's syntax is really simple:

A run condition

If you want to use it to iterate over an array you're going to need to keep track of an index variable too, making it really similar to a C style loop, but with the downside of leaving an index outside of the scope of the loop.

You can use both break and continue keywords for this kind of loop too.

6 - The Do-while loop

The do-while loop is really similar to the while loop, but it evaluates the run condition at the end of the execution, resulting in it always running the loop at least one time. This makes you need to handle the scenario of an empty array, since accessing an empty array will result in an error. Its syntax is simple too:

A run condition

Oh, and you can use both break and continue keywords for this kind of loop too.

7 - The Map method `Array.prototype.map`

ES5 added three major methods to iterate an array to generate a new array. One of those methods is map.

The map function takes two arguments:

1- A function that contains three parameters: the current item, an index, and the original array.
2- A this replacement to be passed to the callback function (It's ignored by arrow functions).

It shouldn't mutate the original array.

8 - The filter method `Array.prototype.filter`

The filter function is used to evaluate a boolean expression, if true is returned, then the element that is being iterated stays on the new loop, if false is returned then the element is going to be ignored and won't be present on the new array.

Same as the map function, the filter function takes two arguments:

1- A function that contains three parameters: the current item, an index, and the original array.
2- A this replacement to be passed to the callback function (It's ignored by arrow functions).

It shouldn't mutate the original array.

9 - The reduce method `Array.prototype.reduce`

The reduce function keeps track of a new product and the current element, it also receives a parameter for the initial value of the new product. This can be hard to grasp at the beginning but the more you look at reduce examples, the easier it becomes to you to understand the syntax.

The reduce method gets the following inputs:

1- A function that has the product as the first parameter, and the current element being iterated as a second parameter, a third parameter which is the current element index and the last parameter that provides access to the original array.
2- An initial value to be used for the product.

The reduce method is typically used to synthesize a whole array into one value, like performing a sum for example.

10 - String-Array join method `Array.prototype.join`

The join method has something in common with the last method we introduced (reduce): It does generate a single output from an array, a string to be more specific, and it can only run on string-based arrays.

It has an only input: A separator string to be used.

11 - ES2018 for await of

This is one of the newest features introduced to javascript, it allows us to place an await in our for of loops, allowing them to iterate on promises and asynchronous values (See async generator functions).

You can use for await of along with async generator functions to specify loops that will wait for the current promise being iterated to be completed, or you can use it to await on an array of promises (You should probably use Promise.all for this though).

Another example:

Extras and honorable mentions:

ES2019 `Flat` method `Array.prototype.flat`

It iterates through the main array to find nested arrays and brings the values contained on any nested array to the top level.

You can specify how deep in the array structure you want to go to bring the array values to the top level.

ES2019 `Flatmap` method `Array.prototype.flatMap`

It's exactly the same as map followed by a flat. You can use this one to flatten the product of a map that produces nested arrays.

(Thanks to Pablo Obando for these suggestions) 😄

Recursion

You can use recursion to iterate an array, thanks @nombrekeff!

Recursion in functional terms is when a function is able to call itself, looping trough the code. This has some advantages:

1- You can customize your loop as much as you want.
2- Functional approach.
3- Really helpful when you're dealing with other kind of structures like trees or circle lists.

But be careful, javascript does have a maximum call stack size, this means on every iteration a call is registered in the call stack, and if there are way too many calls, then you'll overflow the call stack, causing an exception, also, recursive calls are slower too because of this behavior.

You can even create a mix of a C Style loop and a forEach loop!

Let's go ahead and define a recursive function to replicate the functionality of Array.prototype.forEach:

So, there are probably lots of ways out there to iterate an array on javascript, like inverse do-while loops. or any of the other not-so-popular Array.prototype methods like every, some, reduceRight or flatMap, but here are some of the most popular ways to iterate an array in javascript 🚀

Colors, themes and the User's ability to choose.

Coal — Mon, 09 Mar 2020 04:52:18 +0000

Over the last two years, "dark mode" 🌒 has become a really popular example of the freedom of choice and tweak how your user-interface looks, also, all major OS provide some sort of theming option; Let's take macOS appearance settings as an example for a second:

As you can see, the user is free to choose from a list of accent colors and one of two base colors.

This usually means that users are happier when you provide them options on how they want their UI to look, and that's why we've been able to theme our UIs since the days of Windows 95 or even earlier.

How can we bring a feature like this to javascript apps?

Well, there are several existing solutions for that like CSS variables, or Themes for CSS-In-JS (Most of the current CSS-In-JS libraries support this); while this can be easy to do, you might notice there's a little issue:

You need to create, maintain and handle every color combination and generate the right color scheme for it.

~~Also, in the previous attachment from the macOS appearance settings, you can notice there's a very, VERY limited color selection.~~

Some background

When I was working on an iOS project back in 2015 I stumbled upon an amazing color framework: Chameleon Framework. It provided everything I'd wanted as a user for an application: Color scheme generation and a nicely curated list of pre-selected and recommended colors. Then I moved to the web and even if there are some great tools for generating color schemes ahead of time, I wasn't able to find something as powerful as Chameleon.

This is why I decided to create Pigment 🌈, a pure Typescript alternative that can be used in Node, the Web and React-Native (And pretty much anything that can run Javascript).

It provides lots of useful features to automate the color-generation process, but you can read more about those features on Pigment's Main Repository, for now, I'd like to focus on user-freedom.

What are some use cases?

Web/mobile apps that want to provide the user some freedom on how the UI looks.
All kinds of color theming.
Multi-tenant and white-label apps can be easily themed according to the business.

This can be demonstrated with a tiny example:

Live demo

Let's give the users more freedom!

More freedom on how their user interfaces look 🌈! This is really important because it makes the user feel more engaged with your product, it makes users feel the application that is being used is more "theirs"

A small note on dark-mode

Nowadays there are several ways to detect if dark mode is set on the OS, you can use CSS media queries for this.

How can we detect this on JS? What happens if we want to modify a theme based on the preferences using JS?

You can add an event listener on the (prefers-color-scheme: dark) media query. In React, you can even make this a Hook!

import { useEffect, useState } from 'react'

const useDarkModeDetection = () => {
  const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)')
  const [isDarkMode, setIsDarkMode] = useState(darkModeMedia.matches)
  useEffect(() => {
    const handleColorModeChange = (event: MediaQueryListEvent) => {
      setIsDarkMode(event.matches)
    }
    if (darkModeMedia.addEventListener) {
      darkModeMedia.addEventListener('change', handleColorModeChange)
    } else {
      if (darkModeMedia.addListener as any) {
        darkModeMedia.addListener(handleColorModeChange)
      }
    }
    return () => {
      if (darkModeMedia.removeEventListener) {
        darkModeMedia.removeEventListener('change', handleColorModeChange)
      } else {
        if (darkModeMedia.removeListener as any) {
          darkModeMedia.removeListener(handleColorModeChange)
        }
      }
    }
  }, [darkModeMedia])

  return { isDarkMode }
}

export default useDarkModeDetection

A little react and styled-components

Let's start by defining a small function to automate color generation!
You'll usually need a background color, a muted color, warning, danger, primary and secondary colors. You can tell pigment to generate color palettes for you in this scenario.

import { Color, Colors } from '@kevinrodriguez-io/pigment-core' 

type ColorSchemeKey =
  | 'analogousColorScheme'
  | 'analogousFlatColorScheme'
  | 'complementaryColorScheme'
  | 'complementaryFlatColorScheme'
  | 'triadicColorScheme'
  | 'triadicFlatColorScheme'

export const generateColorTheme = (
  color: Color,
  colorScheme: ColorSchemeKey = 'analogousColorScheme',
  warningColor: {
    light: string
    dark: string
  } = Colors.flatPurple,
  dangerColor: {
    light: string
    dark: string
  } = Colors.flatRed,
): ColorTheme => {
  // Every color scheme provides 5 colors, the third one (center) being the base color
  const background = color.contrastingFlatTextColor.hexString
  const primary = color.hexString
  // The second one usually works great.
  const secondary = color[colorScheme][1].hexString
  const text = color.contrastingFlatTextColor.hexString
  // The fourth one usually works great.
  const accent = color[colorScheme][3].hexString
  const muted = color.contrastingFlatTextColor.shade(25).hexString
  const invertedText =
    color.contrastingFlatTextColor.contrastingFlatTextColor.hexString
  return {
    primary,
    secondary,
    text,
    invertedText,
    accent,
    background,
    muted,
    warning: color.hsl.l < 50 ? warningColor.dark : warningColor.light,
    danger: color.hsl.l < 50 ? dangerColor.dark : dangerColor.light,
  }
}

After that, you can just use the function to modify your current theme every time dark-mode changes!

import React from 'react'
import { Color, Colors } from '@kevinrodriguez-io/pigment-core'
import { ThemeProvider } from 'styled-components'
import theme from './theme'
import useDarkModeDetection from './hooks/useDarkModeDetection'
import generateColorTheme from './utils/generateColorTheme'

// You can store the user selection in a database or localStorage too!
const DARK_MODE_COLOR = new Color(Colors.flatSkyBlue.light)
const LIGHT_MODE_COLOR = new Color(Colors.flatNavyBlue.dark)

const App: React.FC = () => {
  const { isDarkMode } = useDarkModeDetection()
  let appTheme: Theme
  appTheme = isDarkMode
    ? {
        ...theme,
        colors: generateColorTheme(DARK_MODE_COLOR, 'complementaryColorScheme'),
      }
    : {
        ...theme,
        colors: generateColorTheme(
          LIGHT_MODE_COLOR,
          'complementaryColorScheme',
        ),
      }
  return (
    <ThemeProvider theme={appTheme}>
      <SomeComponent />
    </ThemeProvider>
  )
}

There are great options out there to generate themes! But this is my little grain of sand to ease this process. So let's give our users options! Options on how their UI's can look.

Providing freedom of choice can make your product a good fit for a market full of options.

Alright. If you have any questions feel free to ask them! 🌈

DEV Community: Coal

11 ways to iterate an array in Javascript

1- Trusty old forEach Array.prototype.forEach

2- The for-in loop

3 - The for-of loop (ES6)

4 - The C Style for loop

5 - The While loop

6 - The Do-while loop

7 - The Map method Array.prototype.map

8 - The filter method Array.prototype.filter

9 - The reduce method Array.prototype.reduce

10 - String-Array join method Array.prototype.join

11 - ES2018 for await of

Extras and honorable mentions:

ES2019 Flat method Array.prototype.flat

ES2019 Flatmap method Array.prototype.flatMap

Recursion

Colors, themes and the User's ability to choose.

How can we bring a feature like this to javascript apps?

Some background

What are some use cases?

Let's give the users more freedom!

A small note on dark-mode

A little react and styled-components

1- Trusty old forEach `Array.prototype.forEach`

7 - The Map method `Array.prototype.map`

8 - The filter method `Array.prototype.filter`

9 - The reduce method `Array.prototype.reduce`

10 - String-Array join method `Array.prototype.join`

ES2019 `Flat` method `Array.prototype.flat`

ES2019 `Flatmap` method `Array.prototype.flatMap`