Introduction and Overview

Hello! Today, we will delve into JavaScript's data structuresArray and Object. Think of Arrays like a grocery list. In contrast, you can liken Objects to detailed recipes — each ingredient, (key), is paired with a quantity, (value). Let's explore!

Exploring JavaScript Arrays

Picture arrays as locker boxes, each holding an item. We declare an array in JavaScript as follows:

We access array items by an index:

Understanding Zero-Based Indexing

Arrays in JavaScript are zero-indexed, which means the first element of an array is at index 0, the second element at index 1, and so on. To access values from an array, you simply refer to the item's position using its index:

In this example, fruits[0] accesses the first element of the fruits array, which is "Apple". Remember, the counting starts from 0, not 1. So, fruits[0] is the first element, fruits[1] is the second element, and so on. Isn't that easy?

Basic Array Methods and Properties: `length` and `push`

JavaScript arrays offer numerous methods and properties for use. The length property counts the elements of an array:

The push() method adds an extra element to an array's end:

Introduction to JavaScript Objects

If you think of arrays as food menus, objects could be seen as detailed recipes. Every key, which is akin to an ingredient, is paired with a value, which is akin to the quantity.

To retrieve values from an Object, you can think of the dot notation or bracket notation as opening the right pocket of your backpack:

  • Dot notation: myObject.name
  • Bracket notation: myObject["weight"]

We can add new key-value pairs:

Using Objects and Arrays Together

In JavaScript, objects can store various types of data, including arrays. This structure is particularly useful when you want to group related data together. Let's explore this concept with an example:

Consider a person object that stores basic information about a person and their list of favorite colors. This object can have properties like name, age, and favoriteColors. The favoriteColors property is an array that holds a list of colors.

Here’s how we can define such an object:

As you see here, favoriteColors is an array of strings, each representing a favorite color. To access the first favorite color, we use person.favoriteColors[0]. Remember, array indexing starts at 0, so [0] will give us the first element:

Lesson Summary

We have learned how to construct and manipulate arrays and objects, understood zero-based indexing, acquainted ourselves with basic array methods, and learned how to add new fields to an object.

Next up, we have practice exercises to test your understanding of JavaScript arrays and objects. Let's forge ahead!

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal