JavaScript arrays are used to store multiple values in a single variable. JavaScript Array
object is a global object that is used in the construction of arrays; which are high-level, list-like objects. Items in an Array can be accessed using the index of an array. Arrays in JavaScript can be used for various operations and we can perform certain actions in array like adding new item, remove item, iterate the array , get the index of item etc.
Syntax of an Arrays in JavaScript?
var array-name = [item1, item2, ...];
How do I Declare an Array in JavaScript?
Creating an array and assigning values to it is very simple in Javascript. Let’s check out how to create an array in JS in the below example.
var mobiles = ["IPhone", "Samsung", "Nexus"]; console.log(mobiles.length); //3
How to Access an Array Element in JavaScript?
Array elements can be accessed using the index of an array. Let’ say if we need to access the “iPhone” in above example then we could use console.log(mobiles[0]);
.
var mobiles = ["IPhone", "Samsung", "Nexus"]; console.log(mobiles[0]); //IPhone console.log(mobiles[1]); //Samsung console.log(mobiles[2]); //Nexus //If we access the next index of an array we get undefined error console.log(mobiles[3]); //undefined
How to loop through an Array in JavaScript
Arrays in JavaScript can be iterated. We could traverse each element of an array using for loop. Let’s say if you would like to print all the values in an array then simply you could iterate and print the elements.
var mobiles = ["IPhone", "Samsung", "Nexus","LG","Oneplus One"]; for (i = 0; i < mobiles.length; i++) { console.log(mobiles[i]); } /*output IPhone Samsung Nexus LG Oneplus One */
“foreach” vs “for of” vs “for in” in JavaScript
We have seen how to loop through array using for statement in above example. Now let’s take a look at how to loop through array using “foreach”, “for of” and “for in”
foreach : forEach() executes the provided callback once for each element present in the array in ascending order. It is not invoked for index properties that have been deleted or are uninitialized (i.e. on sparse arrays).
callback
is invoked with three arguments:
- the element value
- the element index
- the array being traversed
Example of JavaScript array using “foreach” loop
mobiles.forEach(function (item, index, array) { console.log(item, index); }); /* output IPhone 0 Samsung 1 Nexus 2 LG 3 Oneplus One 4 */
for in : The for in statement iterates only over the enumerable properties of an object, in arbitrary order.for in is used to loop through properties of an object.
Note:for…in should not be used to iterate over an Array where the index order is important.
Example of JavaScript array using “for in” loop
The following function takes as its argument an object. It then iterates over all the object’s enumerable properties and returns a string of the property names and their values.
var obj = {a:1, b:2, c:3}; for (var prop in obj) { console.log("obj." + prop + " = " + obj[prop]); } // Output: // "obj.a = 1" // "obj.b = 2" // "obj.c = 3"
for of: The for…of statement creates a loop Iterating over iterable objects (including Array, Map, Set, String, TypedArray, arguments object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
Example of JavaScript array using “for of” loop
var iterable = [1, 2, 3]; for (var value of iterable) { console.log(value); } // 1 // 2 // 3
Adding item into an Array in JavaScript
var fruits=["Apple", "Banana"]; var newLength = fruits.push("Orange"); console.log(fruits); // ["Apple", "Banana", "Orange"]
Adding item into an Array at front in JavaScript
var fruits=["Apple", "Banana"]; var newLength = fruits.unshift("Orange"); console.log(fruits); // ["Orange","Apple", "Banana"]
Remove Last item from an Array in JavaScript
var fruits=["Apple", "Banana","Orange"]; var lastElement= fruits.pop(); console.log(fruits); // ["Apple", "Banana"];
Remove First item from an Array in JavaScript
var fruits=["Apple", "Banana","Orange"]; var firstElement= fruits.shift(); console.log(fruits); // ["Banana","Orange"];