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()

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()

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()

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()

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()

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()

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()

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()

Array.isArray(["foo",10]); // true 
Array.isArray({foo: 123}); // false
Array.isArray('foo'); // false
Array.isArray(undefined); // false

some()

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

toString()

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

join()

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()

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()

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()

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()

//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()

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()

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

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.

Software Developer || Node.JS || MERN Stack