Arrays management using JS

This is one of the most important lesson 😤 you should start learning when you it's your first time *writing some code. *

As you know, an array is a typical data structure in JS, it's mainly a element chain, doesn't matter the type of their elements, the only important thing is to be consistence, let's see an example:

let array = [1, "2", 3, null, undefined]

Look's at the example, doesn't matter the child types, it's the best characteristic on arrays here, but it's not the aim of this post, let's see how to manage that using JS and functional programming 🥰:

const result = [1, "2", 3, null, undefined]
    .filter((val) => typeof val !== 'undefined')
    .map((item, key) => {
      return { value: item, index: key };
    });

Woow!! 😏, yes I know, I'm so crazy, here I have use the most advance functional programming, let's try to see each part:

• First: the array start filtering using filter, it looks like the result array will have all the values without possibles undefined, it means to remove all values which their type are undefined. As you know 😉, filter return an array after applying the filter indicated in the callback.

• Second: The result of the filter (an array) is passed to a map function, it's an actor who allows us to move between two context, it allow us to transform an array to an array of object with the structure provided on the body of this map.

Let's see each part separately:

const result = [1, "2", 3, null, undefined]
    .filter((val) => typeof val !== 'undefined')

// the result will be [1, "2", 3, null]
// after you can apply a map separately 

const secondResult = result.map((item, key) => {
      return { value: item, index: key };
    });

// the secondResult will be [{value: 1, index: 0}, 
// {value: "2", index: 1}, {value: 3, index: 2}, {value: null, index: 3}
// it's the same result as the example before

This is the same, we can mix all these array functions one after another, to get the result which we are looking for 😉.

The idea of this post is to bring you the first approach to the functional programming using declarative methods (it means say what we want not how to do that).

In the following post we will go into more detail about this functions and how to extract all the power that it has on JS. If you like this post 🧡, please don't forget to share it with your friends and give us a comment, we really appreciate that.

See you 🙏