When I started learning modern JavaScript (or ES6 😏), array methods were one of the most challenging things for me to wrap my head around. I had no idea what to do with these , , & stuff. Thankfully, now I understand them. maps filters reduce I believe that the best way to understand them properly would be to try to implement them on our own. To understand this post, you'll need an understanding of for loops, arrays (duh), functions (also arrow functions), callbacks &  the 🌝. You should be able to read the example code & understand what each method does under the hood. Btw if you don't know what callbacks are, here's my explanation. ability to interpret code Callback Functions (a crash course) A callback function is just a function that is passed as an argument to another function, and this callback function will be then ( get it? 🤯) internally when it's needed. called back callback function cb() {
  console.log("this is my callback function...");
}

function someStuff(cb) {
  // doing some stuff...
  console.log("done with it...");
  // maybe doing some more stuff...
  cb();
  // again doing something...
}

someStuff(cb); Output: done with it...
this is my callback function... You can also write it like: someStuff(() => {
  console.log("this is my callback function...");
});

someStuff(function () {
  console.log("this is my callback function...");
}); All three methods are equivalent & will produce the same output. What's ultimately happening is that you are just passing a function as an argument, and it's being called internally when it's needed. That's it. Now coming to array methods, this is how I want you to think about them: An array method will take a callback function. Now internally, this method will create a new array. Then it will 'run a for loop' & iterate over each element of this array. For each iteration, the current element will be passed as an argument to the callback function, which will then with that value. do something Then the value that is returned by the callback function by the method in some way to add the current new value to the resultant array. (specifics differ for each method) is used After it's done with all the elements, it will return the new array. Notes: of the array methods the original array & will return an entirely new array. Most will not change This was just a general & informal way to understand the process. The callback function will also get the . index of the current element as its second argument Now let's look at some example implementations 🚀. Btw each example will have these: Me blabbering something 🤡 Implementation code 🧑‍💻 Output 💻 Code's explanation 🧠 Example 1: map() method The JavaScript map method 'transforms' an array into a new array by calling a callback function on each element, and populating the resultant array with its return value. The reason I enclosed 'transforms' in quotes is because it actually modify the original value. does not function map(arr, callback) {
  const result = [];
  for (let i = 0; i < arr.length; ++i) {
    result.push(callback(arr[i], i));
  }

  return result;
}

const numbers = [2, 4, 9, 10];
const squares1 = numbers.map((num) => num ** 2);
const squares2 = map(numbers, (num) => num ** 2);

console.log(squares1);
console.log(squares2); Output: [ 4, 16, 81, 100 ]
[ 4, 16, 81, 100 ] Explanation: result = [] (initially)

 2 ** 2 =   4 [4]
 4 ** 2 =  16 [4, 16]
 9 ** 2 =  81 [4, 16, 81]
10 ** 2 = 100 [4, 16, 81, 100]

returns [4, 16, 81, 100] Example 2: filter() method The filter method is essentially used to some elements based on some tests. The callback function for filter should return a boolean, which will be used to determine which elements will be there in the resultant array. If the callback returns true for the current element, only then it will be added to the resultant array. filter out function filter(arr, callback) {
  const result = [];
  for (let i = 0; i < arr.length; ++i) {
    if (callback(arr[i], i)) {
      result.push(arr[i]);
    }
  }

  return result;
}

const numbers = [0, -1, 4, -10, 5, 10, 100, -22];
const negatives1 = numbers.filter((num) => num < 0);
const negatives2 = filter(numbers, (num) => num < 0);

console.log(negatives1);
console.log(negatives1); Output: [ -1, -10, -22 ]
[ -1, -10, -22 ] Explanation: result = [] (initially)

  0 < 0 = ❌ []
 -1 < 0 = ✅ [-1]
  4 < 0 = ❌ [-1]
-10 < 0 = ✅ [-1, -10]
  5 < 0 = ❌ [-1, -10]
 10 < 0 = ❌ [-1, -10]
100 < 0 = ❌ [-1, -10]
-22 < 0 = ✅ [-1, -10, -22]

returns [-1, -10, -22] Example 3: reduce() method The reduce method is used to perform some operation on the array & somehow 'reduce it' to a single value. Basically, just take an array, do something on it & just return a single value. The callback for this method would take 2 arguments: & . The current value argument is the same old , but what is this though? accumulator current value element at the current index accumulator What is the ? accumulator The accumulator is just a variable that is given some initial value (or it would be set to the first element in the array by default) which then stores (or 🌝) the value that is returned by the callback. accumulates Finally, this value is then returned by . The most common example of this would be to calculate the sum of all the elements in an array, and I think that reading the code would be better than reading my words. reduce() function reduce(arr, callback, initialValue) {
  let accumulator = initialValue;
  let start = 0;
  if (arguments.length !== 3) {
    accumulator = arr[0];
    start = 1;
  }

  for (let i = start; i < arr.length; ++i) {
    accumulator = callback(accumulator, arr[i], i);
  }

  return accumulator;
}

const numbers = [-1, 5, 2, -3, 10];
const sum1 = numbers.reduce((a, c) => a + c, 10);
const sum2 = reduce(numbers, (a, c) => a + c, 10);

console.log(sum1);
console.log(sum2); Output: 23
23 Explanation: Here the initial value of the accumulator would be 10. Now here's what's gonna happen (I'm gonna refer to as : accumulator acc acc = 10 (initially)

acc = 10 + -1 =  9
acc =  9 +  5 = 14
acc = 14 +  2 = 16
acc = 16 + -3 = 13
acc = 13 + 10 = 23

returns 23 Btw if we hadn't provided the initial value to , then it would've been: reduce() acc = -1 (default: first element of the array)

acc = -1 +  5 =  4
acc =  4 +  2 =  6
acc =  6 + -3 =  3
acc =  3 + 10 = 13

returns 13 Thank you for reading my post. Your honest feedback (if any) is appreciated 🤝. Also published here.

Demystifying Javascript Array Methods with Practical Examples

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Introduction to Python Numpy for Beginners

A Deep Dive Into the JavaScript Some() Method

Array Filter vs Array Reduce vs For Loop

Array Manipulation: Understanding JavaScript Array Methods

Learn JavaScript Array Methods in just 8 Minutes!!

How to Utilize Javascript Array Methods

A Quick Introduction to Python Numpy for Beginners

A Deep Dive Into the JavaScript Some() Method

Array Filter vs Array Reduce vs For Loop

Array Manipulation: Understanding JavaScript Array Methods

Learn JavaScript Array Methods in just 8 Minutes!!

How to Utilize Javascript Array Methods

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps