How to Manage Multiple Values with Javascript Arrays

A Javascript array is a type of variable that holds multiple valid Javascript values. There is no limit to array size except for the amount of memory available when creating the array, according to the Javascript standard.

Since Javascript arrays can hold multiple values, programmers can group related information together, from sports scores to grades. Indexing values in an array makes it easy to access related values quickly and to perform calculations without having lots of extra variables.

Javascript arrays help developers keep variables and values organized in an easily accessible way inside a program. In this guide, we’ll walk through how to manage multiple variables and values with Javascript arrays.

Declaring Javascript Arrays

There are two different ways to declare Javascript arrays.

• The reserved word “new” with an array constructor
• Bracketed syntax called array literal notation

The two syntaxes create an array in exactly the same way. Many developers prefer to use array literal notation because it’s more concise.

let example1 = new Array([“a”, “b”, “c”]);
let example2 = [“a”, “b”, “c”];

The reserved word “new” can create an array in two different ways, depending on how you use it with an array constructor. The characteristics of the array depend on whether you give the constructor one numeric parameter or multiple parameters.

let example3 = new Array(1000);    // Array with 1000 empty elements
let example4 = new Array(1000, 1); // Array with 2 elements

Whitespace between array elements and within an array declaration may span multiple lines if necessary for readability. Whitespace is significant only inside a string. Be careful when the only difference between array indexes is the amount of whitespace, as shown in the second example below — it’s easy to do unintentionally.

let example5 = new Array([
    “a”,
    “b”,
    “c”
]);
let example6 = [
    “a”
    “b”,
    “c”,
    “c ”
];

Javascript arrays may hold duplicate values; those values can be any Javascript type. This example shows an array that contains strings, numbers, and null values:

let example7 = [“a”, 1, null, 3, “b”];

Unlike many other programming languages, such as Java, Javascript does not create arrays as one big block in memory. This means that array values can be “sparse”: mostly empty. In many programming languages, sparse arrays are slower to access than denser arrays, but Javascript implements sparse arrays in a way that makes them much faster to access.

Accessing Javascript Array Values

You can refer to elements in a Javascript array by their indexes. The first value in an array starts at 0, not 1. Array indexes are always numbers and two array elements must never have the same index.

Javascript uses bracketed notation to access array indexes. The same notation can access or change the values at array indexes.

let exampleArray = [“my”, “array”, “here”];
console.log(exampleArray[0]); // prints “my”
exampleArray[0] = “the”;      // changes “my” to “the”

Bracketed notation adds indexes to an array if they don’t already exist. Be careful when adding indexes in this way, though, because you could create empty indexes if you don’t know the length of the array beforehand. If you don’t want empty indexes in the array, empty indexes might cause problems for your code.

let exampleArray = [“my”, “array”, “here”];
exampleArray[3] = “too”;  // No gaps
exampleArray[5] = “see”;  // Skipped index 4, gap

Avoid this problem with the built-in array property length — it accesses array indexes from the end of the array, rather than the beginning.

exampleArray[exampleArray.length] = “n”; // Adds “n” to end of array
exampleArray[exampleArray.length-1];     // Get last array element

Since arrays always access their values via a number inside brackets, avoid numbers at the end of array variable names. You can easily misread an array index if you don’t see where brackets are at first glance, especially since many code editors use monospace fonts. The three examples below, for example, would be easy to mix up with a simple typo.

example8[15] = “a”; // Set index 15 of array “example8” to “a”
example81[5] = “a”; // Set index 5 of array “example81” to “a”
example[815] = “a”; // Set index 815 of array “example” to “a”

Conclusion

Javascript arrays are basic Javascript data structures: flexible collections that store values in groups. There are several different ways to declare arrays, and you should always make sure that array accesses are clear.

Enroll in our Intro to Programming Nanodegree Program today to learn more about Javascript arrays and other programming concepts.

Start Learning