DEV Community

Cover image for My three most used javascript array methods
Tom Walsh
Tom Walsh

Posted on

My three most used javascript array methods

Original post here: TM––WLSH

Methods in javascript are awesome - they are very powerful and allow you to do some pretty incredible things. Here is my list of my three most used javascript methods (not in order).

  1. Map() Although I said these weren't in order, Map() is by far the javascript method that I use the most. Rather than copy and paste a definition from Mozilla, I'm going to try and define it myself, but the official explanation can he found here.

Map allows you to iterate over items within an array, and perform a function on each item. It then returns a new array, which includes the result of that function on each item.

Here is a small example:

// this is the original array
const array = [1, 2, 3, 4, 5];

// here we are adding 3 to each number in the array
const newArray = array.map(number => number + 3);

// this is us console logging the new array
console.log(newArray);

// the new array will be [4, 5, 6, 7, 8]
As you can see in the above, we iterate over each number in the array, perform the function (in this instance we add 3 to each number), and a new array is returned containing the new numbers.
  1. Push() Push() is a simple method, but it's very useful, and comes in handy almost every day! The official definition of Push() can be found here, but I think I'll be able to explain it quite well.

Push() does two things; it adds zero or more items to the end of an array, and it also returns the length of the amended array.

For example:

// this is our original array
const shoppingList = ['Bread', 'Milk', 'Chocolate'];

// using the push method returns the length of the array
const newShoppingListLength = shoppingList.push('Crisps');

// this is us console logging the count of the amended array
console.log(newShoppingListLength);

// the above will log: 4

// this is us console logging the amended array
console.log(shoppingList);

// the above will log: ['Bread', 'Milk', 'Chocolate', 'Crisps];
This method comes in handy when counting up things, such as a shopping list, or users, or anything else that you might add to a list. It allows you to add an item to the end of the list, and also allows you to quickly find the length of that list.
  1. Filter() Filter() is another really useful method. Filter() allows you to do a check on every item in an array, and then return a new array containing all of the items that passed that check.

For example:

// here is our original array
const colours = ['dark red', 'light blue', 'pink', 'light red', 'red', 'blue'];

// here we will filter the array based on colours that
// include the string 'red'
const redColours = colours.filter(colour => colour.includes('red'));

// this is us console logging the new colours array
console.log(redColours);

// the above will log: ['dark red', 'light red', 'red'];
This is a good method for filtering array items based on a string, a text length, or anything else. As you can see in this example, we have performed another method; the Includes() method, within the filter method.

Top comments (0)