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.

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

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 🙂

Leave a Reply

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

Read previous post:
How to Add Drop Unique Key in MySQL
How to Add Drop Unique Key in MySQL

A unique key is a key that can be a column or a group of a column that defines the...

Close