You currently have JavaScript disabled on your browser.

This website uses JavaScript, and This page needs JavaScript activated to work correctly.

Please active JavaScript on your browser and then refresh this page.

Arrays



What is an Array?

An array is a type of variable which acts like a container, that can hold values of multiple objects. The values stored inside an array are contained within elements of that array.

The elements of an array can be any kind of object type, even other arrays. In fact, the elements of an array can be objects such as structs, classes, and method functions, in addition to strings, booleans and values.

Some programming languages require that every element of an array be of the same object type, however with JavaScript each element can be a different type, therefore a JavaScript array can contain a mixture of multiple different elements where each element can be a different object type.

For Example:

 
var myStuff = ["books", 567, [12.34, "USA"], true];

Creating Arrays

The easiest way to create an array in JavaScript is by using array literals, which is how each of the arrays in all of the examples shown above were made.

Another common way to create an array is by creating an empty array, and then setting the values of each element individually, for example:

 
var petType = [];
petType[0] = "Cat";
petType[1] = "Dog";
petType[2] = "Fish";
petType[3] = "Bird";

You can also use JavaScripts built-in array constructor new Array(). The following example shows two ways to use the new Array() syntax:

 
var petType = new Array();
petType[0] = "Cat";
petType[1] = "Dog";
petType[2] = "Fish";
petType[3] = "Bird";

var myFruits = new Array("banana", "apple", "orange", "strawberry");

Accessing Elements

To access one of the elements of an array variable, you will need to use the brackets and the index number of the desired element: myArray[3]. The index values of arrays in JavaScript begin at 0, and increment numerically, so the first element will always be accessed by [0].

For Example:

 
var myStuff = ["books", 567, [12.34, "USA"], true];
var tempValue = myStuff[0];

The result of this example is that the element value located at index 0 of the myStuff array ("books") is assigned to a new variable named tempValue.

To get the last element, you can use brackets and '1' less than the array's length property.

For Example:

 
var myStuff = ["books", 567, [12.34, "USA"], true];
var tempValue = myStuff[myStuff.length - 1];
document.getElementById("feedbackLabel").innerHTML = tempValue;

The result of this example is that the element value located at the last index of the myStuff array (true) is assigned to a new variable named tempValue. The tempValue is then displayed in a feedbackLabel onto the web page itself.

The index of an array is used not only to retrieve that elements value, but to set that elements value as well. If that element already has a value, then this will overwrite it and reset that element with a new value.

For Example:

 
var myStuff = ["books", 567, [12.34, "USA"], true];
myStuff[1] = 42;

In this example, we set a new value into the element located at index value 1 of the myStuff array, which changes the value of that particular element from its original value of 567 to a new value of 42.

A common way to loop through an array is by using a for loop, for example:

 
var guests = ["Richard", "Amy", "John", "David", "Marla", "Tony"];

let guestCount = guests.length;
let tempText = "<ul>";

for (let i = 0; i < guestCount; i++) {
    tempText += "<li>" + guests[i] + "</li>";
}

tempText = "</ul>";

Properties and Methods

JavaScript arrays have their own built-in variables and helper utility functions, commonly known as Properties and Methods. Below is a list of the more common array methods and a description of each:


Sorting Numbers

A simple way to sort an array of numbers correctly is by providing a compare function to the sort method, for example:

 
var sales = [12, 4, 124.99, 124, 17];
sales.sort(function(a, b) {return a - b});



Final Thoughts

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.


grayStargrayStargrayStargrayStargrayStar  Be the first to rate this post

User Comments






TJDivisions© 2022