Most Important JavaScript Array Methods You Should Know

Arrays in JavaScript are dynamic and can contain a collection of elements of mixed types including strings, numbers and objects.

The following methods are widely used in JavaScript and make the JavaScript code clean, modularized and easy to understand.

find()

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

Find with array of elements

const numbers = [5,12,6,10,15,20]; 
const found = numbers.find(elem => elem > 10); 
console.log(found); 
// expected output: 12

Find with array of Objects

const arr = [
    { name:"string 1", value:"One" },
    { name:"string 2", value:"Two" }
];

const results = arr.find(elem => elem.name === 'string 1');
console.log(results); 
// expected output: {name: "string 1", value: "One"}

findIndex()

The findIndex() method returns the index of the first element in the array that satisfies the provided condition. Otherwise, it returns -1, indicating that no element found from the array.

const arr = [14,12,20,40,60,70]; 
const index = arr.findIndex(elem => elem > 50); 
console.log(index); 
// expected output: 4
const index = arr.findIndex(elem => elem > 80); 
console.log(index); 
// expected output: -1

filter()

The filter() method returns a new array with all elements that satisfies the condition. If it finds an array element filter()returns the values of that array elements. Otherwise, it returns empty array.

const numbers = [5,12,6,10,15,20]; 
const found = numbers.filter(elem => elem > 10); 
console.log(found); 
// expected output: [12, 15, 20]
const numbers2 = [5,12,6,10,15,20]; 
const found2 = numbers2.filter(elem => elem > 40); 
console.log(found2); 
// expected output: []

map()

The map() method creates a new array with the results of calling a function for every array element. map() does not execute the function for array elements without values (It will return empty array) and this method does not change the original array.

const array = [1, 2, 4, 10];
// pass a function to map
const mapArray = array.map(x => x * 2);
console.log(mapArray);
// expected output: [2, 4, 8, 20]

every()

The every() method checks if all elements in an array pass the provided condition. If it finds an array element where the function returns a false value, every() returns false (and does not check the remaining values). If no false occur, every() returns true.

Note: every() does not execute the function for array elements without values. every() does not change the original array.

const arr = [10,6,15,20,40];
let result = arr.every(elem => elem > 5);
console.log(result) // expected output: true
let result2 = arr.every(elem => elem > 50);
console.log(result2) // expected output: false

fill()

The fill() method fills the all elements in an array with a static value. You can specify the position of where to start and end the filling. If not specified, all elements will be filled.

Note: this method overwrites the original array.

const arr = [10,6,15,20,40];
let result = arr.fill(10);
console.log(result) // expected output: [10,10,10,10,10]
const arr2 = [10,6,15,20,40,50];
let result2 = arr2.fill(100,2,4);
console.log(result2) // expected output: [10, 6, 100, 100, 40, 50]

arr2.fill(100,2,4) 100 is value to fill the array, 2 is (Optional) the index to start filling the array (default is 0), 4 is (Optional) the index to stop filling the array (default is array.length).

includes()

The includes() method determines whether an array contains a specified element. This method returns true if the array contains the element, and false if not.

const arr = ["Banana", "Orange", "Apple", "Mango"];
const result = arr.includes("Banana");
console.log(result); // expected output: true
const result2 = arr.includes("Lemon");
console.log(result2); // expected output: false

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(["foo",10]); // true 
Array.isArray({foo: 123}); // false 
Array.isArray('foo'); // false 
Array.isArray(undefined); // false

some()

The some() method checks if any of the elements contained in an array passes a test. If at least one of the elements passes test, true is returned.

const arr = [10,20,30,40,3];
const result = arr.some(elem => elem < 10);
console.log(result); // expected output: true

toString()

It returns a string value of all the array elements separated by a comma (,).

console.log(['a', 'boy', 'from', 'mars'].toString());
// expected output: 'a , boy, from, mars'

join()

The join() method returns the array as a string. It behaves just like toString() for Arrays, but you can also specify the separator. The default separator is comma (,).

Note: this method will not change the original array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join());
// expected output: Banana,Orange,Apple,Mango
console.log(fruits.join(" and "));
// expected output: Banana and Orange and Apple and Mango

reverse()

This method changes the position of elements within the array. The first element goes to the last position and the last element goes to the first position. The method returns the reversed array.

console.log([1, 2, 3, 4, 5].reverse());
// expected output: [5, 4, 3, 2, 1]
const months = ['Dec', 'Nov', 'Oct', 'Sept', 'Aug', 'July', 'June', 'May', 'April', 'Mar', 'Feb', 'Jan'];
// Reverse order of array
const result = months.reverse();
console.log(result); // expected output: ["Jan","Feb","Mar","April","May","June","July","Aug","Sept","Oct","Nov","Dec"]

slice()

The slice() method returns the selected elements in an array, as a new array object. The slice() method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument.

Slice returns array elements from the “start” up until just before the “end” specifiers.

array.slice(start, end)

Note: The original array will not be changed.

console.log([1, 2, 3, 4, 5].slice(1)); 
// expected output: [2, 3, 4, 5]
const numbers = [2, 3, 4, 5, 6];
const sliced = numbers.slice(2,4);
console.log(sliced);

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

splice()

The splice() method adds/removes items to/from an array, and returns the removed item(s).

Note: This method changes the original array.

const numbers = [1, 2, 4, 5];
// Add new element from index 2 and remove no element
numbers.splice(2, 0, 3); // expected output: [1, 2, 3, 4, 5]
// Add new element from index 4 and remove element at index 4
const oddNumbers = [1, 3, 5, 7, 11];
oddNumbers.splice(4, 1, 9); // expected output: [1, 3, 5, 7, 9]
// Remove element at index 3
oddNumbers.splice(3, 1); // expected output: [1, 3, 5, 9]

// New array of todos
const todos = [{name: 'finish food', id: 1}, {name: 'Clean room', id: 2}, {name: 'Water plants', id: 3}];
// Delete one todo in the 1 index
todos.splice(1, 1);
// Output result
console.log(todos);
// expected output: [{"name":"finish food","id":1},{"name":"Water plants","id":3}]

Difference between slice() and splice()

The splice() method returns the removed item(s) in an array and slice() method returns the selected element(s) in an array, as a new array object. … The splice() method changes the original array and slice() method doesn’t change the original array.

//splice
var array=[1,2,3,4,5];
console.log(array.splice(2));

//slice
var array2=[1,2,3,4,5]
console.log(array2.slice(2));


console.log("----after-----");
console.log(array);
console.log(array2);
[   3,   4,   5 ]
[   3,   4,   5 ]
----after-----
[   1,   2 ]
[   1,   2,   3,   4,   5 ]

concat()

The concat() method is used to join two or more arrays. This method does not change the existing arrays, but returns a new array, containing the values of the joined arrays.

const framework = ['angular', 'react', 'vue']; 
const languages = ['java', 'php', 'python', 'javaScript', 'go'];
const result = languages.concat(framework); 
console.log(result); 
// expected output: Array ['java', 'php', 'python', 'javaScript', 'go', 'angular', 'react', 'vue']

sort()

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

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

Sort numbers in an array in ascending order:

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

Sort numbers in an array in descending order:

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

Add/Remove Items

We already know methods that add and remove items from the beginning or the end.

const arr = [1,2,3,4]
arr.push(…items) - adds items to the end,
arr.pop() - removes an item from the end,
arr.shift() - removes an item from the beginning,
arr.unshift(…items) - adds items to the beginning.

These are most of the common JavaScript array methods.