2.6 Arrays

In a real application, you often need to store a list of items: the products in a shopping cart, the colors selected by the user, the messages in a conversation. JavaScript provides the array reference type to manage such lists. To declare one, use a meaningful camelCase name and assign square brackets — what we call an array literal:

let selectedColors = [];
selectedColors = ['red', 'blue'];
console.log(selectedColors); // ['red', 'blue']

Accessing elements by index

Each element in an array has an index that represents its position. Indexes start at 0: the first element is at index 0, the second at 1, and so on. To read an element, use the bracket notation followed by the index. selectedColors[0] returns 'red' here.

Arrays are dynamic

Just like variable types, the length and content of an array are dynamic. You can add an element by assigning to a new index — selectedColors[2] = 'green' — and the array grows to three elements automatically. Unlike many statically typed languages, JavaScript also lets you mix types inside the same array, for example two strings and one number.

  • typeof selectedColors returns "object" — an array is technically an object.
  • Arrays inherit useful properties; we'll explore them in detail when we cover prototypes.
  • The length property returns the number of items: selectedColors.length would return 3.

Later in the course, a whole section is dedicated to arrays and the many operations you can perform on them. That's it for this overview. In the next video we will look at functions in JavaScript.

Summary

Arrays are a fundamental data structure in JavaScript used to store lists of objects, such as shopping cart products or user-selected colors. In this lesson, you'll learn how to declare arrays using brackets, initialize them with elements, access items by their index (starting from 0), and leverage JavaScript's dynamic nature to add elements and modify array contents at runtime. Arrays in JavaScript are actually objects with built-in properties like length, which automatically updates as the array grows.

Key points

  • Arrays are declared using square brackets ([]) and store multiple values in a single variable, useful for managing lists of items like products or colors
  • Each element in an array has an index that determines its position, with numbering starting at 0 for the first element
  • JavaScript arrays are dynamic—you can add, modify, or remove elements at any time, and the array's length automatically updates
  • Unlike many programming languages, JavaScript arrays can contain mixed data types (strings, numbers, objects) in the same array
  • Arrays are objects in JavaScript and have built-in properties like length that provide information about the array's contents
  • You can access array elements using bracket notation with the element's index (e.g., selectedColors[0] returns the first element)

FAQ

How do I access a specific element in a JavaScript array?

Use bracket notation with the element's index. For example, if you have an array selectedColors with elements at indices 0, 1, and 2, use selectedColors[0] to access the first element, selectedColors[1] for the second, and so on.

Can I store different data types in the same JavaScript array?

Yes, JavaScript arrays are dynamically typed. Unlike many other programming languages, a single array can contain strings, numbers, objects, or any other data type mixed together without restriction.

How does JavaScript know how many elements are in an array?

Arrays have a built-in length property that automatically tracks the number of elements. Whenever you add or remove elements from the array, the length property updates dynamically to reflect the current number of items.