Key Concepts

Review core concepts you need to learn to master this subject

JavaScript Arrays

Accessing JavaScript Array elements

JavaScript Array length property

JavaScript Array .push() method

JavaScript Array .pop() method

JavaScript Arrays are mutable

JavaScript Arrays

// An array containing numbers const numberArray = [0, 1, 2, 3]; // An array containing different data types const mixedArray = [1, 'chicken', false, null];

In JavaScript, arrays are lists of ordered, stored data. They can hold items that are of any data type. Arrays are created by using square brackets, with individual elements separated by commas.

Accessing JavaScript Array elements

// An array containing numbers const numberArray = [0, 1, 2, 3]; // An array containing different data types const mixedArray = [1, 'chicken', false, null];

JavaScript array elements are arranged by index values, starting at 0 as the first element index. Elements can be accessed by their index using the array name, and the index surrounded by square brackets. Array items can be changed by accessing the item and assigning it to a new value.

JavaScript Array length property

// An array containing numbers const numberArray = [0, 1, 2, 3]; // An array containing different data types const mixedArray = [1, 'chicken', false, null];

The length property of a JavaScript array indicates the number of elements the array contains.

To obtain the length value, append the length property after the array name using a period.

JavaScript Array .push() method

// An array containing numbers const numberArray = [0, 1, 2, 3]; // An array containing different data types const mixedArray = [1, 'chicken', false, null];

The .push() method of JavaScript arrays can be used to add one or more elements to the end of an array. .push() mutates the original array returns the new length of the array.

JavaScript Array .pop() method

// An array containing numbers const numberArray = [0, 1, 2, 3]; // An array containing different data types const mixedArray = [1, 'chicken', false, null];

The JavaScript .pop() method removes the last element from an array and returns that element.

JavaScript Arrays are mutable

// An array containing numbers const numberArray = [0, 1, 2, 3]; // An array containing different data types const mixedArray = [1, 'chicken', false, null];

JavaScript Arrays are mutable, meaning that the values they contain can be changed.

Even if they are declared using const, the contents can be manipulated by reassigning internal values or using methods like .push() and .pop().

Arrays
Lesson 1 of 1
  1. 1

    Organizing and storing data is a foundational concept of programming. One way we organize data in real life is by making lists. Let’s make one here: […] Let’s now write this list in JavaScri…

  2. 2

    One way we can create an array is to use an array literal. An array literal creates an array by wrapping items in square brackets […] . Remember from the previous exercise, arrays can store a…

  3. 3

    Each element in an array has a numbered position known as its index. We can access individual items using their index, which is similar to referencing an item in a list based on the item’s positi…

  4. 4

    In the previous exercise, you learned how to access elements inside an array or a string by using an index. Once you have access to an element in an array, you can update its value. […] In th…

  5. 5

    You may recall that you can declare variables with both the […] and […] keywords. Variables declared with […] can be reassigned. Variables declared with the […] keyword cannot be …

  6. 6

    One of an array’s built-in properties is […] and it returns the number of items in the array. We access the […] property just like we do with strings. Check the example below: […] In t…

  7. 7

    Let’s learn about some built-in JavaScript methods that make working with arrays easier. These methods are specifically called on arrays to make common tasks, like adding and removing elements, mor…

  8. 8

    Another array method, […] , removes the last item of an array. […] In the example above, calling […] on the […] array removed […] from the end. […] does not take any a…

  9. 9

    There are many more array methods than just […] and […] . You can read about all of the array methods that exist on the Mozilla Developer Network (MDN) array documentation . […] and …

  10. 10

    Throughout the lesson we went over arrays being mutable, or changeable. Well what happens if we try to change an array inside a function? Does the array keep the change after the function call or i…

  11. 11

    Earlier we mentioned that arrays can store other arrays. When an array contains another array it is known as a nested array. Examine the example below: […] To access the nested arrays we ca…

  12. 12

    Nice work! In this lesson, we learned these concepts regarding arrays: Arrays are lists that store data in JavaScript. Arrays are created with brackets […] . * Each item inside of an array…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo