DEV Community

Cover image for Array cardio
Jérémy Levron
Jérémy Levron

Posted on • Edited on

Array cardio

#javascript #beginners

Array cardio is an expression by Wes Bos, I learn a lot from him. ✌️

In my opinion arrays in JavaScript are the key of the language. So I practice, again and again, to really understand it, and avoid ugly loops when I fetch arrays.

So let's go!

First I created a JSON file with dummy datas inside. We keep it simple, but we already have a lot to play.

[
    {
        "id": 1,
        "title": "Lorem",
        "categories": [ "Adipisicing", "Elit" ]
    },
    {
        "id": 2,    
        "title": "Ipsum",
        "categories": [ "Elit" ]
    },
    {
        "id": 3,
        "title": "Dolor",
        "categories": [ "Maxime", "Animi" ]
    },
    {
        "id": 4,
        "title": "Sit",
        "categories": [ "Minima" ]
    },
    {
        "id": 5,
        "title": "Amet",
        "categories": [ "Culpa" ]
    },
    {
        "id": 7,
        "title": "Architecto",
        "categories": [ "Culpa", "Maxime" ]
    },
    {
        "id": 8,
        "title": "Aliquam"
    },
    {
        "id": 9,
        "title": "Libero",
        "categories": [ "Maxime" , "Elit", "Neque" ]
    }
]
Enter fullscreen mode Exit fullscreen mode

Next I require the file inside my index.js.

let datas = require('./datas.json')
Enter fullscreen mode Exit fullscreen mode

Now, let's play!

array.push

First, let's adding a new object to the array with array.push

datas.push(
    { 
        id: 6, 
        title: "Consectetur", 
        categories: [ "Dignissimos" ] 
    }
)
Enter fullscreen mode Exit fullscreen mode

array.filter

Now, we are going to filter datas by a given id integer and stock the result in a new array. This way, the original array doesn't change.

array.filter is perfect for this job.

const datasFilteredById = datas.filter((obj) => {
    return obj.id === 5
})
Enter fullscreen mode Exit fullscreen mode

A console.log of datasFilteredById give us

[ { id: 5, title: 'Amet', categories: [ 'Culpa' ] } ]
Enter fullscreen mode Exit fullscreen mode

array.find

We are gonna do the same thing but with categories: filter datas by a given category string.

But, where id property is only integer, categories are lists. And in addition categories property maybe doesn't exist.

Let's do this. We return* if categories property is undefined, if not, we use array.find to return object with the matching category found in categories property.

const datasFilteredByCategory = datas.filter((obj) => {

    if (obj.categories === undefined) return

    return obj.categories.find((category) => {

        return category === 'Maxime';
    })
})
Enter fullscreen mode Exit fullscreen mode

A console.log of datasFilteredByCategory give us

[ 
    { id: 3, title: 'Dolor', categories: [ 'Maxime', 'Animi' ] },
    { id: 7, title: 'Architecto', categories: [ 'Culpa', 'Maxime' ] },
    { id: 9, title: 'Libero', categories: [ 'Maxime', 'Elit', 'Neque' ] } 
]
Enter fullscreen mode Exit fullscreen mode

array.map

array.map create a new array by calling a function on every item of a given array.

Here we just retrieve the title property of every objects and storing them into datasTitles.

const datasTitles = datas.map((data, index, array) => { return data.title })
Enter fullscreen mode Exit fullscreen mode

A console.log of datasTitles give us

[ 
    'Lorem',
    'Ipsum', 
    'Dolor', 
    'Sit', 
    'Amet', 
    'Architecto', 
    'Aliquam', 
    'Libero', 
    'Consectetur' 
]
Enter fullscreen mode Exit fullscreen mode

array.sort

Let's do the same thing again, but with ids sorted by increasing numbers. This is a job for array.sort. array.sort compares each item in array.

const datasIds = datas
    .map((data, index, array) => { return data.id })

    .sort((a, b) => { return a - b })
Enter fullscreen mode Exit fullscreen mode

A console.log of datasIds give us:

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
Enter fullscreen mode Exit fullscreen mode

Everything is fine for now.

array.reduce and Spread syntax

Finally, the more trickiest in my opinion. We are gonna create a list of each category used by datas.

  • First we have to check for categories property existence with array.filter.

  • Then we create an array with all existing categories properties with array.map.

  • We concat this new array, because it's an array of arrays, with array.reduce and spread syntax from ES6. (To be honest, I'm not sure I fully understand this feature.)

  • Then we remove duplicates categories with array.filter.

const datasCategories = datas

    .filter((obj) => { 

        return obj.categories !== undefined ? obj : '' 
    })

    .map((data, index, array) => { return data.categories })

    .reduce((a, b) => { return [...a, ...b] })

    .filter((category, index, array) => { 

        return array.indexOf(category) === index 
    })
Enter fullscreen mode Exit fullscreen mode

Sure there is a much simpler way to do this, but it's working. A console.log of datasCategories to confirm it:

[
    'Adipisicing',
    'Elit',
    'Maxime',
    'Animi',
    'Minima',
    'Culpa',
    'Neque',
    'Dignissimos'
]
Enter fullscreen mode Exit fullscreen mode

Maybe I'm doing it wrong, and I would love to have feedbacks, corrections or best practices.

What's your daily routine with arrays? 🏃🏻”♀️

*I don't know how to say that: we return? We escape? We break?

Top comments (0)