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.

Initialize JavaScript Array

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

JavaScript Array Properties

  • constructor
  • length
  • prototype

1 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] }

2 length

It returns the length of an array.

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

Output:

3

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 passes 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 value of the first element 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 Index of the first element 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

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

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

lastIndexOf() method is used 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 beginning of the array.

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 a function for each array element.

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

Output:

2,3,4,5

18 – pop()

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

reverse() method returns a new array with reverse order of items in 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 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

Leave a Reply

Your email address will not be published. Required fields are marked *