Introduction to Working with Data Structures

Learning Goals

• Compare collection data types to other data types
• Define Array
• Define Array element
• Define Array index
• Define Object
• Define Object key
• Define Object value
• Demonstrate nesting of collection data structures

Introduction

Thus far, we've been storing simple data in our variables, values like:

• Strings
• Booleans
• Numbers
• etc.

But sometimes we want to refer to a collection of values by a common name. This is very natural in conversation: we know "The Beatles" refer to four guys from Liverpool who sang "I Wanna Hold Your Hand." "Grocery List" is something that contains multiple small elements that we identify by "the third item on my grocery list, or the last item on my grocery list." Ordered lists in JavaScript are called "Arrays."

Another collection type we know about from daily life are dictionaries: we use one thing to "look up" a value. We "look up" the word "computer" in a real dictionary and we are "pointed to" a long String that tells us what the word means. Lookup tables, or dictionaries, in JavaScript, are called "Objects."

Learning to store and to work with the data held in data structures will be the focus of this section. In this lesson, we'll give you a broad, conceptual introduction to collection data types.

Compare Collection Data Types to Scalar Data Types

Strings and Numbers are scalar data types, they can be put on a scale. A collection type holds multiple pieces of data and allows us to talk about the collection as an abstraction. "The Beatles" is an abstraction used to refer to the individuals John, Paul, George, and Ringo. Because collection types can't be put on a scale, they are not called scalar data types.

Define Array

An Array is a collection that holds multiple pieces of data under a single name ("Countries", "Fast and the Furious Movies"). In daily life, we call them "lists."

The Beatles

Index	Data
0	"John Lennon"
1	"Paul McCartney"
2	"Ringo Starr"
3	"George Harrison"

or

Groceries

Index	Data
0	"Parsnips"
1	"English Toffee"
2	"Milk"
3	"Sprouted Rye Bread"

The individual elements that make up this collection (or list) are identified by an index.

It might seem strange that we start our list at 0 instead of 1. Programmers like 0 and most programming languages start their index at 0. Otherwise, it's pretty much a list like you've been making most of your life.

To define this "list" in JavaScript we would type:

const theBeatles = [
  "John Lennon",
  "Paul McCartney",
  "Ringo Starr",
  "George Harrison",
];

You provide a name (theBeatles), an assignment operator (=) and then a list of data, separated by commas, that should go in the Array, wrapped in []. Each bit of information is often a scalar value, but it could also be another collection (more on that later).

Define Array Element / Member

The individual pieces of data inside an Array are called elements. Some people also call the elements the members. In a collection of theBeatles, the String "George Harrison" is an element.

Define Array Index

Arrays provide a number that identifies each element called an index. The index for the element "Ringo Starr" above is 2.

We'll cover adding, removing, retrieving, and deleting elements via their index in another lesson.

Define Object

Another way of thinking about Arrays is that they are like tables that have an identifier that is a Number. If we let the identifier be a String instead of a Number, then we'd basically be describing an Object.

What if we wanted to take our list of the Beatles and describe each member not by some Number index, but rather by the instrument they played in the band? As a table this might look like:

Instrument	Beatle
"Rhythm Guitar"	"John Lennon"
"Bass"	"Paul McCartney"
"Drums"	"Ringo Starr"
"Lead Guitar"	"George Harrison"

An Object is a collection data type that holds multiple pieces of data under a collected name whose members can be read and updated by using a key instead of an index. In daily conversation we use keys to retrieve values all the time: "Who was the guy who played drums in The Beatles?"

We can think of Objects like a table that looks like this:

Key	Value
"liverpool"	"The Beatles"
"manchester"	"The Smiths"
"coventry"	"Delia Derbyshire and the BBC Radiophonic Band"
"london"	"Ziggy Stardust and the Spiders from Mars"

To define this "table" in JavaScript we would type:

const englishBandsByCity = {
  liverpool: "The Beatles",
  manchester: "The Smiths",
  coventry: "Delia Derbyshire and the BBC Radiophonic Band",
  london: "Ziggy Stardust and the Spiders from Mars",
};

You provide a name (englishBandsByCity), an assignment operator (=) and then a list of pairs, separated by commas, that should go in the Object, wrapped in {}. Each pair should have a key, a colon (:), and a value. A value is often a scalar value, but it could be another collection; more on that later.

Define Object Key

Objects are like tables that have a name that is a piece of data, typically a Symbol or a String. This identifier is called a key.

Define Object Value

The value that's returned from asking an Object what a given key points to is known as the key's value.

We'll cover adding, removing, retrieving, and deleting values via their key in another lesson.

Demonstrate Nesting of Collection Data Structures

Now that you know about Arrays (grocery lists, band members, todo lists) and Objects (abbreviation to full name lookup, a stock symbol to trading value lookup, instrument to band member name lookup) you might be a bit unimpressed. "Surely the world's data needs are more complex than simple lists and lookup tables," you might exclaim.

You'd be right, but the amazing thing about collections is that they can contain other collections as part of a process called nesting. Can you imagine an Array of Objects? Or an Object of Arrays of Objects of Arrays? You can cover a staggeringly huge model of data with nesting of these two data types.

We want to provide a really complex example of Arrays and Objects working together. Most programming texts don't share this concept this early and it makes "nesting" sound scary and complex. We're going to give you a short demonstration here so that you can see why you want to have these complex data structures. The details on how to build them etc... will come in later lessons.

The elements in an Array and the values in an Object can be Objects or Arrays themselves. This leads to "nesting" such that you could build a complex data structure like the following:

const englishMusicByCity = {
  manchester: [
    {
      bandName: "The Smiths",
      memberNames: ["Morrissey", "Johnny", "Andy", "Mike"],
    },
    {
      bandName: "Joy Division",
      memberNames: ["Peter", "Stephen", "Bernard", "Ian"],
    },
  ],
};

The abstraction englishMusicByCity hides the complexity in that piece of data.

As a peek ahead, we can use bracket notation ([]) to "dig into" this nested collection and get interesting information out:

englishMusicByCity["manchester"][0]["bandName"]; //=> "The Smiths"
englishMusicByCity["manchester"][0]["memberNames"]; //=> ["Morrissey", "Johnny", "Andy", "Mike"]

console.log(
  `There were ${englishMusicByCity["manchester"][0]["memberNames"].length} members in ${englishMusicByCity["manchester"][0]["bandName"]}`
);
//=> "There were 4 members in The Smiths"

Conclusion

This has been a broad tour of JavaScript's collection data types, Object and Array. Individually, they are data structures that can hold list- and dictionary-like data. Amazingly, they can even hold each other — and that means we can make very complex data structures from them! We'll practice with these types in the following lessons!