Most Useful JavaScript Array Functions

You might have found the first article very much useful and this article is an extension of the 10 most useful JavaScript array methods. The following functions are widely used in industry and make the JavaScript code clean, modularized, and easy to understand.

Array.find()

The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If it finds an array element where the function returns a true value, find() returns the value of that array element (does not check the remaining values) Otherwise, it returns undefined.

const list = [12, 50, 65, 52, 44]; 
const found = list.find(elem => elem > 50); 
console.log(found); 
// expected output: 65

Array.findIndex()

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

const list = [12, 28, 8, 125, 58]; 
const index = list.findIndex(elem => elem > 50); 
console.log(index); 
// expected output: 3 
const index = list.findIndex(elem => elem > 150); console.log(index); 
// expected output: -1

Array.slice()

The slice() method returns the selected elements in an array, as a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

const languages = ['java', 'php', 'python', 'javaScript', 'go'];
console.log(languages.slice(2)); 
// expected output: Array ['python', 'javaScript', 'go'] 
console.log(languages.slice(2, 4)); 
// expected output: Array ['python', 'javaScript'] 
console.log(languages.slice(1, 5)); 
// expected output: Array ['php', 'python', 'javaScript', 'go']

You may also like: How to use Local Storage

Note: slice does not alter the original array. It returns a shallow copy of elements from the original array.

Array.shift()

The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array. The removed element from the array; undefined if the array is empty.

const framework = ['angular', 'react', 'vue', 'ember', 'svelte']; const shifted = framework.shift(); 
console.log('framework after #', framework); 
// Output: framework after # ['react', 'vue', 'ember', 'svelte'] 
console.log('Removed framework # ', shifted); 
// Output: framework after # angular

Array.entries()

The entries() method returns an Array Iterator object with key/value pairs for each index in the array.

const list = ['mysql', 'mongodb', 'oracle']; 
const iterator = list.entries(); 
console.log(iterator.next().value); 
// Output: Array [0, "mysql"] 
console.log(iterator.next().value); 
// Output: Array [0, "mongodb"]

Iterating with index and element using for loop

for (const [index, element] of list.entries()) { 
   console.log(index, ' = ', element); 
} 
// 0 = mysql 
// 1 = mongodb 
// 2 = oracle

Array.isArray()

The isArray() method checks whether the passed value is an array. This function returns true if the passed value is an array, otherwise returns false.

Array.isArray([1, 2, 3]); // true 
Array.isArray({foo: 123}); // false 
Array.isArray('foobar'); // false 
Array.isArray(undefined); // false

For backward compatibility, you can add the following

Note: Only implement if no native implementation is available

if (typeof Array.isArray === 'undefined') { 
     Array.isArray = function(obj) { 
        return Object.prototype.toString.call(obj) === '[object Array]'; 
     } 
};

Array.sort()

The sort() method sorts the elements of an array in place and returns the sorted array. The sort order can be either alphabetic or numeric, and either ascending or descending. By default, the sort() method sorts the values as strings in alphabetical and ascending order.

const months = ['March', 'Jan', 'Feb', 'Dec']; 
months.sort(); 
console.log(months); 
// Output: Array ["Dec", "Feb", "Jan", "March"] 
const numbers = [1, 34, 6, 27, 11]; 
numbers.sort(); 
console.log(numbers); 
// Output: Array [1, 11, 27, 34, 6]

Now if you want to sort the above example as an ascending order then you need to use compareFunction. Let’s see the below example.

function compareNumbers(a, b) { 
    return a - b; 
} 
const numbers = [1, 34, 6, 27, 11]; 
numbers.sort(compareNumbers); 
console.log(numbers); 
// Output: Array [1, 6, 11, 27, 34]

Array.concat()

The concat() method is used to combine two or more arrays into a new array. This method does not change the existing arrays but instead returns a new array.

const framework = ['angular', 'react', 'vue', 'ember', 'svelte']; const languages = ['java', 'php', 'python', 'javaScript', 'go'];
const langAndFramework = languages.concat(framework); console.log(langAndFramework); 
// Output: Array ['java', 'php', 'python', 'javaScript', 'go', 'angular', 'react', 'vue', 'ember', 'svelte']

You may also like: JavaScript Tips & Tricks

Originally published at https://www.codinghub.net.