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:

Creating Arrays
Accessing Elements
Array Length
Changing Elements
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.

उदाहरण: 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.

उदाहरण: 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.

उदाहरण: 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.

उदाहरण: 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.

उदाहरण: 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

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

JS Arrays

Creating Arrays

Accessing Elements

Array Length

Changing Elements

The Spread Operator With Arrays

Chapter Quiz — Complete all 6 topics to unlock

Login to run this code