JavaScript Arrays Introduction


JavaScript has primitives — simple strings, numbers and booleans, like “Jack”, 529, and true. And you can do a lot with primitive types, but at some point you’ve got to deal with more data. If you have a list of data, an array can be very useful. This discussion covers the basics of arrays in JavaScript and how to create an array and how to access the elements of an array. At the bottom of this post, in the CRUD section, there are links to posts that describe how to update an array and delete items from an array. A very good resource for learning about arrays is the w3schools.com website where they discuss JavaScript Arrays.

Create an Array

We have a list of ten numbers that represent scores. An array is a JavaScript type that can hold many values.

var scores = [60, 50, 60, 58, 54, 54, 58, 50, 52, 54];
var solution2 = scores[2];
alert("Solution 2 produced " + solution2 + " bubbles.");

Below is another example of an array. In JavaScript, arrays are zero-based. The first element is accessed using the index number 0.

var flavors = ["vanilla", "butterscotch", "lavender", "chocolate", "cookie dough"];

Arrays can contain objects. Below is some code that created an array of objects. An array is defined by the square brackets: [ ]. Objects inside of an array are contained withing curly brackets { } and are separated by commas. Do not put a comma after the last object. Commas separate the property and their property values for each object in the array. The following fruits object contains three “named values”.

var fruits = [
  { name: "apple", value: 7  },
  { name: "banana", value: 3  },
  { name: "cherry", value: 9  }
];

Read an Array

Below is how you access the array and assign one of the values to a variable.

var flavorOfTheDay = flavors[2];

You can also use the array index to change a value in an array:

flavors[3] = "vanilla chocolate chip";

Every array has a property, length, that contains the number of items currently in the array. If your array index is from 0 to 4, then the length is 5.

var numFlavors = flavors.length;

There is no requirement in JavaScript that all the values in an array be of the same type. They can be different types. You can put just about any value you’ll find in JavaScript in an array, including numbers, strings, booleans, other arrays, and even objects. To say it again, array elements can be objects. JavaScript variables can be objects. Arrays are special kinds of objects. Because of this, you can have variables of different types in the same Array. You can have objects in an Array. You can have functions in an Array. You can have arrays in an Array.

What happens if you try to access an array with an index that is too big or too small (like less than 0)? You’ll get the result undefined. To get the last item in the array, you can write: myArray[myArray.length – 1];

Array Property and Methods

The real strength of JavaScript arrays are the built-in array properties and methods. You can get the length of an array and you can sort the array (with the .sort()). If an array has four elements in it then the length will be four, with the last element having an index of three.

Looping with the For Loop

<!DOCTYPE html>
<html>
<body>
<p>The best way to loop through an array is using a standard for loop:</p>
<p id="demo"></p>
<script>
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
    text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Here is the output in the browser.

jsforloop

CRUD

In computer programming, CRUD is an acronym for create, read, update and delete. Alternate words are sometimes used when defining the four basic functions of CRUD, retrieve instead of read, modify instead of update, or destroy instead of delete.

Create

How to create an array is covered in this post.

Read (Retrieve)

Accessing the elements or objects of an array is briefly discussed here in this post. For an example of reading several objects in an array, please check out the post called JavaScript Arrays Read Objects with forEach.

Update (Modify)

Push on to the end of an array.

Append with Length

JavaScript Arrays unshift to add an element to the beginning of the array.

Delete (Destroy)

Pop off the end of an array.

Delete an Object from an Array of Objects

JavaScript Arrays findIndex and the splice() method

Leave a comment

Your email address will not be published. Required fields are marked *