Complete Guide on Arrays Methods in Javascript!!

In this article, you will learn about arrays and array methods.

What is an Array?

An array in Javascript is a data structure that stores multiple values of the same or different data type. Arrays are resizable. Array elements can be accessed by their indexes and the index starts from 0.

Javascript Array syntax:

const arrayname =[item1,item2,...]
// OR
const your_arrayname = new Array(item1,item2,...)

Let's see a few examples:

//Array elements of same datatype
const animals = ["Lion", "Zebra", "Camel", "Dog", "Cat"];

//Array elements of different datatype
const different = ['Krishna', 23, true];

//Array index starts from 0, accessing the array elements
console.log(animals[0]);
Output: 
Lion

Javascript Array Methods:

unshift() method - Adds one or more elements at the beginning of the array, and returns the new length of the array.

//Let us use the animals array for all the array methods
const animals = ["Lion", "Zebra", "Camel", "Dog", "Cat"];
console.log(animals.unshift('Elephant','Cheetah'));
//prints new length of the array

console.log(animals); 
//prints the updated array

Output:
7
[
  'Elephant', 'Cheetah', 'Lion', 'Zebra', 'Camel', 'Dog', 'Cat'
]

push() method - Add one or more elements at the end of the array, and returns the new length of the array.

//Push() method
console.log(animals.push("Fox","Hippopotamus","Tiger","Pig","Goat","Cow","Horse","Rabbit"));

Output:
15

shift() method - Removes the first element from an array and returns that removed element.
```
//Shift() method
console.log(animals.shift());

Output:
Elephant
```
pop() method - Removes the last element from an array and returns that removed element.
```
// Pop() method
console.log(animals.pop());

Output:
Rabbit
```

slice() method - Returns a copy of the portion of array elements, from specified start and end indexes (end not included) without changing the originals array elements.

// slice() method - array.slice(startposition, endposition) 
console.log(animals);
console.log(animals.slice(4)); // from index 4 to end
console.log(animals.slice(1,3)); //from index 1 to 2 (3rd index not included)

Output:
[
  'Cheetah','Lion','Zebra','Camel','Dog','Cat','Fox',  
  'Hippopotamus','Tiger', 'Pig','Goat', 'Cow','Horse'
]
[ 
  'Dog','Cat','Fox','Hippopotamus','Tiger','Pig','Goat','Cow',
  'Horse'
]
[ 'Lion', 'Zebra' ]

splice() method - Changes the array elements by removing or replacing the existing array elements and/or adding new elements. splice() method returns the removed/replacing elements.

// splice() method - array.splice(startposition,range(how many elements should be removed/replaced), replacevalues)
console.log(animals);
console.log(animals.splice(1,3,"Buffalo"));
console.log(animals);

Output:
[
  'Cheetah','Lion','Zebra','Camel','Dog','Cat','Fox',
  'Hippopotamus','Tiger','Pig','Goat','Cow','Horse'
]
[ 'Lion', 'Zebra', 'Camel' ]
[
  'Cheetah','Buffalo','Dog','Cat','Fox','Hippopotamus','Tiger',
  'Pig','Goat','Cow','Horse'
]

sort() method - Returns sorted list of array elements (default sort order is ascending order)

//sort method()
console.log(animals.sort());

Output:
[
  'Buffalo','Cat','Cheetah','Cow','Dog','Fox','Goat',  
  'Hippopotamus','Horse','Pig','Tiger'
]

reverse() method - Returns the list of array elements by reversing the array elements.

//reverse()
console.log(animals.reverse());

Output:[
  'Tiger','Pig','Horse','Hippopotamus','Goat','Fox','Dog','Cow',
  'Cheetah','Cat','Buffalo'
]

concat() method - Merges two or more arrays, returns merged array.

//concat() method
const extra_animals=["Monkey", "Chimpange", "Bear", "Ox", "Kangaroo"];
console.log(animals.concat(extra_animals));

Output:
[
  'Tiger','Pig','Horse','Hippopotamus','Goat','Fox','Dog','Cow',
  'Cheetah','Cat','Buffalo','Monkey','Chimpange','Bear','Ox',
  'Kangaroo'
]

map() method - Creates a new array populated with the results of calling a provided function on every element in the calling array.

//map() method 
let maths = [1, 4, 9, 16, 25]; 
console.log(maths.map(Math.sqrt)); 
console.log(maths.map(x => x * 2));

Output: 
[ 1, 2, 3, 4, 5 ] 
[ 2, 8, 18, 32, 50 ]

filter() method - Creates a copy of a portion of a given array, filtered down to elements that pass the given condition.

//filter() method 
console.log(animals.filter(animal => animal.length > 4));

Output: 
[ 'Tiger', 'Horse', 'Hippopotamus', 'Cheetah', 'Buffalo' ]

fill() method - Changes all elements in an array to a static value, from the given start to the given end index(end not included) of the array.

//fill() method -- array.fill(value to fill, startposition, endposition) const numbers = [1,2,3,4,5,6,7,8,9,10]; 
console.log(numbers.fill(20,4,7));

Output: [ 1, 2, 3, 4, 20, 20, 20, 8, 9, 10 ]

indexOf() method - Returns the first index at which a given element can be found in the array, or it returns -1 if not present.

//indexOf() method 
console.log(numbers); 
console.log(numbers.indexOf(20)); console.log(numbers.indexOf(100));

Output: 
[ 1, 2, 3, 4, 20, 20, 20, 8, 9, 10 ]
4 
-1

includes() method - Finds whether an array includes a certain value among its entries, returns true if the value is present else returns false.
```
//includes() method 
console.log(numbers.includes(10)); console.log(numbers.includes(0));

Output: 
true 
false
```

join() method - Creates and returns a new string by concatenating all of the elements in an array with a given delimiter.

//join() method 
console.log(animals.join(':'));

Output: Tiger:Pig:Horse:Hippopotamus:Goat:Fox:Dog:Cow:Cheetah:Cat:Buffalo

keys() method - Returns a new Array Iterator object that contains the keys for each index in the array.

//keys() method 
const keys = animals.keys(); for (const key of keys) { console.log(key); }

Output: 
0 1 2 3 4 5 6 7 8 9 10

lastIndexOf() method - Returns the last index at which a given element can be found when searched backwards in the array, or -1 if it is not present.

//lastIndexOf() method 
console.log(numbers); 
console.log(numbers.lastIndexOf(20));

Output: 
[ 1, 2, 3, 4, 20, 20, 20, 8, 9, 10 ] 
6

every() method - Checks whether all elements in the array pass the given condition, if yes returns true else returns false.

//every() method 
console.log([1, 13, 3].every((x) => x != 0)); console.log(numbers.every((x)=> x%2==0));

Output: 
true 
false

flat() method - Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

//flat() method array.flat(depth level) 
const array_flat=[1,,[2,3],[7,[45,[89,[100,67]]]],5,[90]]; console.log(array_flat.flat(1)); 
console.log(array_flat.flat(2)); 
console.log(array_flat.flat(3)); 
console.log(array_flat.flat(4));

Output: 
[ 1, 2, 3, 7, [ 45, [ 89, [Array] ] ], 5, 90 ] 
[ 1, 2, 3, 7, 45, [ 89, [ 100, 67 ] ], 5, 90 ] 
[ 1, 2, 3, 7, 45, 89, [ 100, 67 ], 5, 90 ] 
[ 1, 2, 3, 7, 45, 89, 100, 67, 5, 90 ]

forEach() - Executes a provided function for each array element.

//foreach() method 
numbers.forEach(element => console.log(element*2));

Output: 
2 4 6 8 40 40 40 16 18 20

Krishna vetthi's Blog

Krishna vetthi's Blog

Complete Guide on Arrays Methods in Javascript!!

Javascript Array Methods: