JavaScript Array and Its 5 most used methods.

Array visuals

Definition of Array in MDN docs is -

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name, and has members for performing common array operations.

So let’s demystify this definition

As everything else in javascript is an object Arrays are also objects, and we can use new Array() to create them.

You must be familiar with variables in javascript, a variable can hold a single value and that’s great for a few values that our application needs to use but if we require a lot of values, assigning lots of values to a different variable is not an efficient way to use them and that solely lead to confusion.

const colorText = 'gray';
const colorPrimary = 'purple';
const colorSecondry = 'black';
const colorBackground = 'yellow';

So let's see how storing value in an array make work simpler

An array is a single variable that can be used to store different and multiple values by different I mean arrays can store value types of number, string, boolean, and null, and by multiple, it can store many values or elements at once.

const colors = ['gray', 'purple', 'black', 'yellow'];

You can see on the code snippet how simple and elegant it looks with arrays.

Now to create an Array there are a few ways but the simplest is to create with array literals and to retrieve any of the values from the array we make use of bracket notation and pass the index number of the element.

const planetNames = ['Mars', 'Earth', 'Saturn', 'Jupiter']

//to access an element in an array 
console.log(planetNames[0]) // Mars 
console.log(planetNames[1]) // Earth
console.log(planetNames[2]) // Saturn

If you pay close attention to the code snippet you will find out that index starts from 0, so the 0th index is the first element in an array.

Now let us see the most used Methods on arrays -

1. map()

The map method is the method you always want to use if you have to transform all the values within the array, It gives us a new array with all the transformed elements in it.

const numbers = [1, 2, 3, 4, 5]

const doubleNumber = arr.map(num => num + 1)
// [2,3,4,5,6]

2. filter()

The filter method as the name says filters out, basically, It creates a new array only for those elements that passed the condition in the filter callback function.

const numbers = [1, 2, 3, 4, 5]

const lessThenFour = numbers.filter(num => num < 4)
// [1, 2, 3]

3. reduce()

The reduce method of javascript Is used to reduce an array in a single value, with the callback function it accepts another argument as well it’s called the accumulator, you can read more about it here

const numbers = [1, 2, 3, 4, 5]

const total = numbers.reduce((previousValue, currentValue) =>(previousValue+ currentValue))
// 15

4. find()

The find method returns the first element in the array if the element passes the condition of the callback function, if any value does not satisfy the condition it returns undefined

const numbers = [1, 2, 3, 4, 3]

const findThree = numbers.find(num => num === 3)
// 3 it only return first element that matched the condition

5. includes()

The includes method in javascript checks if the array contains item passed in the method based on results it returns true or false

const numbers = [1, 2, 3, 4, 5]

const doesItIncludeFive = numbers.includes(5)
// true

conclusion

I just touched the surface of methods in javascript but these are the most frequently used methods in your development, many of them are similar they all loop through the array and perform some action.