Modern JavaScript Part 08: Array Improvements

Sun Jun 03 2018 / book


Array.from() is the first of the many new array methods that ES6 introduced. It will take something arrayish, meaning something that looks like an array but it isn't, and transform it into a real array.

    // our html
    <div class="fruits">
      <p> Apple </p>
      <p> Banana </p>
      <p> Orange </p>

    const fruits = document.querySelectorAll(".fruits p");
    const fruitArray = Array.from(fruits);

    //it will return us an array containing 3 p tags [p,p,p];

    //since now we are dealing with an array we can use map
    const fruitNames = fruit => fruit.textContent);

    // ["Apple", "Banana", "Orange"]

We can also simplify like this:

    const fruits = Array.from(document.querySelectorAll(".fruits p"));
    const fruitNames = => fruit.textContent);

    // ["Apple", "Banana", "Orange"]

Now we transformed fruits into a real array, meaning that we can use any sort of method such as map on it. Array.from() also takes a second argument, a map function so we can write:

    const fruits = document.querySelectorAll(".fruits p");
    const fruitArray = Array.from(fruits, fruit => {
      // <p> Apple </p>
      // <p> Banana </p>
      // <p> Orange </p>
      return fruit.textContent;
      // we only want to grab the content not the whole tag
    // ["Apple", "Banana", "Orange"]



Array.of() will create an array with all the arguments we pass into it.

    const digits = Array.of(1,2,3,4,5);

    // Array [ 1, 2, 3, 4, 5];



Array.find() returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned. It can be useful in instances where we have a json file, maybe coming from an API from instagram or something similar and we want to grab a specific post with a specific code that identifies it. Let's looks at a simple example to see how Array.find() works.

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

    let found = array.find( e => e > 3 );
    // 4

As we mentioned, it will return the first element that matches our condition, that's why we only got 4 and not 5.  



Array.findIndex() will return the index of the element that matches our condition.

    const greetings = ["hello","hi","byebye","goodbye","hi"];

    let foundIndex = greetings.findIndex(e => e === "hi");
    // 1

Again, only the index of the first element that matches our condition is returned.  


Array.some() & Array.every()

I'm grouping these two together because their use is self-explanatory: .some() will search if there are some items matching the condition and stop once it finds the first one, .every() will check that all items match the given condition.

    const array = [1,2,3,4,5,6,1,2,3,1];

    let arraySome = array.some( e => e > 2);
    // true

    let arrayEvery = array.every(e => e > 2);
    // false

Simply put, the first condition is true, because there are some elements greater than 2, but the second is false because not every element is greater than 2.