Array Methods Which Every JS developer Must Master

Most applications deal with a list of values, which in JavaScript are often stored in an Array. In order to write clean code, it is imperative that we, JavaScript developers, master the methods which the Array.prototype provides and know when it is appropriate to use each of them. MDN provides an extensive documentation for these Array methods. From my experience I've come to love few of them for one main reason: they don't change the existing array but return a new array with the needed values. If you have been developing with JavaScript for so long you might be used to the traditional push and pop which manipulate and mutate the array, it should no longer be the case.

Since ES6, JavaScript has tremendously evolved, developers we must not stay behind but evolve with the language. Practicing and mastering these methods makes coding with Array in JavaScript much more fun.

  1. map()

    map() is a higher-order method function (means a function that accepts another function as a parameter) that creates a new array populated with the results of calling the provided function on every element in the calling array.

    const fruits = ['apple', 'mango', 'orange', 'pear', 'pineapple']
    // Create a new array with uppercased fruit names
    const array = fruits.map(fruit => fruit.toUpperCase())
    console.log(array) //output:  ["APPLE", "MANGO", "ORANGE", "PEAR", "PINEAPPLE"]
    
  2. filter()

    filter() is a higher-order method that creates a new array containing only the values which pass the test implemented by the provided predicate function.

    const fruits = ['apple', 'mango', 'orange', 'pear', 'pineapple']
    // New array of fruits that start with the letter p
    const array = fruits.filter(fruit => fruit.startsWith('p'))
    console.log(array) //output:  ["pear", "pineapple"]
    
  3. find()

    find() method returns the first value in the array that satisfies the test provided by the predicate function parameter

    const fruits = ['apple', 'mango', 'orange', 'pear', 'pineapple']
    // Find the fruit that begins with m
    const array = fruits.find(fruit => fruit.startsWith('m'))
    console.log(array) //output: mango
    

    Notice the different between filter and find; filter() returns a new array of filtered values while find() a single value.

  4. every()

    every() method checks if all the array's values pass the test of the predicate function parameter; Its return value is a boolean value: true or false

    const locations = [
     {
       city: 'Kansas City',
       state: 'MO',
     },
     {
       city: 'Seattle',
       state: 'WA',
     },
     {
       city: 'Phoenix',
       state: '',
     },
     {
       city: 'Miami',
       state: '',
     },
     {
       city: 'Los Angeles',
       state: 'CA',
     },
    ]
    
    // Check every location has a state value
    const stateCheck = locations.every(location => location.state)
    console.log(stateCheck) //output: false
    
  5. some()

    some() method tests if at least one value in the array satisfies the test of the predicate function parameter. Same as every() it always returns a Boolean value

    // Check if some locations have state value
    const stateCheck = locations.every(location => location.state)
    console.log(stateCheck) //output: true
    
  6. reduce()

    reduce() method, as its name implies, reduces the array to single value by executing the provided function parameter on every value in the array from left to right and storing the return value in an accumulator (result). Again reduce does not change the original array.

    const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    const sum = numbers.reduce((total, value) => total + value, 0)
    console.log(sum) //output: 55
    
  7. sort()

    sort() method sorts the array's values in place either in the ascending order or in the descending order.

    const fruits = ['Banana', 'Orange', 'Apple', 'Mango']
    console.log(fruits.sort()) //output: ["Apple", "Banana", "Mango", "Orange"]
    

    It is important to note that by default sort() sorts the array's values as strings. For this reason, if numbers are sorted as strings, "25" is bigger than "100", because "2" is bigger than "1", and the sorting result for numbers will be incorrect.

    The good news sort() accepts compare function parameter that can be used to address the issue.

    const points = [40, 100, 1, 5, 25, 10]
    const sortedPoints = points.sort(function(a, b) {
     return a - b
    })
    console.log(sortedPoints) //output: [1, 5, 10, 25, 40, 100]
    
  8. concat()

    concat() method returns a new array containing this array joined with one or multiple other arrays.

    const fruits1 = ['apple', 'mango', 'orange', 'pear', 'pineapple']
    const fruits2 = ['kiwi', 'strawberry']
    const fruits3 = fruits1.concat(fruits2)
    console.log(fruits3) //output: ["apple", "mango", "orange", "pear", "pineapple", "kiwi", "strawberry"]
    

    Bonus: Another way to combine multiple arrays into one consists of using the spread operator, preferably you should choose to use spread over concat() because the spread syntax is more concise and easier to write. The only advantage of concat() is that takes both array and non-array values. The quick rule to choose is that you are dealing with arrays only, use spread; if there is the possibility of a non-array, use concat() for merging.

For conclusion, master the Array methods and have fun building.