JavaScript Arrays

This lesson explains JavaScript Arrays in JavaScript with beginner-friendly examples, practical use cases, and clear best practices.

JavaScript Arrays Overview

JavaScript arrays are ordered collections used to store multiple values in a single variable. Arrays are commonly used to manage lists of items such as users, products, scores, menu items, API results, form values, and UI data.

Arrays can store strings, numbers, booleans, objects, functions, and even other arrays. JavaScript provides many built-in array methods such as push, pop, map, filter, find, reduce, and forEach to make data processing easier.

Array Concept	Description	Example Usage
Array	Ordered collection of values.	Product lists, user lists.
Index	Position of an item in an array.	Access first or last item.
Length	Total number of items in an array.	Loop conditions.
Array Method	Built-in function used to process arrays.	map, filter, reduce.
Nested Array	Array inside another array.	Tables, matrix data.

JavaScript Arrays Example

const fruits = ["Apple", "Banana", "Mango"];

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits.length);

fruits.push("Orange");

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

This example creates an array, accesses values using index numbers, checks the array length, adds a new value, and loops through all items using for...of.

Top 10 JavaScript Array Examples

The following examples show common JavaScript array patterns used in modern web applications, including adding items, removing items, searching, filtering, transforming, and calculating values.

#	Example	Syntax
1	Create Array	`const fruits = ["Apple", "Banana", "Mango"];`
2	Access First Item	`const first = fruits[0];`
3	Get Array Length	`const total = fruits.length;`
4	Add Item	`fruits.push("Orange");`
5	Remove Last Item	`fruits.pop();`
6	Loop Through Array	`for (const fruit of fruits) { console.log(fruit); }`
7	Map Array	`const names = users.map(user => user.name);`
8	Filter Array	`const active = users.filter(user => user.active);`
9	Find Item	`const user = users.find(user => user.id === 1);`
10	Reduce Array	`const total = prices.reduce((sum, price) => sum + price, 0);`

Best Practices

Use arrays when storing ordered collections of related values.
Use descriptive plural names such as users, products, or scores.
Use for...of when you need to loop through array values.
Use map when transforming values into a new array.
Use filter when selecting matching values.
Use find when searching for one matching item.
Use reduce for totals and accumulated results.
Avoid changing the original array when immutability is important.

Common Mistakes

Forgetting that array indexes start at 0.
Accessing an index that does not exist.
Using for...in instead of for...of for array values.
Modifying the original array when a new array is expected.
Confusing map with forEach.
Forgetting to return a value inside map or filter.
Using arrays when an object would better describe named data.

Key Takeaways

Arrays store multiple values in a single variable.
Array indexes start from 0.
The length property returns the number of items.
Array methods make data processing easier and cleaner.
map, filter, find, and reduce are essential modern JavaScript methods.
Arrays are widely used in frontend, backend, API, and full-stack development.

Pro Tip

Master array methods like map, filter, find, and reduce. These methods are used heavily in React, Node.js, API data processing, dashboards, and real-world web applications.