DEV Community

Suraj Auwal
Suraj Auwal

Posted on • Updated on

Array methods you must know as a JavaScript Developer

This article is a follow up of my
object methods article

Arrays are crucial part of javascript. They let us store multiple elements in a single variable. Imagine you have 100 contacts, creating a variable for each one will be very hard. With arrays, you can store the contacts in a single variable.

Arrays come with built-in methods that give us the power to mutate and transform data as we see fit.

In this article, we'll take a look at 10 array methods and their use cases.

1. Filter()

Have you heard of Higher order functions? Basically, higher order functions are methods that take a function as a parameter or return a function as an output just like the filter method. The filter method literally filters through an array an return an output base on the condition (function) it takes as an argument.

const employees = [
  {
    id: '001',
    name: 'Siradji',
    isPermanent: true,
  },
  {
    id: '002',
    name: 'Lydia',
    isPermanent: false,
  },
];

// Filters through employees array and return permanent employees.

const permEmployees = employees.filter(
  (employee) => employee.isPermanent === true
);
console.log(permEmployees);
//  [{
//     id: '001',
//     name: 'Siradji',
//     isPermanent: true,
//   }]
Enter fullscreen mode Exit fullscreen mode

2. Push()

This is perhaps one of the most used Array methods. The push method inserts the element it takes as an argument to the end of an existing array.

const fruits = ['banana', 'mango', 'apple', 'kiwi'];

fruits.push('orange');

console.log(fruits);

// [ "bananan", "mango", "apple", "kiwi", "orange"]
Enter fullscreen mode Exit fullscreen mode

3. Join()

This method creates and returns a string by joining all the elements inside of an array separated by commas or string.

const names = ['Ola', 'james', 'jackie', 'nina'];
const joinAll = names.join('');

console.log(joinAll);
// Olajamesjackienina

const dashSeperator = names.join('-');

console.log(dashSeperator);
// Ola-james-jackie-nina
Enter fullscreen mode Exit fullscreen mode

4. Map()

Remember Higher order functions? This also recieve a function as an argument. It creates a new array from the result of the argument it took.

const news = [
  {
    title: 'finally, tom has managed to eat jerry mouse',
    publishedAt: 10,
    isAHit: true,
  },
  {
    title: 'UFO spotted in califionia',
    publishedAt: 11,
    isAHit: true,
  },
]
const newsTitle = news.map( news => news.title)

console.log(newsTitle)
// ["finally, tom has managed to eat jerry mouse",
// "UFO spotted in califionia"]

];
Enter fullscreen mode Exit fullscreen mode

5. Splice()

This method removes or replaces an element of an existing array. Note that this method mutate the original array.

//  replace an element
const cars = ['audi', 'volvo', 'benz', 'honda'];

//  @params start index, delete count, new dara
cars.splice(1, 0, 'BMW');

console.log(cars);
// ["audi", "volvo", "BMW", "benze", "honda"]
Enter fullscreen mode Exit fullscreen mode

6. Concat()

I reckon everyone in the javascript community knows what concatenations is. This method is self-explanatory. From the name, it concatenates two arrays into one. The method is called on the first array, and takes the second array as an argument.

const africa = ['nigeria', 'niger', 'ghana', 'kenya'];
const asia = ['korea', 'japan', 'vietnam', 'china'];

const countries = africa.concat(asia);

console.log(countries);

// ["nigeria", "niger", "ghana", "kenya", "korea", "japan", "vietnam", "china"]
Enter fullscreen mode Exit fullscreen mode

7. Some()

Ah! here comes my fave array method. This method matches every element with the function it recieve and return a boolean.
i have used this method many times and below is an example of a recent use case.

const postcodes = ['45220', '46689', '56322', '44520', '23252', '6422'];

const { postcode } = { name: 'james', paid: true, postcode: 45220 };

const isValidPostCode = postcodes.some((code) => code === postcode);

console.log(isValidPostCode);

// true
Enter fullscreen mode Exit fullscreen mode

What happened here? Let say we are building an order form. We have certain postcodes that we deliver to and don't want the customer to place an order to a location that we don't deliver. so we pull out the postcode they entered in the order form(line 2) and validate it using the some method. In the above code block, isValidPostCode will be true because the postcode matches what we have inside of our postcodes array.

8. Sort()

It wont be fun if we cannot sort the elements inside of an array. Fortunately, There's a method that let us do just that. The sort method in javascript returns an array of sorted elements base on the function it recieve as an argument. By default, it sort in ascending, but we can change that.

const fruits = ['banana', 'mango', 'apple', 'kiwi'];

fruit.sort();

console.log(fruits);

// ["apple", "banana", "kiwi", "mango"]

const numbers = [9, 5, 7, 3, 2];

//  descending
numbers.sort((a, b) => b - a);

console.log(numbers);
// [9, 7, 5, 3, 2]

// ascending
numbers.sort((a, b) => a - b);
console.log(numbers);
// [2, 3, 5, 7, 9]
Enter fullscreen mode Exit fullscreen mode

9. FindIndex()

Finding the index of an element inside of array can be quite daunting espcially if that array is very big. Thankfully, with the findIndex method, we can do that with ease. The findIndex method takes a function and returns the index of the first element or a -1 If the element does not exist.

const cars = ['audi', 'volvo', 'benz', 'honda'];

//  returns true
const carIndex = cars.findIndex((car) => car === 'honda');

console.log(carIndex);
// 3

//  returns false
const carIndex = cars.findIndex((car) => car === 'toyota');
console.log(carIndex);
//  -1
Enter fullscreen mode Exit fullscreen mode

10. Slice()

This method slice through an array and returns the sliced part base on the starting index and slice count. it takes two arguments. The first argument is the starting index and the second argument the is the slice count from the starting index.

const asia = ['korea', 'japan', 'vietnam', 'china'];

// @params starting index, slice count
const sliced = asia.slice(1, 3)

console.log(sliced)
// ['japan', 'vietnam']
Enter fullscreen mode Exit fullscreen mode

You can check out the github repo here. Don't forget to leave a star.

Thanks for reading and I hope you learn something from this article.

Top comments (9)

Collapse
 
maxart2501 profile image
Massimo Artizzu

Here are my tips on array methods:

  • avoid mutating methods;
  • push and sort are acceptable but be extra careful;
  • splice is also very slow, and if you need to use it, you're using a mutable approach and that's a bad practice;
  • includes is a very expressive method;
  • flat is great;
  • reduce has received some backlash lately... and it's probably justified;
  • none knows why this method even exists (spoiler alert: some actually know).
Collapse
 
siradji profile image
Suraj Auwal

That's very helpful Massimo.

Collapse
 
sam79733 profile image
Gyanendra Srivastava

Very useful.

Collapse
 
siradji profile image
Suraj Auwal

Glad you liked it.

Collapse
 
sanderdebr profile image
sanderdebr

Cool! The some() method I haven't used but now I will.

Collapse
 
siradji profile image
Suraj Auwal

You should definitely check it out. I use it frequently.

Collapse
 
benalidjamel profile image
benali djamel
  1. splice should be ["audi", "BMW", "volvo", "benz", "honda"] not ["audi", "volvo", "BMW", "benze", "honda"]

thank you

Collapse
 
siradji profile image
Suraj Auwal

Thanks for pointing out.

Collapse
 
alamin__yusuf profile image
Al-amin Yusuf

Nice article siradji! I love your post and i hope that you will continue writing.