JavaScript Arrays 101

1. What Are Arrays and Why Do You Need Them?

Imagine you want to store the marks of 5 students.

Without arrays, you'd do this:

const marks1 = 85;
const marks2 = 90;
const marks3 = 78;
const marks4 = 92;
const marks5 = 88;

Fine for 5 students. What about 50? What about 500? You'd have 500 variables with no connection to each other. Printing them all means writing 500 console.log lines. Changing something means hunting through 500 variables. It's unmanageable.

Arrays fix this:

const marks = [85, 90, 78, 92, 88];
```

One variable. All 5 values. In order. And if you have 500 students tomorrow, the array handles it the same way — you just add more values.

**Think of an array like a row of boxes.** Each box holds one value. Each box has a number on it starting from 0. You can open any box by its number whenever you want.
```
 ┌─────┬─────┬─────┬─────┬─────┐
 │ 85 │ 90|    78  │  92 │88 │
 └─────┴─────┴─────┴─────┴─────┘
    0     1     2     3     4      ← index numbers

That's an array. Nothing more complicated than that.

Storing Values Individually vs Using an Array

Here's the same data, both ways:

// Individual variables — don't do this for lists
const fruit1 = "apple";
const fruit2 = "banana";
const fruit3 = "mango";
const fruit4 = "grapes";
const fruit5 = "orange";

// Array — do this instead
const fruits = ["apple", "banana", "mango", "grapes", "orange"];

With individual variables, adding a 6th fruit means creating a new variable. Looping through them all is impossible without writing each one manually. Passing them to a function means 5 separate arguments.

With an array, you add one more value inside the brackets. Looping is one line of code. Passing everything to a function is one argument. The array scales. Individual variables don't.

🔥 Gotcha #1 — Arrays in JavaScript can hold mixed types

In most languages, an array must hold all the same type — all numbers, or all strings. JavaScript has no such rule:

const mixed = [42, "hello", true, null, { name: "Priya" }, [1, 2, 3]];

Numbers, strings, booleans, null, objects, even other arrays — all in one array. JavaScript allows it completely.

This is powerful but dangerous. If you're not careful, you'll loop through an array expecting numbers and suddenly hit a string, and your math breaks silently. Always know what's actually inside your arrays.

2. How to Create an Array

The Main Way — Square Bracket Syntax

const fruits  = ["apple", "banana", "mango"];
const marks   = [85, 90, 78, 92];
const tasks   = ["buy groceries", "do laundry", "study JS"];
const flags   = [true, false, true, true];

Square brackets, values separated by commas. That's all.

An Empty Array — Also Valid

const items = [];   // empty, add stuff later

Storing an Array in Different Ways

// const — you'll use this most often
const colors = ["red", "green", "blue"];

// let — when you might reassign the whole array later
let scores = [10, 20, 30];

// var — old way, avoid it
var names = ["Priya", "Rahul"];

Use const for arrays by default. You can still add, remove, and change items inside a const array — const only prevents you from reassigning the variable itself to a completely new array.

🔥 Gotcha #2 — There's another way to create arrays and it has a bizarre trap

JavaScript has a second way called new Array(). Most beginners never use it, but they encounter it and get confused:

const arr = new Array(3);
console.log(arr);        // [ <3 empty items> ]
console.log(arr.length); // 3

You passed the number 3 and got an array with 3 empty slots — not an array containing the number 3. This is one of JavaScript's oldest design mistakes.

If you actually want an array containing the number 3:

const arr = [3];         // just use square brackets
console.log(arr);        // [3]
console.log(arr.length); // 1

Avoid new Array() entirely. Square brackets are clearer, shorter, and don't have this trap.

🔥 Gotcha #3 — Trailing commas are valid and won't create an extra element

const fruits = [
  "apple",
  "banana",
  "mango",   // ← trailing comma, totally fine
];

console.log(fruits.length);  // 3, not 4

JavaScript ignores the last comma. This is actually encouraged in modern code because it makes adding new items easier (you don't have to add a comma to the previous last line). Don't be alarmed when you see it.

3. Accessing Elements Using Index

Every item in an array has a position number called an index. The first item is at index 0, not 1. This is the thing that trips up beginners most.

const fruits = ["apple", "banana", "mango", "grapes", "orange"];
//                  0         1        2        3         4

To get an item, write the array name followed by the index in square brackets:

console.log(fruits[0]);  // "apple"
console.log(fruits[1]);  // "banana"
console.log(fruits[2]);  // "mango"
console.log(fruits[4]);  // "orange"

Why Does It Start at 0?

Because the index isn't really a "position number" — it's an offset from the start. The first item is 0 steps away from the beginning. The second item is 1 step away. It's a counting-from-zero system baked deep into how computers work.

Every major programming language does this. Burn it into your memory: first item is index 0.

Getting the Last Item

If you have 5 items, the last item is at index 4 — always one less than the total count. The clean way to always get the last item regardless of array size:

const fruits = ["apple", "banana", "mango", "grapes", "orange"];

console.log(fruits[fruits.length - 1]);  // "orange" — always the last item

fruits.length is 5. 5 - 1 is 4. fruits[4] is "orange". Works no matter how many items are in the array.

🔥 Gotcha #4 — Accessing an index that doesn't exist returns undefined, not an error

javascript

const fruits = ["apple", "banana", "mango"];

console.log(fruits[10]);   // undefined — no crash
console.log(fruits[-1]);   // undefined — no crash
console.log(fruits[999]);  // undefined — no crash

JavaScript never throws an error for out-of-range indexes. It just quietly returns undefined. This means you can write fruits[10] on a 3-item array and your code keeps running — silently using undefined somewhere downstream and eventually breaking in a confusing way far from the actual mistake.

Always double-check your index values when debugging unexpected undefined values.

🔥 Gotcha #5 — Negative indexes don't work like Python

If you've used Python, you know arr[-1] gives you the last item. This does not work in JavaScript:

const fruits = ["apple", "banana", "mango"];

console.log(fruits[-1]);  // undefined ← not "mango"!

JavaScript returns undefined for negative indexes. The only modern way to use negative indexes in JavaScript is with the .at() method:

console.log(fruits.at(-1));   // "mango" ✅
console.log(fruits.at(-2));   // "banana" ✅

.at() is newer (2022) but works in all modern browsers. For the last item, most developers still use fruits[fruits.length - 1] because it works everywhere.

4. Updating Elements

Updating an element is simple — access it by index and assign a new value:

const fruits = ["apple", "banana", "mango"];

fruits[1] = "strawberry";   // replace "banana" with "strawberry"

console.log(fruits);  // ["apple", "strawberry", "mango"]

The old value is gone. The new value takes its place.

You can update any index the same way:

const marks = [85, 90, 78, 92, 88];

marks[2] = 95;   // student improved their score

console.log(marks);  // [85, 90, 95, 92, 88]

🔥 Gotcha #6 — const arrays can still be updated

This surprises everyone coming from other languages:

const fruits = ["apple", "banana", "mango"];

fruits[0] = "pineapple";   // ✅ works fine
fruits[1] = "kiwi";        // ✅ works fine

console.log(fruits);  // ["pineapple", "kiwi", "mango"]

You declared it with const but still changed the contents. const only prevents you from reassigning the variable to a new array:

fruits = ["grape", "peach"];   // ❌ TypeError — can't reassign a const variable

The variable fruits must always point to the same array. But that array's contents can be changed freely. Use const for arrays by default and don't let this confuse you.

🔥 Gotcha #7 — Assigning to an index beyond the array creates empty slots

This one is genuinely weird:

const arr = ["a", "b", "c"];   // length 3

arr[6] = "g";   // assign to index 6, skipping 3, 4, 5

console.log(arr);         // ["a", "b", "c", empty × 3, "g"]
console.log(arr.length);  // 7
console.log(arr[3]);      // undefined
console.log(arr[4]);      // undefined
console.log(arr[5]);      // undefined

JavaScript doesn't throw an error. It creates a "sparse array" — an array with holes in it. Indexes 3, 4, and 5 exist but are empty. The length jumps to 7. These empty slots behave like undefined when accessed but behave inconsistently with array methods — some methods skip them, some don't.

Never intentionally assign to an index far beyond your array's current length. If you need to add to the end, there are proper methods for that.

5. Array Length Property

length tells you how many items are in the array:

const fruits = ["apple", "banana", "mango", "grapes", "orange"];

console.log(fruits.length);  // 5

It's not a method — no parentheses. It's a property. Just .length.

Length Updates Automatically

As you add or remove items, length updates itself:

const items = ["a", "b", "c"];
console.log(items.length);  // 3

items[3] = "d";
console.log(items.length);  // 4

items[4] = "e";
console.log(items.length);  // 5

You never have to manually track how many items are in your array. length always knows.

🔥 Gotcha #8 — You can manually set length and it destroys your array

This is something most developers don't know exists:

const fruits = ["apple", "banana", "mango", "grapes", "orange"];

fruits.length = 3;   // manually shrink length to 3

console.log(fruits);  // ["apple", "banana", "mango"]
// "grapes" and "orange" are permanently gone

Setting length to a smaller number truncates the array. The items beyond the new length are deleted — not hidden, not moved. Gone.

Setting it to a larger number creates empty slots:

fruits.length = 6;
console.log(fruits);   // ["apple", "banana", "mango", empty × 3]

Manually setting length is almost never what you actually want to do. The only common intentional use is clearing an array completely:

fruits.length = 0;   // empties the array
console.log(fruits); // []

Some developers use this trick, but it confuses anyone reading the code. Creating a new empty array is clearer.

🔥 Gotcha #9 — length is not the same as the highest index + 1 in sparse arrays

Normally, length equals highest index + 1, which equals total number of items. In a sparse array, it's not:

const arr = [];
arr[99] = "hello";

console.log(arr.length);  // 100 — not 1!
console.log(arr[0]);      // undefined — most slots are empty

You have one actual value but length is 100. This is why manually assigning to high indexes is dangerous — your length becomes misleading and looping through the array iterates over 99 empty slots before reaching your actual value.

6. Looping Over Arrays

Looping means going through every item in the array one by one. This is where arrays become truly powerful — you can process 5 items or 5000 items with the exact same code.

The Classic for Loop

const fruits = ["apple", "banana", "mango", "grapes", "orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// apple
// banana
// mango
// grapes
// orange

Breaking this down:

• let i = 0 — start at index 0

• i < fruits.length — keep going as long as i is less than the total count

• i++ — move to the next index after each iteration

• fruits[i] — access the item at the current index

This is the most fundamental loop. Understand every part of it.

The for...of Loop — Cleaner for Simple Cases

When you just need each value and don't care about the index:

const fruits = ["apple", "banana", "mango", "grapes", "orange"];

for (let fruit of fruits) {
  console.log(fruit);
}

// apple
// banana
// mango
// grapes
// orange

for...of gives you the value directly. No index variable. No fruits[i]. Cleaner to read when you just want to go through every item.

When to Use Which Loop

Use the classic for loop when you need the index — for example, to print "Item 1: apple, Item 2: banana":

for (let i = 0; i < fruits.length; i++) {
  console.log("Item " + (i + 1) + ": " + fruits[i]);
}

// Item 1: apple
// Item 2: banana
// Item 3: mango
// Item 4: grapes
// Item 5: orange

Use for...of when you only care about the values themselves.

🔥 Gotcha #10 — Looping with for...in on arrays works but is wrong

for...in is designed for objects. Technically it works on arrays, but it's the wrong tool and causes real problems:

const fruits = ["apple", "banana", "mango"];

for (let key in fruits) {
  console.log(key);   // "0", "1", "2" — gives you indexes as STRINGS, not values
}

You get the indexes as strings, not the actual values. And if any library added something to Array.prototype, those extra properties show up in your loop too.

Always use for or for...of for arrays. Never for...in.

🔥 Gotcha #11 — Modifying an array while looping with for...of is dangerous

const numbers = [1, 2, 3, 4, 5];

for (let num of numbers) {
  console.log(num);
  if (num === 3) {
    numbers.push(6);   // adding items while looping
  }
}

Adding items to an array while looping through it can cause unexpected behaviour — in some cases an infinite loop, in others skipped items. Modifying the array you're currently iterating is a recipe for subtle bugs. If you need to modify an array based on a loop, collect changes first and apply them after the loop is done.

---

🔥 Gotcha #12 — for loop condition using <= instead of < is a classic off-by-one error

This is one of the most common beginner bugs:

const fruits = ["apple", "banana", "mango"];  // indexes 0, 1, 2

for (let i = 0; i <= fruits.length; i++) {   // ← <= instead of 
  console.log(fruits[i]);
}

// apple
// banana
// mango
// undefined  ← extra iteration at index 3, which doesn't exist

fruits.length is 3. With <=, the loop runs when i is 0, 1, 2, and 3. Index 3 doesn't exist — you get undefined on the last iteration. The condition must be i < fruits.length, not i <= fruits.length.

Assignments — Do These Before Moving On

Assignment 1 — Five Favourite Movies

const movies = [
  "Inception",
  "Interstellar",
  "The Dark Knight",
  "3 Idiots",
  "Dil Chahta Hai"
];

Assignment 2 — Print First and Last Element

console.log(movies[0]);                    // "Inception"
console.log(movies[movies.length - 1]);    // "Dil Chahta Hai"

Assignment 3 — Change One Value and Print Updated Array

movies[2] = "Taare Zameen Par";

console.log(movies);
// ["Inception", "Interstellar", "Taare Zameen Par", "3 Idiots", "Dil Chahta Hai"]

Assignment 4 — Loop and Print All Elements

for (let i = 0; i < movies.length; i++) {
  console.log((i + 1) + ". " + movies[i]);
}

// 1. Inception
// 2. Interstellar
// 3. Taare Zameen Par
// 4. 3 Idiots
// 5. Dil Chahta Hai

Bonus — Same Loop Using for...of

for (let movie of movies) {
  console.log(movie);
}

---

The 12 Gotchas Recap

Keep this list:

1. Arrays can hold mixed types — numbers, strings, objects, other arrays all at once

2. new Array(3) creates 3 empty slots, not an array containing 3 — use square brackets always

3. Trailing commas are valid and don't add extra elements

4. Accessing a missing index returns undefined silently — no error

5. Negative indexes return undefined in JavaScript — use .at(-1) for last item

6. const arrays can still have their contents updated — const only blocks reassignment

7. Assigning to an index beyond the array's end creates empty "sparse" slots

8. Manually setting length to a smaller number permanently deletes those elements

9. In a sparse array, length doesn't equal actual number of items

10. Never use for...in on arrays — use for or for...of

11. Modifying an array while looping through it causes unpredictable behaviour

12. Use i < array.length not i <= array.length — off-by-one is the most common loop bug