Arrays are the most used data structure in JavaScript. Every app you build will use them constantly — for lists of products, users, messages, and more. Master arrays and you master data manipulation.
Day 14 / 180
Beginner Phase
🕐15 min read
💻8 code examples
🎯3 practice tasks
Think about every app you use daily:
🛒 Amazon: List of products in your cart
📱 WhatsApp: List of your messages
🎵 Spotify: List of songs in your playlist
👥 LinkedIn: List of your connections
Every single one of those lists is an array. Arrays are how JavaScript stores and manages collections of data. Every real application you will ever build uses arrays constantly — from displaying products to processing API responses to managing state in React. This is one of the most important lessons in the entire roadmap.
1. What is an Array?
An array is an ordered list of values. Unlike variables that store one value — arrays store multiple values in a single container. Each value has an index starting from 0:
JavaScript — Array Basics
// Create an arrayconst fruits = ["apple", "banana", "mango"];
// index 0 index 1 index 2// Arrays can hold any type — even mixedconst mixed = [42, "hello", true, null, [1, 2]];
// Array length
console.log(fruits.length); // 3// Check if something is an array
console.log(Array.isArray(fruits)); // true
console.log(Array.isArray("hello")); // false// Real world arrayconst products = [
{ name: "Shirt", price: 1500, inStock: true },
{ name: "Pants", price: 2500, inStock: false },
{ name: "Shoes", price: 3500, inStock: true },
{ name: "Watch", price: 8000, inStock: true },
];
console.log(products.length); // 4
2. Access & Update Array Items
Access items using their index number in square brackets. Remember — indexes start at 0 not 1. This is one of the most common beginner mistakes:
JavaScript has built-in methods to add and remove items from arrays. Some mutate the original array — others return a new one. Knowing which is which prevents bugs:
These three methods are used in every real JavaScript application. They transform, filter, and aggregate array data without mutating the original. If you master these three — you can handle 90% of all data manipulation tasks:
map() always returns a new array with the same number of items as the original — just transformed. If you want to reduce the count use filter(). If you want to count or sum use reduce(). Using the wrong one is a very common mistake.
Pro Tip #2 — Chain filter then map
The most powerful pattern in real apps is chaining — .filter() first to reduce the array, then .map() to transform. This is exactly how React components process API data before rendering. Get comfortable with this pattern early.
Pro Tip #3 — Prefer immutable operations
In modern JavaScript — especially React — prefer methods that return new arrays over methods that mutate. Use spread ([...arr, item]) instead of push(). Use filter() instead of splice(). Immutable code prevents a massive category of bugs.
6. sort & reverse — Ordering Arrays
Sorting arrays is a very common operation — sorting products by price, users by name, dates by newest first. JavaScript's sort() has a surprising default behavior you need to know:
Edit the code and click Run Code. Try chaining methods together and see the power of array manipulation!
✏️ Try it Yourself — Arrays
OUTPUT
// Click Run Code to see output
💡 Edit the code and click Run!
9. Practice Tasks
Task 1 — Easy: Student Grades
Create an array of 5 students with name and marks. Use map() to add a grade property to each (A+ above 90, A above 80, B above 70, else C). Use filter() to get only passing students (marks above 50). Log both results.
Task 2 — Medium: Shopping Cart Manager
Build a cart array with 5 products (name, price, quantity). Use reduce() to calculate total bill. Use filter() to remove out of stock items. Use sort() to order by price. Use find() to locate a specific item by name. Log all results.
Task 3 — Hard: Data Pipeline
You have an API response — array of 10 users with name, age, city, salary, isActive. Write a single chained expression that: filters active users only, filters users with salary above 50000, maps to extract just name and salary, sorts by salary descending, and returns the top 3. This is exactly how real React apps process API data.
.jpg.png)
