JavaScript 101: Arrays

Table of Contents

• What is an Array
• Example of an Array on LinkedIn or Facebook
• Objects + Variables
• Learning About Arrays
• Math in JavaScript
• Now You Know Arrays! What’s Next?

Learning JavaScript? Arrays are an important data structure and you’ll need to understand them as a building block to become a great JavaScript developer. Get a 10-minute lesson on Arrays from Gregorio Rojas, the co-founder (and instructor) at Sabio. Plus, Arrays are one of the topics that Gregorio covers in Sabio’s new online JavaScript Foundations course!

What is an Array

An array is probably one of the most fundamental data structures that we work with in computer science. Unlike a variable, which is an object reference, an array is specifically built to keep track of a series of other objects, in a sequential manner. It’s very important that an array is sequential because that allows us to access them rather quickly. 

JavaScript allows us to keep track of a sequential collection of objects – could be integers, dates, times, objects, or even other arrays. An array is our go-to for storing collections of data because of its flexibility to be able to store anything we want and to be able to grow it as much we’d like, and because of how easy it is to access data in the array quickly and efficiently. 

Example of an Array on LinkedIn or Facebook

We use Arrays all the time. Say you’re using LinkedIn or Facebook – your News Feed is an Array of News Articles. Some items are videos, some are text items, some are Shares, some are Re-Shares. Those are an array of newsfeed articles. 

In an application – whether that’s on your phone, desktop or tablet – there’s an array of this data, and another part of the code that displays it to the user. Behind the scenes, I have a simple, boring array of data. If you’re going to show a list of things, it’s going to be an array.

Objects + Variables

Let’s back up a bit and talk about Objects and Variables.

What you see here is a Gregorio Variable and a Liz Variable. They’re pointing to objects because Variables point to Objects. When I go to the array, the Variable is named “People.”

An array is an object and like any other reference type in JavaScript, there’s a variable (like People) and it points to something in Memory. 

This array, which is notated in square brackets (that’s how we define an Array), has a series of boxes/elements that we start counting by the number 0. 

• Box 0 is pointing to Gregorio.

• Box 1 is pointing to Liz

Pointers illustrate to you that the array doesn’t contain the variables. Gregorio and Liz are not inside the array; they are objects. 0 is pointing to another address in memory, “Gregorio” and 1 is pointing to another object in memory “Liz.”

This array can grow as much as you’d like – right now, it’s only 2 people, but it can grow or shrink. This is a very popular data structure – even other larger and more complex data structures will use arrays to manage them.

The next thing I want to show you is the behavior of how these pointers point to the objects.

In this example, it looks like the only way that we can access Liz or Gregorio is if we go through the Array, but it doesn't have to be that way. The Array is really powerful. We have the Array of “People.” Zero still points to Gregorio and 1 points to Liz. However, because this is a particular type of object - a reference object -, I can have a Variable point directly to Gregorio. 

Liz points to Liz directly. The array does not contain the object – the array points to it. And we can have separate pointers to those objects. I could potentially be manipulating Greg and would be visibly affecting the Array (somewhere else). For example, I could change Greg to “Mr. Gregorio Rojas” and Liz to “Ms. Liz Eggleston” and that would be visibly reflected in the Array. 

This is why we recommend JavaScript as a first programming language, because you can learn and visualize this concept easily, and this translates to other languages. There are nuances in different languages, but here you can see how an Array, Object References, Pointers and Variables work in one screen.

Learning About Arrays

This is why we released the new Foundations course – You can come to us and start engaging with us at Office Hours knowing zero about javascript. It’s actually great that you come to us at Zero because we can see your progress. Everyone’s progress is different. Some people are going to progress through this material in 2 weeks and will be ready for the bootcamp. Others will take months – we’ll be able to develop that relationship and knowing you, we’ll have a sense of what you’re ready for. 

Fully understanding the concept takes time. It’s one of the scary things; one of the hurdles that keep people from getting into software development. You’ve worked in an array in one scenario, but you have to do this in 1800 different scenarios. The only way to fully understand is to start drawing out lists of people. 

When should you start coding, when should you move forward? When you know enough to be dangerous! You’ll pick up the skills you need through experience. 

Math in JavaScript

Can you solve problems, can you apply these problems? Can you keep track of variables and factors in your head? There are different factors that humans consider every day in problem solving.

“Math” is the short word to describe problem-solving while considering a number of factors that are dancing around on you. The fact is that – no matter the work you do – you’re probably doing that already. All we have to do is teach you how to look at these variables and consider them in the problem that you’re solving. 

Now You Know Arrays! What’s Next?

Once you understand the “Array” then you have to understand how to work with them. How to loop through them, how to filter them (ie. selectively pick out different items from the array to create new arrays), how to work with the internal API (the other functions built up around an array). For example, the .4H which allows you to do a 4 loop, a dual loop, ETC.

A Dot Map function will allow you to take the array that contains data in one shape, loop through it, and produce an array that’s shaped differently. That’s really important for a software developer, especially when you start working in libraries like React where mapping data in a functional programming type of way is critical to the optimization that is built into React. 

Find out more and read Sabio reviews on Course Report. Learn more about Arrays and JavaScript in Sabio's new online JavaScript Foundations course. This article was produced by the Course Report team in partnership with Sabio.