Most Used Array Methods In JavaScript

What is an Array in JavaScript?

In JavaScript, arrays can contain any elements of type String, Number, Objects, and also other arrays.

const array = ['iwritecode', false, {}, [1,2,3]]

For simplicity, we can divide array methods into groups.

☑ Add/remove items

✅ Add/remove items from start and end position

✔ array.push()

push() is used to add elements at the end of an array.

✔ array.pop()

pop() is used to remove elements at the end of an array.

✔ array.unshift()

unshift() is used to add elements at the starting position of an array.

✔ array.shift()

unshift() is used to remove the first element of an array.

✅ Add/remove items using splice() method

syntax is array.splice(start, num. of items to be deleted, elem1, ... ,elemN) using splice we can add and remove items from the array really easily.

✔ deleting element of an array

let array = ['hello', 'java', 'script'];
array.splice(1,1); // from index 1 remove 1 element
console.log(array); // output => ['hello', 'script'];

✔ deleting 2 elements and replacing them with 2 other elements of an array

let array = ['hello', 'java', 'script'];
array.splice(0,2,'ES6','ecma'); // remove 2 first elements and replace them with other 2 elements
console.log(array); // output => ['ES6', 'ecma', 'script'];

✔ splice method returns removed elements of array

let array = ['hello', 'java', 'script'];
let removedElements = array.splice(1,1); // from index 1 remove 1 element
console.log(removedElements); // output => ['java'];

✔ using the splice method we can add elements without removing elements

this can be achieved by setting num. of items to be deleted to 0

let array = ['hello', 'java', 'script'];
array.splice(2,0,'ES6','ecma');
console.log(array); // output => ['hello', 'java', 'ES6', 'ecma', 'script'];

✅ Creating subarrays and copy of array using slice() method.

syntax : array.slice(start, end)
It returns a new array copying to it all items from index start to end (not including end).

let array = ['hello', 'java', 'script'];
console.log(array.slice(0,1);); // output => ['hello', 'java'];

✅ Concatinating two or more arrays or elements into one single array using concat() method

syntax : array.concat(arg1, arg2)

It accepts any number of arguments -> either arrays or values. The result is a new single array containing items from array, then arg1, arg2 etc.

let arr = [1, 2];

// create an array from: arr and [3,4]
alert( arr.concat([3, 4]) ; // 1,2,3,4

☑ To search element of array

✅ indexOf/lastIndexOf methods

arr.indexOf(item, from) – looks for item starting from index from, and returns the index where it was found, otherwise -1.
arr.includes(item, from) – looks for item starting from index from, returns true if found.

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

The method arr.lastIndexOf is the same as indexOf, but looks from right to left.

let fruits = ['Apple', 'Orange', 'Apple']

alert( fruits.indexOf('Apple') ); // 0 (first Apple)
alert( fruits.lastIndexOf('Apple') ); // 2 (last Apple)

☑ Transform an array

✅ reverse method

The method arr.reverse reverses the order of elements in arr.

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1

✅ split and join methods

The split() method splits the string into an array.

let names = 'Bilbo, Gandalf, Nazgul';

let arr = names.split(', ');
console.log(arr); // output => [Bilbo, Gandalf, Nazgul]

The join() does the reverse to split. It creates a string of arr items.

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // glue the array into a string using ;

alert( str ); // output => "Bilbo;Gandalf;Nazgul"