Learn About JavaScript Array and Objects

Whether you’re starting to learn JavaScript on your own or you’ve decided to attend a JavaScript bootcamp in San Francisco, you’ll find that arrays and objects are fundamental components of this program. In this article, we’ll explain why the JavaScript array and object are so important and look at some other useful JavaScript features.

To begin this JavaScript tutorial, it’s important that you have a fundamental understanding of CSS and HTML. You should also be familiar with the basics of JavaScript before learning about array and objects.

Basics of JavaScript Array

If you’re attending a JavaScript bootcamp, you should learn about and understand JavaScript array objects. This is a collection of data and functions that are related to each other, also known as methods and properties when they are inside an object. Let’s look at an example so you can understand more about them.

First, make a copy of the oojs.html file. This will contain a <script> element that will allow you to create your source code and be used as a base to explore JavaScript array and object syntax. It’s a good idea to already have your JavaScript console open with your developer tools; be prepared to key in various commands. 

To create your JavaScript array object, begin by initializing and defining your variable. Enter this line underneath the existing code in your file and then save and refresh it:

After doing this, you can open the JavaScript console on your browser, type “person” in and hit Return or Enter on your keyboard. The result should look similar to the below example:

Now, you have created your first JavaScript array object. However, this object is empty, so it is important to update it, which will allow it to be more useful. Add the following information:

Once you have saved and refreshed this, you can enter it into your browser. You can add items such as “person.age,” “person.bio” and “person.name.”

Now that you have added some function and data to your JavaScript array object, you can access it with a simple syntax. So, how does this JavaScript array object work? Different members with names and values make up the JavaScript object, such as Jane, Doe and 28. A comma is required to separate each of these pairs, and a colon needs to separate the values and names.

The value of a member of a JavaScript array can be nearly anything. For example, here we have a string, a JavaScript array, a number and a function; this is what is known as a JavaScript object literal. When you are creating an object using JavaScript array, it’s quite common to use a JavaScript object literal. This allows you to create a series of data that is structured and related. One example would be to send a request to the server that would be placed in a database since it is more efficient to send a single JavaScript object than several individual items.

Dot Notation

For the steps above, you’re using dot notation to access the JavaScript object’s methods and properties. The JavaScript array object is called the namespace, which needs to be entered to access something that is inside of the JavaScript array. After this, you will write a dot, followed by the item that you are trying to access. The item may be a JavaScript array object’s property, a simple property or one of the object’s methods. An example of this can be:

You can try entering this into your browser to see it for yourself. At this point, you will need to go through the JavaScript array object code to replace any instances of name[1] with name.last to ensure that your methods continue to work well.

Setting Numbers for a JavaScript Array and Object

We have only covered getting a JavaScript array object member. However, you also can update or set its value by declaring the member that you wish to set via a dot notation. It would look like the following: 

Setting members does not stop when you update the values of methods and properties that already exist. In addition, you can create entirely new members. Try the following types of scripts to add even more information:

If you want to test out this new JavaScript array, you can write:

A JavaScript bootcamp in San Francisco should focus on using the bracket notion to not only create new dynamic member values but also member names. For example, let’s assume that you wanted to have custom value types for the people data. You would type the value and name of the member into the two text inputs. Your inputs would look something like the following:

You can test this JavaScript array by typing in the following values:

Then, enter person.weight to test this out. Remember that this method does not work to add a property to a JavaScript array because the JavaScript array object can only take the literal name of the member. A variable that points to the name of the member will result in an error on your webpage.

Closing Thoughts

Now that you’ve reached the end of this tutorial, you should have a better idea of how to work with a JavaScript array object, including how to create your own simple object. You should also know that a JavaScript array object is a very useful structure to store data and functionality information. 

In fact, if you tried to keep track of every method and property in a person object, you would find it very frustrating. Not to mention, it’s also very inefficient and would take up too much space on your server. You would also have the risk of it clashing with functions and variables with the same name. A JavaScript array object allows you to safely keep this information locked inside its own package and out of the way, so you can efficiently store even more information.

*Please note, these articles are for educational purposes and the topics covered may not be representative of the curriculum covered in our boot camp. Explore our curriculum to see what you’ll learn in our program.