JavaScript Array Methods Explained With Examples

The Array is used to store multiple values in a single variable.

In JavaScript, there are three types of Array:

1. Single Dimensional Array
2. Two Dimensional Array
3. Multi-Dimensional Array

Here we are going to discuss single dimensional array initialization and some advanced functions to process JavaScript Arrays.

Create a JavaScript Array

// initialize blank array
var apps = [];
// initialize array with values
var apps = ["WhatsApp", "FaceBook", "Instagram"];

JavaScript Array Properties

• Constructor
• Length
• Prototype

Constructor

The constructor returns the function that created the Array object’s prototype.

  var apps = ["WhatsApp", "FaceBook", "Instagram"];
  console.log(apps.constructor);

Output

function Array() { [native code] }

It returns the value which is a reference to the function, not the name of the function:

1. JavaScript arrays the constructor property returns function Array() { [native code] }
2. JavaScript numbers the constructor property returns function Number() { [native code] }
3. JavaScript strings the constructor property returns function String() { [native code] }

Length

It returns the length of an array.

  var apps = ["WhatsApp", "FaceBook", "Instagram"];
  console.log(apps.length);

Output

3

Prototype

The prototype constructor allows us to add new properties and methods to the Array() object. After constructing a method, All arrays will have access to this method.

Let’s Make a new array method that transforms array values into the upper case:

Array.prototype.Ucase = function() {
  for (i = 0; i < this.length; i++) {
    this[i] = this[i].toUpperCase();
  }
};

var apps = ["WhatsApp", "FaceBook", "Instagram"];
apps.Ucase();
document.write(apps);

Output

WHATSAPP,FACEBOOK,INSTAGRAM

JavaScript Array Methods

1 – concat()

concat() method is used to concat two or more arrays.

var apps1 = ["WHATSAPP"];
var apps2 = ["FACEBOOK", "INSTAGRAM"];
var apps = apps1.concat(apps2); 
document.write(apps);

Output

WHATSAPP,FACEBOOK,INSTAGRAM

2 – copyWithin()

copyWithin() method is used to copy array elements to another position in the array.

var apps = ["WhatsApp", "FaceBook", "Instagram"];
document.write(apps.copyWithin(2,0));

Output

WhatsApp,FaceBook,WhatsApp

3 – entries()

entries() method returns key/value according to the array.

var apps = ["WhatsApp", "FaceBook", "Instagram"];
var f = apps.entries();

for (x of f) {
  console.log(x);
}

Output

WhatsApp
FaceBook
Instagram

4 – fill()

fill() method replaces the specified elements in an array with a static value.

var apps = ["WhatsApp", "FaceBook", "Instagram"];
apps.fill("Snapchat");
document.write(apps);

Output

Snapchat,Snapchat,Snapchat

5 – filter()

filter() method is used to create an array with all elements which pass the testFunction.

var data = [15, 25, 10, 60];

function testFunction(temp) {
  return temp >= 20;
}

document.write(data.filter(testFunction));

Output

25,60

6 – every()

every() method checks every array element for specified conditional function and returns true if every element in the array pass the testFunction.

var data = [15, 25, 10, 60];

function testFunction(temp) {
  return temp >= 20;
}

document.write(data.every(testFunction));

Output

false

7 – find()

find() method is used to get the first element’s value in the array that passes the testFunction.

var data = [15, 25, 10, 60];

function testFunction(temp) {
  return temp >= 20;
}

document.write(data.find(testFunction));

Output

25

8 – findIndex()

findIndex() method is used to get the first element’s Index in the array that passes the testFunction.

var data = [15, 25, 10, 60];

function testFunction(temp) {
  return temp >= 20;
}

document.write(data.findIndex(testFunction));

Output

1

9 – forEach()

forEach() method calls a function for every element in the array.

var sum = 0;
var data = [15, 25, 10, 60];
data.forEach(testFunction);

function testFunction(temp) {
  sum += temp;
  document.write(sum);
}

Output

110

10 – from()

from() method returns an array from a string.

var arr = Array.from("NICK");

document.write(arr);

Output

N,I,C,K

Read Also: How to Change Text After Page Load With Javascript

11 – includes()

includes() method checks whether an array contains a specified element at a specified location.

var data = [15, 25, 10, 60];
var x = data.includes(45, 3);

document.write(x);

Output

false

12 – indexOf()

indexOf() method is used to search the array for the specified element and returns its position. It returns -1 if the item is not found.

  var data = [15, 25, 10, 60];
  var x = data.indexOf(15);
  document.write(x);

Output

0

13 – isArray()

isArray() method is used to check whether an object is an array or not.

var data = [15, 25, 10, 60];
var x = Array.isArray(data);
document.write(x);

Output

true

Must Read: JavaScript isArray() Function

14 – join()

join() method converts the array as a string.

var apps = ["WhatsApp", "FaceBook", "Instagram"];
document.write(apps.join());

Output

WhatsApp,FaceBook,Instagram

15 – keys()

keys() method creates an Array object with the keys of an array.

var apps = ["WhatsApp", "FaceBook", "Instagram"];
var appk = apps.keys();

for (x of appk) {
  console.log(x);
}

Output

0
1
2

16 – lastIndexOf()

The lastIndexOf() method is used to search the array for the specified element and returns its position.

The search starts from the last index in the array, or at the specified index, and ends at the array’s beginning.

Returns -1 if an element is not found.

var apps = ["WhatsApp", "FaceBook", "Instagram"];
var x = apps.lastIndexOf("FaceBook");
document.write(x);

Output

1

17 – map()

map() method is used to create a new array with the results of calling each array element’s function.

var data = [4, 9, 16, 25];
document.write(data.map(Math.sqrt));

Output

2,3,4,5

18 – pop()

The pop() method is used to pop the last element from the array.

var apps = ["WhatsApp", "FaceBook", "Instagram"];
console.log(apps);
apps.pop();
console.log(apps);

Output

WhatsApp,FaceBook,Instagram
WhatsApp,FaceBook

19 – push()

push() method is used to add a new element to the end of an array and returns the new length.

var apps = ["WhatsApp", "FaceBook", "Instagram"];
document.write(apps);
apps.push("SnapChat");
document.write(apps);

Output

WhatsApp,FaceBook,Instagram
WhatsApp,FaceBook,Instagram,SnapChat

20 – reduce()

reduce() method converts(reduces) the array to a single value from Left to Right.

var data = [4, 9, 16, 25];

document.write(data.reduce(testFunction));

function testFunction(total, number) {
  return total + number;
}

Output

54

21 – reduceRight()

reduceRight() method converts(reduces) the array to a single value from Right to Left.

var data = [4, 9, 16, 25];

document.write(data.reduceRight(testFunction));

function testFunction(total, number) {
  return total + number;
}

Output

54

22 – reverse()

The reverse() method returns a new array with reverse order of items in a given array.

var apps = ["WhatsApp", "FaceBook", "Instagram"];
console.log(apps);
apps.reverse();
console.log(apps);

Output

WhatsApp, FaceBook, Instagram
Instagram, FaceBook, WhatsApp

23 – shift()

shift() method removes the first item of the array.

var apps = ["WhatsApp", "FaceBook", "Instagram"];
console.log(apps);
apps.shift();
console.log(apps);

Output

WhatsApp, FaceBook, Instagram
FaceBook, Instagram

24 – slice()

slice() method returns the selected items in an array as a new array object.

var apps = ["WhatsApp", "FaceBook", "Instagram","SnapChat","Hike"];
console.log(apps);
var x = apps.slice(1,4);
console.log(x)

Output

WhatsApp, FaceBook, Instagram, SnapChat, Hike
FaceBook, Instagram, SnapChat

25 – some()

some() method is used to check if any of the elements in an array passes a testFunction.

var data = [4, 9, 16, 25];
function testFunction(temp) {
  return temp >= 18;
}
document.write(data.some(testFunction));

Output

true

26 – sort()

sort() method sorts of array elements according to order.

var data = [4, 29, 26, 15];;
console.log(data);
data.sort(function(a, b){return a-b}); // sort array in ascending order
console.log(data);

Output

4, 29, 26, 15
4, 15, 26, 29

27 – splice()

splice() method adds specified elements to an array.

var apps = ["WhatsApp", "FaceBook", "Instagram"];
console.log(apps);
apps.splice(2, 0, "SnapChat","Hike");
console.log(apps);

Output

WhatsApp, FaceBook, Instagram
WhatsApp, FaceBook, SnapChat, Hike, Instagram

28 – toString()

toString() method converts an array to string.

var apps = ["WhatsApp", "FaceBook", "Instagram"];
var x = apps.toString();
document.write(x);

Output

WhatsApp,FaceBook,Instagram

29 – unshift()

unshift() method is used to add new elements to the beginning of an array and returns the new length.

var apps = ["WhatsApp", "FaceBook", "Instagram"];
console.log(apps);
apps.unshift("SnapChat","Hike");
console.log(apps);

Output

WhatsApp, FaceBook, Instagram
SnapChat, Hike, WhatsApp, FaceBook, Instagram

30 – valueOf()

valueOf() method returns the string value of an array object.

var apps = ["WhatsApp", "FaceBook", "Instagram"];
var x = apps.valueOf();
document.write(x);

Output

WhatsApp, FaceBook, Instagram

Conclusion

I hope now you have a deep understanding of JavaScript array functions. 

Enjoy Scripting 🙂