What is "Introduction to Arrays" about?

Group related values together using arrays. Learn how to create, access, and modify arrays using built-in JavaScript methods.

What topics does "Introduction to Arrays" cover?

This article covers: javascript arrays, array push, array pop, array sort gotcha, javascript array methods.

Introduction to Arrays

The Essentials

Collections of Data: Arrays are ordered lists that hold multiple values in a single variable.
Zero-Indexed: Arrays start counting at 0. The first element is at index 0, the second is at index 1.
Mixed Types: JavaScript arrays can hold any mixture of data types: strings, numbers, booleans, and even other arrays.
Array Methods: Built-in methods like .push(), .pop(), .join(), and .concat() make it easy to manipulate the contents of an array.

So far, every variable I have created has pointed to a single value: one string, one number, or one boolean. But what happens when you have a list of related data?

If I wanted to store a list of synonyms for the word "array", it would be tedious to create a new variable for each one (let synonym1 = "plethora"; let synonym2 = "cornucopia";).

Instead, I can group them together using an array.

JavaScript

let synonyms = ["plethora", "array", "cornucopia"];

Arrays are ordered collections of data. You create them by wrapping your values in square brackets ([]) and separating them with commas.

Accessing Array Elements

Just like characters in a string, every element in an array is assigned a number based on its position. This number is called an index. And just like strings, arrays are zero-indexed.

To access a specific element, you use square bracket notation with the index number:

JavaScript

synonyms[0]; // Returns "plethora"
synonyms[2]; // Returns "cornucopia"

You can also ask the array for its total length:

JavaScript

synonyms.length; // Returns 3

Array Spells (Methods)

Arrays come with a massive toolkit of built-in methods (or "spells") that allow you to interact with and modify the data inside them. Here are a few of the most common ones:

Adding and Removing Elements

.push(value): Adds a new element to the end of the array.
.pop(): Removes the last element from the array and returns it.

JavaScript

synonyms.push("multitude"); // Adds "multitude" to the end
let removedWord = synonyms.pop(); // Removes "multitude" and stores it

Searching and Combining

.includes(value): Returns true if the value exists in the array, false otherwise.
.indexOf(value): Returns the index number of the first matching value.
.join(separator): Combines all the elements into a single string, separated by whatever string you provide.
.concat(otherArray): Merges two separate arrays into one new, combined array.

JavaScript

synonyms.includes("plethora"); // true

let names = ["Durgesh", "Rai"];
names.join(" "); // Returns "Durgesh Rai"

let moreSynonyms = ["batch", "cluster"];
let allSynonyms = synonyms.concat(moreSynonyms);

Sorting

The .sort() method is incredibly powerful, but it has a notorious quirk you need to be aware of.

If you have an array of strings, it sorts them alphabetically perfectly fine:

JavaScript

["c", "a", "d", "b"].sort(); // Returns ["a", "b", "c", "d"]

However, if you try to sort numbers, JavaScript gets confused. Because JavaScript is loose with data types, .sort() actually converts the numbers into strings before sorting them alphabetically.

JavaScript

[100, 2, 50].sort(); // Returns [100, 2, 50]

Alphabetically, "1" comes before "2", so 100 is placed before 2. This is a classic JavaScript "gotcha." (There is a way to fix this by passing a custom function into the .sort() method, which I will cover later).

Mixed Arrays and Nested Arrays

In many programming languages, an array can only hold one type of data (e.g., an array strictly for numbers). JavaScript does not care. You can mix and match data types to your heart's content:

JavaScript

let chaosArray = ["hello", 42, false, document.querySelector('body')];

You can even put an array inside another array. This is called a nested array:

JavaScript

let nested = [1, 2, [5, 6, 7]];

Because arrays are so flexible and come with such a powerful set of built-in methods, they will quickly become one of the most common data structures you use to build your applications.

Introduction to Arrays

The Essentials

Accessing Array Elements

Array Spells (Methods)

Adding and Removing Elements

Searching and Combining

Sorting

Mixed Arrays and Nested Arrays

Further Reading and Watching