Like any other object-oriented programming language, JavaScript provides many features and objects for your software development. In JavaScript, nearly everything is an object, and they all come with their own set of powerful benefits. For example, one of the most commonly used objects in JavaScript is called an Array.
This post will discuss the concept of JavaScript arrays, their syntax, an array item, and how to manipulate arrays in your software. You will also learn how to use them with practical examples of arrays and array methods from the view of a hypothetical browser-based game.
- What is the correct way to write a JavaScript array?
- JavaScript Array Elements
- JavaScript Array Examples
Let’s get started.
What is a JavaScript array?
Before we go much further, if you are not familiar with JavaScript or would like a refresh on the subject, check out this post that discusses the basics of JavaScript and its use.
What is a JavaScript Array?
JavaScript arrays are data collections, which are types of objects, but they should be thought of as displays instead. The reason for this distinction is that JavaScript also provides a data collection type called objects that have a different syntax.
With that in mind, let’s look at the syntax of a JavaScript array and discuss the different parts that make up an array.
What is the correct way to write a JavaScript array?
This question has an answer that truthfully is a little ambiguous. The standard is to decide based on your needs and consider staying consistent with your declaration style. With that in mind, let’s look at the syntax for the various ways you can declare an array.
JavaScript Array Syntax
There are two different ways to declare and initialize a JavaScript array; the first is to create an array using the Array constructor. This method is less common but is still a method of creating and initializing an array that you should know and be aware of.
JavaScript Array Constructor Syntax
const array name = new Array(item1, item2, …);
In most cases, developers use this method to create a new array when the array's values are known. A great example of this would be using this method to create new instances of players in a game. A developer could provide this constructor with a variable with all players' entered data.
It is worth noting that since the release of ECMAScript 6 (ES6), creating arrays is commonly done using the const variable type as it is more reliable and consistent. Furthermore, it does not limit your ability to modify the array. JavaScript allows the omission of the new keyword when using the array constructor to create arrays. This means you could declare a new array using the following syntax instead.
In the code snippet above, you would start by declaring a new const variable, followed by the name you choose for it. After that, you use the Array constructor, which is a function for initializing a new array. Then, within the parenthesis, you add the items you want to store in the array, which can be any combination of all data types in JavaScript.
JavaScript Array Literal
The JavaScript Array literal looks similar to the constructor method. The most significant difference is the use of bracket notation to create and initialize a new array with the name of the variable you assign it to.
Empty Array Initialization
Finally, the last way to create an array in JavaScript is to initialize an empty array and add items to it later in your program. The syntax for this is straightforward, and you may have already guessed it — clever, clever if you did.
const array name = [ ];
That’s right; it is essentially an array literal but without added items. Armed with this information, let’s look at what array items are and what types of items are allowed.
JavaScript Array Elements
Array items — also known as array elements — are nothing more than the items stored inside an array. The items within an array are often of various types, and as a result, they can be used for robust sets of data within complex structures.
Items in an array can be of any object or data type that JavaScript supports, including strings to integers and booleans. JavaScript arrays also support data collections as array elements, which means an array can have items that array as well — arrays of arrays, if you will.
Now that you know the types of data that arrays can support let’s dive into how to access and manipulate that data. Then you will see some examples of using arrays for the hypothetical browser game.
Accessing Array Items
To access an array element, you will need to use the bracket notation to target the index of the array element you want. This practice is straightforward but comes with the caveat that the array index starts at zero and not one.
const player = [“Artemis”, 35, “5’11”, “06:23:00”]
Player[0]
This line of code creates an array literal with four values, then targets the first item in the array, which is the name Artemis.
JavaScript Array Length Method
The index discrepancy may seem like a small thing, but truthfully it causes more errors in programming with JavaScript than you might imagine. For example, when looping — or iterating — over the items in an array, you will always want to consider the array's length. This is easier using the JavaScript array method called length, which returns a value of the array's length.
player.length
If the array has ten items, the length array will return that value. However, the maximum array index would be one less than that. So if you were to loop through the array till its end using the length() method, you would also need to subtract one from the value returned by the method.
player.length -1
Sorting JavaScript Arrays
The array sort() method is used to sort the items in an array. For example, if the array is all numbers — weather strings or integers — the sort method will organize them according to their numerical values.
player.sort()
The Mozilla Developer page says, “The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values. ”Using the sort() method can be unpredictable if done incorrectly. But on the whole, it still provides a simple way to handle basic sorting techniques.
In most basic uses, the sort method will behave as you would expect — more examples can be found in this JavaScript sort post.
JavaScript Array Example
Next, you will see a codepen example of how arrays can be created, interacted with, and even modified. In that same codepen, you will also see an example of array looping using the length method. This codepen is also interactive, allowing you to play around with the code and get a little more familiar with the subject of arrays.
See the Pen JavaScript Arrays by HubSpot (@hubspot) on CodePen.
If you enjoyed this post, check out our post on JavaScript array filter and how it works. The array filter method will further build on the information in this post, preparing you to understand better how to use arrays.
Before wrapping up this post, let’s look at a video example of JavaScript arrays and how you can use them. This next video will cover the basics and help you visualize the core concepts behind sing JavaScript Arrays.
Getting Started Using JavaScript Arrays
You have learned a lot about JavaScript arrays, how they work and how to use them in your programming. You have also learned some caveats about array behaviors and some array methods. Finally, you have also learned the syntax of the JavaScript array and seen examples of arrays in conjunction with them.
You have even had a chance to play around with a live code example covering the topics in this post. Moving forward, you can build on this information by practicing different uses for arrays, and different ways to manipulate, edit, and even display array information in the browser.
