Array manipulation JavaScript (MFR)

What is a array in javascript ?

An array allows you to store a collection of items under a common variable name. In JavaScript, an array is not a primitive; that is to say, it can have methods and properties. So, the characteristics of an array in JavaScript are that they are adjustable, can contain multiple types of data, and are non-associative — you can access their values only through a positive integer index, starting at index 0, meaning they are zero-indexed. One last thing about arrays is that when you create copies of them, it’s called shallow copies, which means that if you modify an element in the copy using methods like slice or the spread syntax ([...arrayName]) or from(), you are actually modifying the original array as well.

Get Yoann Rivet’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Now that we have seen what an array is, let’s learn how to manipulate it. For this, I will show you three methods: map, filter, and reduce (MFR).

Map() method:

Let’s start with map. map is used to create a new array by applying a function to each element of the original array. It does not modify the original array as it returns a new array containing the results of the function.

Let's take an example:

const array = [1, 2, 3, 4, 5];
const doubledArray = originalArray.map(num => num * 2);
console.log(doubledArray) //Output: [2, 4, 6, 8, 10]

In this example, you can see that we start with a simple array where we want to return the double of each element. To achieve this, we use map, iterating over each element (represented by num), and applying the desired function.

Filter() method:

Secondly, let’s talk about filter. The filter method is used to create a new array that contains only the elements satisfying a condition defined by a function. It does not modify the original array.

Example:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const oddNumbers = numbers.filter(num => num % 3 === 0);
console.log(oddNumbers); // Output [3, 6, 9]

In this example, we use filter to retrieve the odd numbers. The condition specified in the function (num % 3 === 0) checks if each element is divisible by 3. Only the elements that satisfy this condition are included in the new array oddNumbers.

Reduce() method:

Finally, let’s look at the reduce method, which, in my opinion, is the most challenging of the three. It is used to reduce the elements of an array to a single value by applying a function that takes two arguments: the accumulator and the current element, returning the new value of the accumulator. It can also take an optional argument to specify an initial value for the accumulator. In essence, the accumulator stores the result of the function for each iteration and takes the accumulator for the next operation.

Example:

const numbers =  [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulateur, currentValue) => accumulateur + currentValue, 0);
console.log(sum); // Output: 15

In this example, we have an array containing 1, 2, 3, 4, 5. The goal is to reduce this array to a single value using the reduce method. In this example, the accumulator starts at 0, and the function applied is addition of the accumulator and the current value. So, for the first step, the accumulator is 0, and we apply the formula, which is accumulator + currentValue, so 0 + 1 = 1. The accumulator becomes 1, and this process repeats: 1 + 2 = 3, 3 + 3 = 6, 6 + 4 = 10, 10 + 5 = 15. This is how the function operates on the array and returns this value.