The Array is used to store multiple values in a single variable.
In JavaScript, there are three types of Array:
- Single Dimensional Array
- Two Dimensional Array
- Multi-Dimensional Array
Here we are going to discuss single dimensional array initialization and some advanced functions to process JavaScript Arrays.
Index
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:
- JavaScript arrays the constructor property returns function Array() { [native code] }
- JavaScript numbers the constructor property returns function Number() { [native code] }
- 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 🙂