Friday , 17 November 2017
Home / Programming / JavaScript / Arrays – JavaScript Tutorial
Arrays
Arrays

Arrays – JavaScript Tutorial

This tutorial is part of the JavaScript tutorial series for beginners. To view the whole list of tutorials available and the order in which you should follow them, then click here.

Arrays are a special kind of object. They can store multiple values. Let’s say you had a list of 800 names. If you had to create a variable for each of these names, then that would take a long time. Also, what if you were expecting to update this list with more or remove names? You’d have to manually create more variables or end up with a bunch of empty ones. To solve this dilemma, you can use arrays.

First, let’s learn how to create an array. Update the body tags in your HTML document to this.

Now, let’s learn how to create an array. Clear your script and add this line of code.

Just like any other object, you have to use the new keyword followed by the name of the object. The name of the object in our case is Array. Inside the parenthesis are the list of values you would like to store in the array. You can store as many values as you want. You can store ANY kind of value. You’ll notice we have 3 strings and a number. JavaScript doesn’t care. You can also have an empty array.

You now have a list of values stored under 1 variable. How do you access a certain value? Simple, you use square bracket notation.

Add this line of code after your array.

Square bracket notation is used when you have an array of values under 1 variable. To specify which value you would like, then you type in square brackets [] right after your variable and then a number inside. The number represents the value you want to grab. JavaScript will automatically assign a number for each value. It starts at 0 and then goes up. So, the first value in your array is 0. The 2nd value is 1 and so on and so forth.

In this example, we output the value represented by 2. You should see 35.54 outputted onto the screen.

Let’s say we wanted to add a new value into the array. This is very easy to do. You simply specify the number followed by the value, like so.

We know that 4 is an empty spot in our array. So, JavaScript creates this spot for you. If we were to change this number to 2, then instead of creating a spot, it’ll simply update whatever value is in number 2.

You can also change the number to 100. If you haven’t defined values for the spots in between these spots, then JavaScript will automatically assign these values as undefined. You also get undefined when you try accessing a spot that has never been created.

Properties

Arrays have a couple of properties that you can use, but only one is really used a lot. That is the length. The length simply returns how many items are in the array. However, you should note that it starts at 1 and counts up. So, if there’s 3 items in the array, then it’ll return 3. Let’s see how this can be useful. Update the line that adds a new item in the array to this.

Inside the square brackets is where the magic happens. You don’t necessarily have to type a number literally, but the value inputted into these brackets must be a number. Since the length returns a number, it’ll work. So, why would this be useful instead of hard coding a number?

Since the length literally counts how many items are in the array, then it’ll always return a number that is undefined in the array. For example, our array has 4 items. Each item has a number assigned to it starting from 0. The last item in the array is assigned the number 3. Since, the length returns 4, it’s a sure thing you’ll always add a value and not overwrite any values.

Conclusion

Arrays are useful when working with large amounts of data. If you would like more information about arrays, then go here.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

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

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link