ReviseAlgo Logo

Arrays & Iterables

Array Creation & Access

Master JavaScript array basics. Learn literal declaration, constructors, sparse array behaviors, and modern at() method indexing.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

Arrays are ordered lists of values in JavaScript. Unlike arrays in typed languages, JavaScript arrays are dynamic (can grow or shrink in size automatically) and can hold values of mixed data types.

2. Why It Matters

Arrays are the most common structure for collection handling, list updates, and data table generation. Knowing how to initialize arrays and retrieve elements securely prevents index out-of-bounds runtime errors.

3. Real-World Analogy

Think of a Post Office Mailbox Cabinet:

  • Array: A single cabinet containing a series of numbered drawers stacked vertically.
  • Indexes: The labels on the drawers, starting at 0 for the bottom drawer, 1 for the next, and so on.
  • Elements: The packages stored inside the drawers. You access them by calling out the drawer number. Using negative indexing (the at() method) is like starting from the top drawer and counting downwards.

4. How It Works

Let's explore array creation and property access:

1. Array Initialization:

Initialize arrays using array literal syntax (brackets) or the Array constructor.

2. Element Access & the at() Method:

Access elements using standard bracket notation, or retrieve values from the end of the array using the modern at() method, which supports negative indexing.

5. Sparse Arrays

If you assign an element to an index beyond the current array length, or initialize an array using the constructor with a number argument, JavaScript creates a Sparse Array containing empty slots (holes). Empty slots behave as undefined when accessed, but they are skipped by array iteration methods like forEach or map.

6. Practical Example

This script shows how to create and access elements securely:

7. Common Mistakes

  • Using negative indexes with bracket notation: Writing arr[-1] looks for an object key literally named "-1" instead of accessing the last element. Always use the at(-1) method for negative index access.
  • Unintentionally creating sparse arrays: Creating empty slots makes array iterations unpredictable. Avoid using new Array(length); instead, initialize arrays with default values using Array(length).fill(defaultValue).

8. Quick Quiz

Q1: Which method should you use to access the last element of an array using a negative index?

A) arr[-1]

B) arr.at(-1)

Answer: B — arr.at(-1) is the standard method for retrieving elements using negative indexes.

9. Scenario-Based Challenge

The Ring Buffer Queue:

You are designing a notification display that keeps only the last 3 items: notifications. If a new item arrives, append it, and ensure that trying to read notifications using index offsets always fetches active values from the end of the list safely.

10. Debugging Exercise

Explain why this array copy setup has empty gaps, and how to fix it:

const source = [10, 20, 30];
const target = new Array(source.length); // creates empty slots

for (let i = 0; i < source.length; i++) {
  // Objective: fill target with double the source values
  target[i] = source[i] * 2;
}
console.log(target); // [20, 40, 60] - works, but how do we initialize it without sparse array templates?
View Solution

Diagnosis: While the loop fills the empty slots, initializing the array using new Array(3) creates a sparse array in memory. A cleaner approach is to use the spread operator to create a copy, or initialize it with default values using fill().

Fix: Create the new array by mapping directly from the source array, avoiding the constructor entirely:

const target = source.map(val => val * 2);

11. Interview Questions

🟢 Q1: What is a sparse array in JavaScript, and how do built-in iteration methods handle empty slots?

Answer: A sparse array is an array that contains empty slots (holes), where some indexes have no assigned values. Built-in iteration methods handle empty slots differently:
• Methods like forEach, map, and filter skip empty slots entirely.
• Operations like find, indexOf, or the spread operator ([...arr]) treat empty slots as if they contain the value undefined.

12. Production Considerations

  • • Array Pre-allocation: Modern JavaScript engines optimize arrays based on their contents. Pre-allocating small arrays is rarely necessary. To create an array of a specific size with default values, use the safe, explicit pattern: Array.from({ length: size }, () => defaultValue).