# Must know magical array methods to get started over React, Angular, Vue, and other Javascript Frameworks/Libraries.

Hi, This is Jhani Mohammad. An enthusiast and aspiring React front-end engineer. Here, I'm going to share the most important array of methods that are often used in Javascript programming and its associated Frameworks/Libraries. It's essential for beginners to know the journey with React or any other JavaScript Frameworks/Libraries. Each topic covers with few examples and problem sets. I will make sure this post is clear and you get good knowledge about these topics.

Here are the following topics, I'll be covering in this section.

1. .forEach
2. .map
3. .filter
4. .some
5. .every
6. .reduce

Before I start, make sure you understand each topic and have some practice with the given examples. I'll be dividing each topic into its own block so it will get easier to understand and get it. I bet you'll be having a good time with these topics. So, Let's get started.

Let's begin with our first array family, i.e, forEach!

.forEach

Imagine working on larger projects and you still work with basic old for loop syntax. Yes, you can absolutely use it but your code might look bulky and old-fashioned way. What if we can achieve the same goal by using fewer lines of code, make sense right?

.forEach() is easier. Even though it’s the same number of lines, there’s less setup.

forEach() is a generic tool. when you can’t use other array methods to accomplish your goal, then .forEach is your perfect partner.

okay, enough talking. Let's dive into it!

The .forEach method is one of the several ways to loop through arrays. We can make a new array and use forEach to push values into the new array.

Note to yourself .forEach always returns undefined and very commonly we transform one array into another array with different values.

Anotomy

• It iterates through an array.
• Runs a callback function for each value in the array.
• returns 'undefined'.

-> We can call the parameters to the callback. -> We do not always need all three parameters. Use which you need, Just remember the order is important.

An example

let arr = [1, 2, 3];
arr.forEach((val, idx, arr) => {
  console.log(val);
});

/* OUTPUT
1
2
3
undefined
*/

Functions that do not have a return keyword will always output undefined.

Using .forEach in a function.

const halfValues = (arr) => {
  let newArr = [];
  arr.forEach((val) => {
    newArr.push(val / 2);
  });
  return newArr;
};

halfValues([2, 3, 4]);

/* OUTPUT
(3) [1, 1.5, 2]
*/

Let's practice some problem sets.

1. Let's write a function called onlyEvenValues which accepts an array and returns a new array with only the even values in the array passed to the function.

const onlyEvenValues = (arr) => {
  let newArr = [];
  arr.forEach((val) => {
    if (val % 2 == 0) {
      newArr.push(val);
    }
  });
  return newArr;
};

onlyEvenValues([1, 2, 3, 4, 5]);

/* OUTPUT
(2) [2, 4]
*/

2. Let's write a function called showFirstAndLast which accepts an array of strings and returns a new array with only the first and last character of each string.

const showFirstAndLast = (arr) => {
  let newArr = [];
  arr.forEach((val) => {
    newArr.push(val[0] + val[val.length - 1]);
  });
  return newArr;
};

showFirstAndLast(['Liam', 'Emma'])

/* OUTPUT
(2) ['Lm', 'Ea']
*/

3. Let's write a function called addKeyAndValue which accepts an array of objects, a key, and a value. which returns the array passed to the function with the new key and value-added for each object.

const addKeyAndValue = (arr, key, value) => {
  arr.forEach((val) => {
    val[key] = value;
  });
  return arr;
};

addKeyAndValue(
  [{ name: "Liam" }, { name: "Emma" }, { name: "Oliver" }],
  "title",
  "instructor"
);

/* OUTPUT
0: {name: 'Liam', title: 'instructor'}
1: {name: 'Emma', title: 'instructor'}
2: {name: 'Oliver', title: 'instructor'}
*/

4. Let's write a function called vowelCount which accepts a string and returns an object with keys as the vowel and the values as the number of times the vowel appears in the string.

const vowelCount = (str) => {
  let splitStr = str.split("");
  let obj = {};
  var vowels = "aeiou";
  splitStr.forEach((letter) => {
    if (vowels.indexOf(letter.toLowerCase()) !== -1) {
      if (letter in obj) {
        obj[letter]++;
      } else {
        obj[letter] = 1;
      }
    }
  });
  return obj;
};

vowelCount("Charlotte");

/* OUTPUT
{a: 1, o: 1, e: 1}
*/

Note: .forEach can be used to override values in an array or change something internally.

---

.map

Yeah, here is my favorite array method .map. Very much used and so beautiful it is.

As we already discussed, .forEach always returns undefined, and very commonly we'll want to transform one array into another array with different values.

we could make a new array and use .forEach to push values into a new array but there's an easier way to do that by using .map.

Anotomy

• .map creates a new array
• Iterates through an array.
• Runs a callback function for each value in the array.
• Adds the result of that callback function to the new array.
• Returns the new array.

An example

let arr1 = [1, 2, 3];
arr1.map((val, idx, arr) => {
  return val * 2;
});

/* OUTPUT
(3) [1, 2, 3]
*/

Try another example

const tripleValues = (arr) => {
  return arr.map((val) => {
    return val * 3;
  });
};
tripleValues([3, 4, 1, 2]);
/* OUTPUT
(4) [9, 12, 3, 6]
*/

Let's practice some more problem sets.

Let's write a function called valTimesIndex which accepts an array and returns a new array with each value multiplied by the index it is currently at in the array.

const valTimesIndex = (arr) => {
  return arr.map((val, idx) => {
    return val * idx;
  });
};

valTimesIndex([1, 2, 3]);
/* OUTPUT
(3) [0, 2, 6]
*/

Let's write a function called extractKey which accepts an array of objects and some keys and returns a new array with the value of that key in each object.

const extractKey = (arr, key) => {
  return arr.map((val) => {
    return val[key];
  });
};

extractKey([{ name: "Noah" }, { name: "William" }, { name: "Henry" }], "name");
/* OUTPUT
  (3) ['Noah', 'William', 'Henry']
*/

Let's write a function called extractFullName which accepts an array of objects and returns a new array with the value of the key with a name of 'first' and the value of a key with the name of 'last' in each object and concatenate together with space.

const extractFullName = (arr) => {
  return arr.map((val) => {
    return val.first + " " + val.last;
  });
};

extractFullName([
  { first: "Noah", last: "a" },
  { first: "William", last: "b" },
  { first: "Henry", last: "c" },
]);
/* OUTPUT
    (3) ['Noah a', 'William b', 'Henry c']
*/

When you would like a new array to be rewritten with the same length, then .map always be the best choice.

---

.filter

.filter is a function that is invoked on arrays and just like .map and .forEach it accepts a callback function.

It is different than the one we used in .forEach and .map because the result of the callback function will always be evaluated in boolean.

Anotomy

• .filter creates a new array
• Iterates through an array.
• Runs a callback function for each value in the array.
• If the callback function returns true, that value will be added to the new array.
• If the callback function returns false, that value will be ignored from the new array.

An example

let arr = [1, 2, 3];

arr.filter((value, index, array) => {
  //no need of if statement
  // Just return an expression
  // this evaluates to true or false
  return value < 2;
});

/* OUTPUT
  [1]
*/

Try another example

let instructors = [
  { name: "William" },
  { name: "Charlotte" },
  { name: "Mia" },
  { name: "Ava" },
];

instructors.filter((val, idx, arr) => {
  return val.name.length > 3;
});
/* OUTPUT
  [{name: 'William'}{name: 'Charlotte'}]
  */

Let's practice some more problem sets.

Let's write a function called filterByValue which accepts an array of objects with a key and returns a new array with all the objects that contain a respected key.

const filterByValue = (arr, key) => {
  return arr.filter((val) => {
    return val[key] != undefined;
  });
};

filterByValue(
  [
    { first: "William", last: "Son", isDogOwner: true },
    { first: "Charlotte", last: "Henry" },
    { first: "Benjamin", last: "Isabella", isDogOwner: true },
    { first: "James", last: "Amelia" },
  ],
  "isDogOwner"
);

/* OUTPUT
  0: {first: 'William', last: 'Son', isDogOwner: true}
  1: {first: 'Benjamin', last: 'Isabella', isDogOwner: true}
*/

2. Let's write a function called find which accepts an array and a value and returns the first element in the array that has the same value as the second parameter or undefined if the value is not found in the array.

const find = (arr, searchValue) => {
  return arr.filter((val) => {
    return val === searchValue;
  })[0];
};

find([1, 2, 3, 4, 5], 3);
/* OUTPUT
  3
*/

find([1, 2, 3, 4, 5], 10);
/* OUTPUT
  undefined
*/

3. Let's write a function called find findInObj which accepts an array of objects, a key, and some value to search for and returns the first found value in the object.

const findInObj = (arr, key, searchValue) => {
  return arr.filter((val) => {
    return val[key] === searchValue;
  });
};

findInObj(
  [
    { first: "William", last: "Son", isDogOwner: true },
    { first: "Charlotte", last: "Henry" },
    { first: "Benjamin", last: "Isabella", isDogOwner: true },
    { first: "James", last: "Amelia" },
  ],
  "isDogOwner",
  true
);
/* OUTPUT
  0: {first: 'William', last: 'Son', isDogOwner: true}
  1: {first: 'Benjamin', last: 'Isabella', isDogOwner: true}
*/

4. Let's write a function called removeVowels which accepts a string and returns a new string with all of the vowels removed. Every character in the new string should be lowercased.

const removeVowels = (str) => {
  let vowels = "aeiou";
  return str
    .toLowerCase()
    .split("")
    .filter((val) => {
      return vowels.indexOf(val) === -1;
    })
    .join("");
};

removeVowels("William");
/* OUTPUT
  'wllm'
*/

5. Let's write a function called doubleOddNumbers which accepts an array and returns a new array with all of the odd numbers doubled.

const doubleOddNumbers = (arr) => {
  return arr
    .filter((val) => {
      return val % 2 !== 0;
    })
    .map((val) => {
      return val * 2;
    });
};

doubleOddNumbers([1, 2, 3, 4, 5]);
/* OUTPUT
  (3) [2, 6, 10]
*/

---

.some

.some is a function that is invoked on arrays and iterates through each value in the array.

Anotomy

• .some Iterates through an array.
• Runs a callback on each value in the array.
• If the callback returns true for at least one single value, returns true.
• otherwise, returns false.

An example

var arr4 = [1, 2, 3];
arr.some((val, idx, arr) => {
  return val > 2;
});
/* OUTPUT
  true
*/

Try another example

const hasComma = (str) => {
  return str.split("").some((val) => {
    return val === ",";
  });
};

hasComma("This is kind"); //false
hasComma("This, is kind"); //true

Let's practice some more problem sets.

1. Let's write a function called hasOddNumbers which accepts an array and returns true if the array contains at least one odd number. else, return false.

const hasOddNumbers = (arr) => {
  return arr.some((val) => {
    return val % 2 === 0;
  });
};

hasOddNumbers([1, 2, 3, 4, 5]);
/* OUTPUT
  true
*/

2. Let's write a function called hasZero which accepts a number and returns true if that number contains at least one zero. else, return false.

const hasZero = (num) => {
  return num
    .toString()
    .split("")
    .some((val) => {
      return val === "0";
    });
};

hasZero(1000); //true
hasZero(1111); //false

---

.every

.everyis a function that is invoked on arrays and iterates through each value in the array.

Anotomy

• .every iterates through an array.
• Runs a callback on each value in the array.
• If the callback returns false for at least a single value, the entire array returns false.
• otherwise, returns true.

An example

let arr5 = [-1, -2, -3];

arr5.every((val, idx, arr) => {
  return val < 0;
});

/* OUTPUT
  true
*/

Try another example

const allLower = (str) => {
  return str.split("").every((val) => {
    return val === val.toLowerCase();
  });
};
allLower("This is jh"); //false
allLower("this is jh"); //true

Let's practice some more problem sets.

1. Let's write a function called hasOnlyOddNumbers which accepts an array and returns true if all numbers in the array are odd. else, return false.

const hasOnlyOddNumbers = (arr) => {
  return arr.every((val) => {
    return val % 2 !== 0;
  });
};

hasOnlyOddNumbers([1, 3, 5, 7]); //true
hasOnlyOddNumbers([1, 3, 5, 10]); //false

2. Let's write a function called hasNoDuplicates which accepts an array and returns true if there are no duplicates in the entire array. else, return false.

const hasNoDuplicates = (arr) => {
  return arr.every((val) => {
    return arr.indexOf(val) == arr.lastIndexOf(val);
  });
};

hasNoDuplicates([1, 2, 3, 1]); //false
hasNoDuplicates([1, 2, 3, 4]); //true

3. Create a function called hasCertianKey which accepts an array of objects and a key. Returns true if every object in the array contains that key, else returns false.

const hasCertianKey = (arr, key) => {
  return arr.every((val) => {
    return key in val;
  });
};

let arr7 = [
  { first: "William", last: "Son", isDogOwner: true },
  { first: "Charlotte", last: "Henry" },
  { first: "Benjamin", last: "Isabella", isDogOwner: true },
  { first: "James", last: "Amelia" },
];

hasCertianKey(arr7, "first"); // true
hasCertianKey(arr7, "isDogOwner"); // false

---

.reduce

Anotomy

• .reduce accepts a callback function and an optional second parameter.
• Iterates through an array.
• Runs a callback on each value in the array.
• The first parameter to the callback is either the first value in the array or the optional second parameter.
• The first parameter to the callback is after called accumulated.
• The returned value from the callback becomes the new value of the accumulator.

An example

let arr = [1, 2, 3, 4, 5];
arr.reduce((acc, nextValue) => {
  return acc + nextValue;
});
/* OUTPUT
  15
*/

Try another example

let arr = [1, 2, 3, 4, 5];
arr.reduce((acc, nextValue) => {
  return acc + nextValue;
}, 10);

/* OUTPUT
  25
*/

lets have another example

let arr = [5, 2, 3, 1, 5];
arr.reduce((acc, nextValue) => {
  if (nextValue in acc) acc[nextValue]++;
  else acc[nextValue] = 1;
  return acc;
}, {});

/* OUTPUT
  {1: 1, 2: 1, 3: 1, 5: 2}
*/

Let's practice some more problem sets.

1. Let's write a function called extractValue which accepts an array of objects and a key. It returns a new array with the value of each object at the key.

const extractValue = (arr, key) => {
  return arr.reduce((acc, next) => {
    acc.push(next[key]);
    return acc;
  }, []);
};

let exArr = [
  { first: "William", last: "Son", isDogOwner: true },
  { first: "Charlotte", last: "Henry" },
  { first: "Benjamin", last: "Isabella", isDogOwner: true },
  { first: "James", last: "Amelia" },
];

extractValue(exArr, "first");

/* OUTPUT
  (4) ['William', 'Charlotte', 'Benjamin', 'James']
*/

2. Let's write a function called vowelCount which accepts a string and returns an object with the key as the vowel and the values as the number of times the vowel appeared in the string.

const vowelCountRe = (str) => {
  let vowels = "aeiou";
  return str.split("").reduce((acc, next) => {
    if (vowels.indexOf(next.toLowerCase()) !== -1) {
      if (next in acc) acc[next]++;
      else acc[next] = 1;
    }
    return acc;
  }, {});
};

vowelCountRe("James JAck");

/* OUTPUT
  {a: 1, e: 1, A: 1}
*/

---

Are we done yet? Well, yeah!

To the extreme beginners, it looks mindblowing to you. Do not be discouraged there. Just practice it, again and again, then you will start loving it. You can find more sources on MDN docs.

To the Associates, To the Associates, I hope this gives good vibes towards the array method.. To be honest, I fall into your category and I feel pretty good when I dive into deep learning/working.

To the experts, The Gems! please allow/suggest improvements. I hope, I didn't take your important time and It helps you in some scenarios.

Heads up ~ I'll be writing blogs on React technology and sharing them with the beginners/Associates on only weekends. lemme know where I should start.

Okay, it's time to sign off.

Love j.