JavaScript Array Length: What It’s About and How to Use It

javascript date functionsJavaScript is the language that allows your browser to communicate asynchronously with a web server. In non-technical terms, JavaScript lets your browser communicate (or send and retrieve information) with a web server without refreshing or reloading the webpage you’re currently on. Any changes to the webpage because of your actions get displayed automatically. If you used the Internet a decade ago, you must remember that a web page with a form refreshed when you entered your information and hit the submit button. If you were in your email inbox, you had to keep refreshing the page to check if a new email had arrived. Now, however, you can see your new email in your inbox as soon as it arrives. Your information also gets submitted without the page reloading. JavaScript has made all this possible. Learn about how JavaScript, along with HTML and CSS are used for web development in this course.

JavaScript is a comparatively new language that is used to develop interactive web pages and web applications. It is an easy language to learn, especially if you know another programming language like Java and C++. Also, there are also several free JavaScript plugins available on the Internet that can be plugged in directly to your webpage. You don’t have to be an expert programmer to be able to use it. You can take this course to learn the basics of JavaScript and start using it on your website.

In this basic tutorial, we’re going to take a look at length property of arrays. We’ll also explain and take a brief look at arrays themselves and how to declare them in JavaScript, so you can understand the use of the length property better.

Arrays in JavaScript and Length

Arrays are variables that can store multiple elements within them. Using an array prevents the need to use many variables to store elements. For example, take a look at these three distinct variables:

var genre1 = “Mystery” ;
var genre2 = “Comedy” ;
var genre3 = “Horror” ;

Wouldn’t it be easier if you could store these three separate values in a single container? You can, with the help of an array. The syntax to declare an array is as follows:

var name_of_array = [element 1, element 2…] ;

An array to store the three different variable values shown above can be declared as follows:

var genre = [“Mystery”, “Comedy”, “Horror”] ;

You can see why arrays can be very useful. Each element in an array will be assigned a unique index number. This index number is used to store and retrieve that particular element. The first element of the array is assigned the index number of 0. In the above example, the first element “Mystery” has the index number 0 while the third element “Horror” has the index number of 2. Because the array has three elements in it, the length of the array is 3.

You can also create arrays using an array constructor, the syntax for which is as follows:

var name_of_array = new Array ();

This will create an empty array with a name of your choice. It will be a blank array. You can add elements to it with the following code:

var genre = new Array ();
genre[0] = “Mystery”;
genre [1] = “Comedy”;
genre [2] = “Horror;

Now that you’re acquainted with the basics of arrays as well as the index values of the elements, lets take a look a the length property of the array and how it can be used in a program. You can also take this course to learn how to use arrays in JavaScript.

The Length Property of Arrays

The length property of an array defines the maximum number of elements that could be present in an array. The number of elements in an array cannot exceed the length of an array, though the number of elements can be less than the length of the array. For example, an array of length 7 can have 3 elements in it. It can hold 5 more elements. But doesn’t 5 + 3 make 8? Remember, the index of an array begins from 0. So, an array of length 7 can actually hold a total of 8 elements.

The length property can both get the current length of an array and set the maximum length of an array. The syntax to get the present length of an array is as follows:

name_of_array.length

The syntax to set the maximum length of an array is as follows:

length = name_of_array.length

Let’s take a few examples to show you the length property in action.

Example 1 Simple Program to Get Array Length

In the first example, let’s print the length of the array we wrote earlier:

<script type="text/javascript">
var genre = [“Mystery”, “Comedy”, “Horror”] ;
document.write (genre.length);
</script>

Output:

3

This example is easy enough to understand. Our array had three elements in it, so its length was three. We could have, however, increased the length of the array without adding new elements to it and then printed the length. In that case, we would have received a bigger number as our output. Take this course to learn how to write your own JavaScript programs.

Example 2: Using the Array Length to Get an Element

In the second example, let’s print the final element of the array we wrote earlier using the length property:

<script type="text/javascript">
var genre = new Array ();
genre[0] = “Mystery”;
genre [1] = “Comedy”;
genre [2] = “Horror;
document.write(genre[genre.length-1]);
</script>

Output:

Horror

This program is a little trickier than the one we wrote before. In the first part of the program, we declare an array with three elements inside it. The length of this array is 3. In the final step of the program, we print out the value of the final element (Horror) of the array with the following line of code: “document.write(genre[genre.length-1]);”. As you can see, we have subtracted 1 from the length of the array. Why did we do that? We did that because of the fact that the index of an array always starts from the number 0. This means that the final element of a 3 length array will have an index of 2, so 1 will have to be subtracted from the length to arrive at it.

The length property isn’t as complicated as it sounds. You’ll find it easier to master when you try out the programs for yourself. To get more information about the other properties of arrays in JavaScript, sign up for our advanced JavaScript course.