JavaScript Array Methods

Arrays to Strings

The JavaScript toString() method can be used to convert an array to string. Each value is separated by a comma.

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
document.getElementById("drinks").innerHTML = drinks.toString();

The join() method can be used to specify a separator

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
document.getElementById("drinks").innerHTML = drinks.join(" - ");

Pushing and Popping in JavaScript Arrays

In JavaScript arrays, pushing and popping can be used to easily add element to the end of the array (push) or remove element from the end of the array (pop).

Pushing

As seen in JavaScript arrays, an element can be added to the end of an array using the array.push() method. The push method returns the length of the new array.

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
drinks.push("Monster"); //Adds Monster to the drinks array.

Popping

An element can be removed from the end of an array using the array.pop() method. The pop method also returns the value of the popped element.

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
drinks.pop(); //removes RedBull from drinks array

Shifting Array Elements

Shifting is similar to popping but it works on the first element instead. The shift() method gets rid of the first element of the array and shifts all other elements, one index lower. The shift method returns the value of the element that was previously the array’s first element.

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
drinks.shift(); //Removes Coke from the drinks array

The unshift() method can be used to add an element to the start of the array and unshift previous elements. This method returns the length of the new array.

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
drinks.unshift("Monster"); //Adds Monster to the start of the drinks array.

Deleting Array Elements

The delete operator can be used on JavaScript arrays but is not recommended as it will simply leave undefined holes in the array. Because of this reason, using push and pop methods is recommended.

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
delete drinks[0]; //This makes the first element in drinks array undefined

Splicing Arrays

The JavaScript splice method is used to add elements to an array. The first parameter is used to specify the position where the new elements should be added. The second parameter is used to specify the number of elements to be removed. All other parameters are used to specify the new elements that are to be added. The splice() method returns an array after execution. This array contains the deleted elements.

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
drinks.splice(2, 0, "Sprite", "Milk"); //Sprite and Milk are added after Fanta in the drinks array

The splice() method can also be used to remove elements from an array.

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
drinks.splice(2, 1); //removes Beer from the drinks array

Concatenating Arrays

The concat() method can be used in JavaScript to create a new array by concatenating the provided arrays.

This method does not change the current arrays, it only returns the array created after concatenation.

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
const foods = ["Pizza", "Burger", "Chicken", "Steak"];
const concArr = drinks.concat(foods); //concArr contains all elements of both arrays above

The concat() method can take multiple arrays or strings as parameter as well.

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
const foods = ["Pizza", "Burger", "Chicken", "Steak"];
const deserts = ["Pie", "IceCream", "Candy"];
const concArr = drinks.concat(foods, deserts, "One More!"); //concArr contains all elements of both arrays above and also the provided string.

Slicing an Array

The JavaScript slice() method can be used on arrays to slice out a part of the array into a new array. The index to start slicing is given as the first parameter. If no second parameter is given, the array will be sliced upto the last element. If a second parameter is specified, it marks the ending point for the slicing.

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
const foods = ["Pizza", "Burger", "Chicken", "Steak"];
const arr1 = drinks.slice(1); //Starts slicing the drinks array from Fanta
const arr2 = foods.slice(1, 3); //Starts slicing the foods array from Burger upto but not including Steak

Looping JS Array Elements

Possibly the best way to loop through an array is to use a for loop.

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
let drinksLen = drinks.length;
text = "<ul>";
for (let i = 0; i < drinksLen; i++) {
  text += "<li>" + drinks[i] + "</li>";
}
text += "</ul>";
document.getElementById("drinks").innerHTML = text;

Array.forEach() method can also be used for this.

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
let drinksLen = drinks.length;
text = "<ul>";
drinks.forEach(function (value) {
  text += "<li>" + value + "<li>";
});
text += "<ul>";
document.getElementById("drinks").innerHTML = text;

Length property in JS Arrays

JavaScript arrays are implemented as objects. Objects are named collection of data that have properties and whose values may be accessed via methods. These methods are used to read or modify the data contained in an object’s property.

Access to any JavaScript object's property is done by using objectname.propertyname, objectname being the array name and propertyname being the method being used.

Example:

var x = fruits.length;

The length of the fruit array will be assigned to the variable x. By accessing the contents of x the length of the fruit array can be determined.

Let's check another example:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.length);   // the length of fruits is 4

Checking for an Array

The typeof operator returns “object” when used on an array. Use the Array.isArray() method instead.

const drinks = ["Coke", "Fanta", "Beer", "RedBull"];
document.write(typeof drinks); //Returns object
document.write(Array.isArray(drinks)); //Returns true