Whenever you're dealing with more than one of something, a list of tasks, a list of scores, a list of names, you're reaching for an array. It's genuinely one of the first things every JavaScript developer learns, and also one of the most-used tools in the entire language. This guide walks through creating arrays, working with them, and the handful of built-in methods you'll actually use all the time, with real code along the way.
 

Table of Contents

---

 

What Makes an Array an Array

It keeps things in order: each item has a fixed position, unlike an object where key order isn't guaranteed.

It's indexed from zero: the first item sits at position 0, not 1, which trips up a lot of beginners.

It can hold mixed types: numbers, strings, objects, even other arrays, all in the same list if you want.

let mixed = [42, "hello", true, { name: "Vi" }];

 

Creating an Array

The array literal is what you'll use almost every single time:

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

Array.from() is handy for converting something else, like a string, into an array:

let letters = Array.from("hi");
console.log(letters); // ["h", "i"]

One genuine gotcha: new Array(5) doesn't create an array containing 5, it creates an empty array with a length of 5.

console.log(new Array(5)); // [ <5 empty items> ]

 

Accessing and Modifying

let colors = ["red", "green", "blue"];

console.log(colors[0]);           // "red"
console.log(colors.at(-1));       // "blue", a clean way to grab the last item
colors[1] = "yellow";             // ["red", "yellow", "blue"]
console.log(colors.length);       // 3

 

Adding and Removing Items

let tasks = ["wake up", "code"];

tasks.push("sleep");     // adds to the end
tasks.pop();              // removes from the end
tasks.unshift("plan");    // adds to the start
tasks.shift();            // removes from the start

splice() is the flexible one, it can add, remove, or replace items anywhere:

let nums = [1, 2, 3, 4, 5];
nums.splice(1, 2); // remove 2 items starting at index 1
console.log(nums); // [1, 4, 5]

 

The Methods You'll Actually Use Constantly

map(), transforms every item into a new array:

let doubled = [1, 2, 3].map(n => n * 2);
console.log(doubled); // [2, 4, 6]

filter(), keeps only items that pass a test:

let evens = [1, 2, 3, 4].filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

reduce(), boils an array down to a single value:

let total = [1, 2, 3].reduce((sum, n) => sum + n, 0);
console.log(total); // 6

sort(), reorders items, with a genuine trap, it sorts as strings by default:

console.log([10, 2, 33].sort());               // [10, 2, 33], wrong
console.log([10, 2, 33].sort((a, b) => a - b)); // [2, 10, 33], correct

find(), returns the first item matching a condition:

let users = [{ name: "Vi", age: 22 }, { name: "Sam", age: 30 }];
console.log(users.find(u => u.age > 25)); // { name: "Sam", age: 30 }

 

Destructuring and Spread

Pulling values out into variables, and combining arrays, both got a lot cleaner with these two features:

let [first, second] = ["apple", "banana"];
console.log(first); // "apple"

let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]

 

Common Mistakes Worth Knowing

typeof doesn't actually detect arrays:

console.log(typeof [1, 2, 3]);        // "object"
console.log(Array.isArray([1, 2, 3])); // true, use this instead

Some methods change the original array, some don't. map(), filter(), and slice() return a new array. push(), pop(), and splice() modify the original directly.

let original = [1, 2, 3];
let doubled = original.map(n => n * 2);
console.log(original); // [1, 2, 3], unchanged

 

Conclusion

Arrays aren't complicated once you've actually used the common methods a few times, it's really just a matter of knowing which one fits the job, map to transform, filter to narrow down, reduce to combine, and splice when you need to insert or remove in place. Once those feel natural, a big chunk of everyday JavaScript starts feeling a lot easier.
 

Frequently Asked Questions (FAQs)

1.What's the difference between slice() and splice()?

slice() returns a new array without touching the original. splice() directly modifies the original array in place.

2.How do I check if an array is empty?

Check its length: if (myArray.length === 0). An empty array is still truthy, so checking the array itself in a condition won't work.

3.Why does sort() give wrong results on numbers?

By default it compares values as strings, not numbers. Always pass a comparator like (a, b) => a - b when sorting numbers.