How to work with Arrays in Javascript with examples

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"];