← Back to JavaScript Course | Chapter 3: Strings, Arrays & Data | Lesson 3 of 6

JS Arrays

Think of a numbered shelf, each slot holds one item, and you can always find something by its slot number, first slot, second slot, and so on, without needing separate labeled boxes for everything. A JavaScript array is exactly that shelf, an ordered list of values stored under a single variable name, each accessible by its position, called an index, starting from zero. Arrays are everywhere in real code, a list of tutorial titles, a set of quiz scores, or the languages taught on cookiescursor.com, all naturally fit into this ordered, indexed structure.

In this page:

  1. Creating Arrays
  2. Accessing Elements
  3. Array Length
  4. Changing Elements
  5. The Spread Operator With Arrays
Syntax
javascript 
const arrayName = [item1, item2, item3];
arrayName[index];
arrayName.length;

Creating Arrays

Arrays are created with square brackets [ ], containing a comma-separated list of values, which can be numbers, strings, objects, or even other arrays, all inside the same array.

Note: While arrays can technically hold mixed types, keeping an array's elements the same type usually makes code easier to reason about.
Warning: A trailing comma after the last element, while usually harmless, can sometimes create an unintended empty slot depending on the context.

Example: Creating Arrays

javascript 
// Declare the constant `numbers`, set to `[1, 2, 3]`
// Declare the constant `numbers`, set to `[1, 2, 3]`
const numbers = [1, 2, 3];
// Declare the constant `mixed`, set to `["text", 5, true]`
// Declare the constant `mixed`, set to `["text", 5, true]`
const mixed = ["text", 5, true];
// Print `numbers, mixed` to the console
// Print `numbers, mixed` to the console
console.log(numbers, mixed);

Accessing Elements

Array elements are accessed using square brackets with a zero-based index, arrayName[0] retrieves the first element, arrayName[1] the second, and so on. Trying to read an index that doesn't exist returns undefined instead of throwing an error.

Note: Use arrayName[arrayName.length - 1] to reliably access the last element, regardless of how many items the array holds.
Warning: Accessing an index that doesn't exist, like a 10-element array's index 20, returns undefined rather than throwing an error.

Example: Accessing Elements

javascript 
const fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]);
console.log(fruits[5]); // undefined, index doesn't exist

Array Length

Every array has a length property that reports how many elements it currently contains, automatically updating whenever elements are added or removed. length is also writable directly, and shrinking it manually will actually delete elements from the end of the array.

Note: length is commonly used as the stopping condition in loops that need to visit every element in an array.
Warning: Manually setting an array's length to a smaller number, like myArray.length = 2, actually deletes the extra elements, this is easy to do by accident.

Example: Array Length

javascript 
const items = ["a", "b", "c"];
console.log(items.length);
items.length = 1;
console.log(items); // ["a"], shrinking deletes elements

Changing Elements

An individual element can be changed by assigning a new value directly to its index, arrayName[index] = newValue, which replaces just that one slot without affecting the rest of the array.

Note: Changing an element by index is a direct, in-place modification, no new array is created, the original array itself is updated.
Warning: Assigning to an index far beyond the array's current length creates empty slots in between, which can lead to confusing gaps.

Example: Changing Elements

javascript 
// Declare the constant `colors`, set to `["red", "green", "blue"]`
// Declare the constant `colors`, set to `["red", "green", "blue"]`
const colors = ["red", "green", "blue"];
colors[1] = "yellow";
// Print `colors` to the console
// Print `colors` to the console
console.log(colors);

The Spread Operator With Arrays

The spread operator ... expands an array's elements individually, making it easy to copy an entire array or combine multiple arrays together into one new array.

It creates a new array rather than modifying the original, which is why it's a common tool for avoiding accidental mutation.

Note: Spreading into a new array, like [...original], creates a genuine copy, changes to the copy won't affect the original array.
Warning: The spread operator only performs a shallow copy, nested arrays or objects inside are still shared references, not deep copies.

Example: The Spread Operator With Arrays

javascript 
// Declare the constant `original`, set to `[1, 2, 3]`
// Declare the constant `original`, set to `[1, 2, 3]`
const original = [1, 2, 3];
// Declare the constant `copy`, set to `[...original]`
// Declare the constant `copy`, set to `[...original]`
const copy = [...original];
// Declare the constant `combined`, set to `[...original, 4, 5]`
// Declare the constant `combined`, set to `[...original, 4, 5]`
const combined = [...original, 4, 5];
// Print `copy, combined` to the console
// Print `copy, combined` to the console
console.log(copy, combined);
Live Example
Related Topics

JS Typed Arrays · JS String Methods · JS Array Methods · JS Strings

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting arrays are zero-indexed, the first element is at index 0, not 1.
  2. Trying to access an index beyond the array's length, which returns undefined rather than throwing an error.
  3. Confusing array length with the last valid index, the last index is always length minus one.
Chapter Summary
  • Arrays store ordered lists of values, accessed by a zero-based numeric index.
  • The length property reports how many elements an array contains, and elements can be changed by assigning to a specific index.
  • The spread operator can quickly copy or combine arrays, and dozens of built-in methods manipulate array contents.
Browser Support

Arrays and their core operations are fundamental JavaScript features supported identically in every modern browser.

🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson JS String Methods Next Lesson → JS Array Methods

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.