Subjects and lessons to explore.

Law

Web Development · Foundations

Arrays

9 min read 5 practice questions
8 key termsSourcesReport an error
Want it in plain words first? Jump to Eli explains — the same idea, no jargon.
On this page 9 sections
  1. In 30 seconds
  2. Why this matters
  3. The college version
  4. Eli explains
  5. Worked example
  6. Key takeaway
  7. Quick check
  8. Study tools
  9. Sources & references

In 30 seconds

A JavaScript is an ordered collection whose elements are accessed with numeric indexes. The first position is 0, and the length property reports one more than the greatest present index. reads or assigns an , while methods such as push(), pop(), shift(), and unshift() add or remove elements. Many common array operations change the same array, so track that deliberately.

Why this matters

Arrays give JavaScript programs a compact way to keep related values in an order: tasks in a queue, test scores, or items a page should render. Indexing makes it possible to select one item, while the makes bounds checks and loops possible. The essential habit is distinguishing a method that changes an existing array from one that creates a result without changing it. That distinction prevents surprising data changes in browser interfaces and is a foundation for later work with loops, DOM updates, and API data.

The college version

Ordered elements and indexes

An array is an object-like JavaScript collection designed around ordered element positions. An array literal uses square brackets: const colors = ["red", "blue", "green"];. Its elements occupy numeric indexes. JavaScript begins indexing at zero, so colors[0] is "red", colors[1] is "blue", and colors[2] is "green". The bracket expression is not a one-based human counting system; it asks for the element associated with a property key representing an array index. That is why asking for colors[3] in this example returns undefined: no element has been stored at that position. Zero-based indexing can initially feel off by one, but it gives a direct relationship between an index and its offset from the start: index 0 is zero positions away, index 1 is one position away. Keep this lesson focused on ordered elements; named properties belong to the separate topic on objects.

Length is a boundary, not the last index

Every array has a length property. For const colors = ["red", "blue", "green"];, colors.length is 3. The last existing element is therefore at colors.length - 1, or index 2. A frequent error is to use colors[colors.length] when trying to retrieve the last element; that expression instead asks for the first position after the normal end and returns undefined here. Array length is maintained from indexed elements, and it can describe a range that includes empty positions. For introductory code, the safe model is that valid existing positions in a run from 0 through length - 1. Check the boundary before reading a position when input might be empty. An empty array [] has length 0 and no last element, so items[items.length - 1] is not a useful element lookup until the program has established that items.length > 0.

Reading, assigning, and changing the collection

Bracket notation can read an element or assign an element at an index. Given const tasks = ["plan", "draft"];, tasks[1] reads "draft"; tasks[1] = "review" replaces that element. Arrays also provide methods for common end and front operations. push(value) appends one or more values and returns the new length. pop() removes and returns the final element. unshift(value) adds one or more values at the beginning and returns the new length; shift() removes and returns the first element. These methods mutate the target array. Mutation means the collection itself changes, so another part of a program observing the same array will observe the updated elements. By contrast, slice() returns a new array containing a selected portion and does not mutate the source. Knowing which category a method belongs to is more useful than memorizing a long method list: inspect the documentation and make the intended data change explicit.

Mutation is not reassignment

An array can be held by a const binding and still have elements changed. const list = ["a"]; list.push("b"); is permitted because push() mutates the array rather than assigning a different value to the binding list. In contrast, list = ["a", "b"]; attempts to reassign that const binding and throws. The difference matters when reading code: const protects the association between the name and the array, not the array's contents. When an operation should preserve the original array, use a non-mutating operation such as slice() and store its result under an appropriate binding. This is also a design choice: a function that silently mutates input can surprise a caller, while a clearly named operation and a documented returned array make ownership easier to reason about. For values arriving from an unknown source, Array.isArray(value) tests whether the value is an array; do not rely only on a value's appearance in console output. This lesson does not treat arrays as a substitute for keyed records, nested data structures, functions, or browser APIs; those choices require different concepts.

Eli, the EliExplains learning guide

Eli explains

The same idea, in plain words

Explain it like I’m 10

An array is a numbered row of slots for related things. JavaScript starts the slot numbers at zero, so the first song in a playlist is in slot 0. The array's length tells you how many slots are in use, but it is not itself the number of the last slot. You can replace something in a slot, add a thing at the end with push, or remove the last thing with pop. Those actions change the same row of slots.

Picture it like this

Imagine a tray of numbered cubbies. The first cubby says 0, the next says 1, and so on. push puts a new item in the next cubby at the end; pop takes the item from the final cubby. The tray's length is the number of cubbies currently counted, so the last item's cubby number is one less than that count.

Where the picture stops working

JavaScript arrays are not fixed physical trays. Their length can change, and they can even have missing positions, so a real tray is only a guide to indexing and order. The analogy also cannot tell you whether an operation mutates an array; that comes from JavaScript's method rules.

Worked example

Execute: const tasks = ["plan", "draft", "review"]; tasks.push("publish"); const first = tasks.shift(); const last = tasks.pop(); console.log(JSON.stringify(tasks), tasks.length, first, last);. Start with three elements at indexes 0–2. push appends publish, so the array becomes four elements. shift removes and returns the first element, plan, leaving ["draft", "review", "publish"]. pop then removes and returns publish, leaving ["draft", "review"]. The remaining array has length 2, with elements at indexes 0 and 1. Run with Bun, the output is ["draft","review"] 2 plan publish. The original tasks array changed at each method call; no reassignment was needed.

Key takeaway

Use arrays for ordered values, count from index 0, and treat length as the boundary after the final element. Before calling an array method, know whether it changes the original array and what it returns.

Quick check

3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.

Question 1 of 3foundational

What is the index of the first element in a JavaScript array?

Choose an answer, then check it.
Question 2 of 3intermediate

For const pets = ["cat", "dog", "fish"];, which expression reads "fish"?

Choose an answer, then check it.
Question 3 of 3intermediate

After const names = ["Ari", "Bo"]; names.push("Cy");, what are names and the return value of push?

Choose an answer, then check it.
Practice all 5

Keep learning

Ready to build on this? Continue to the next lesson.

Practice this lesson
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related

You’ll learn to

  • Define a JavaScript array and identify its zero-based indexes.
  • Use bracket notation to read or assign an array element.
  • Explain what an array's length represents.
  • Trace the effects of basic methods that add or remove elements.
  • Distinguish mutation of an array from reassignment of its variable binding.

Common mistakes

  • Treating index 1 as the first array position.

    JavaScript arrays are zero-indexed, so the first element is at index 0.

  • Using array[array.length] for the last element.

    For a nonempty dense array, the last element is at array[array.length - 1].

  • Expecting push, pop, shift, or unshift to leave the original array unchanged.

    These methods mutate their target array; use a documented non-mutating operation when preservation is required.

  • Assuming const prevents changes to elements.

    Const prevents reassignment of the binding, not mutation of the array stored through that binding.

Easily confused

Index vs. Length

An index selects a position starting at zero; length is the boundary one past the final normal position.

`push()` vs. `pop()`

Push appends and returns a new length; pop removes and returns the final element.

Mutation vs. Reassignment

Mutation changes elements in an existing array; reassignment makes a binding refer to a different value.

Key vocabulary

array
A JavaScript collection that stores elements at ordered numeric index positions.
element
A value stored in an array at a particular index.
index
A zero-based numeric position used to access an array element.
length
An array property giving the boundary one position beyond its highest normal indexed element.
bracket notation
The [index] syntax used to read or assign an element at an array position.
mutation
A change made to an existing collection rather than a replacement of the variable binding that refers to it.
append
To add an element after the current final position of an array.
dense array
An array whose positions from zero through length minus one each hold an element.

Sources & references

  1. Array - JavaScript | MDN — MDN Web Docs
  2. Array.isArray() - JavaScript | MDN — MDN Web Docs
  3. ECMAScript Language Specification — Indexed Collections — Ecma International / TC39
  4. const - JavaScript | MDN — MDN Web Docs

EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.

Researched 2026-08-20

Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.