Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A JavaScript array stores values in an ordered list. Create one with square brackets, use zero-based indexes to access its items, and use methods such as push(), map(), and filter() to work with the list.
How do I create an array in JavaScript?
For most beginner examples, write an array literal: square brackets around comma-separated values.
const colors = ["red", "green", "blue"];This creates an Array object whose values are ordered. Arrays can contain different kinds of values and can grow or shrink, but keeping related values together—such as colors, shopping items, or scores—usually makes your code easier to follow. MDN’s Array reference and guide to indexed collections explain arrays in more depth.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →How do I get or change an item?
Each item has an index, and counting starts at 0: the first value is at index 0, the second at 1, and the third at 2.
#1 Best Overall
const colors = ["red", "green", "blue"];
console.log(colors[0]); // "red"
colors[0] = "purple";
console.log(colors[0]); // "purple"Use the same bracket notation to read or replace an item. Reading an index that has no value returns undefined; it does not throw an error.
What does length mean?
The length property gives the array’s indexed extent: in a dense array, it is the number of items.
const colors = ["red", "green", "blue"];
console.log(colors.length); // 3Because indexes start at zero, the last item in a non-empty dense array is at colors.length - 1. An array’s length is one more than its highest array index, so sparse arrays—those with gaps—can have a length larger than the number of values actually present.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #2
How do I add or remove an item?
push() adds one or more values to the end of the existing array and returns the new length. pop() removes and returns the last value. Both methods change the original array.
const shopping = ["bread", "milk"];
shopping.push("apples");
console.log(shopping); // ["bread", "milk", "apples"]
const lastItem = shopping.pop();
console.log(lastItem); // "apples"
console.log(shopping); // ["bread", "milk"]These are convenient operations when you want to add or remove items at the end of a list.
When should I use map() or filter()?
Use map() to transform every item
map() calls a function for each item and returns a new array containing the callback’s results. It does not replace the original array.
const scores = [10, 20, 30];
const doubled = scores.map((score) => score * 2);
console.log(doubled); // [20, 40, 60]
console.log(scores); // [10, 20, 30]Use filter() to keep matching items
filter() returns a new array containing the items for which its test function returns a truthy value.
const scores = [10, 20, 30, 40];
const passing = scores.filter((score) => score >= 30);
console.log(passing); // [30, 40]Choose map() when every item should become a corresponding result. Choose filter() when you want a subset that passes a condition. MDN’s JavaScript language overview includes examples of array methods and iteration.
What is the difference between map() and forEach()?
map() returns a new array of callback results, making it useful for transforming data. forEach() runs a callback for each item and is intended for an action, such as logging values; it does not produce a transformed array as its useful result.
Rank #4
const colors = ["red", "green", "blue"];
const labels = colors.map((color) => color.toUpperCase());
console.log(labels); // ["RED", "GREEN", "BLUE"]
colors.forEach((color) => console.log(color));How do I find or check an item?
Use find() when you want the first item that passes a test. If no item matches, it returns undefined. Use includes() to check whether the array contains a particular value; it returns true or false.
const colors = ["red", "green", "blue"];
const match = colors.find((color) => color.length > 4);
console.log(match); // "green"
console.log(colors.includes("blue")); // trueHow can I repeat an action for each item?
Use forEach() for a callback-based action, for...of for a direct value-by-value loop, or a traditional for loop when you need the index or explicit control over the loop.
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}
for (let index = 0; index < colors.length; index++) {
console.log(index, colors[index]);
}MDN demonstrates both for and for...of in its indexed collections guide.
What are empty slots, and are arrays key-value objects?
Increasing an array’s length creates empty slots, not actual elements whose value is undefined. For example, an array can have a length of three while holding only one assigned value. Some array methods treat empty slots differently from explicit undefined values, so prefer adding real values rather than creating gaps while learning.
const items = ["first"];
items.length = 3;
console.log(items.length); // 3
console.log(items[1]); // undefinedMDN explains that JavaScript arrays are not associative arrays: elements are accessed by nonnegative integer indexes (or their string forms), not arbitrary string keys. For key-value lookup, use an object or a Map instead of assigning named properties as though they were array indexes. See MDN’s Array reference for the details.
Where can I learn more?
MDN’s Array reference is a free guide and reference with examples for array behavior and methods. For a more structured beginner introduction, No Starch Press’s JavaScript for Kids by Nick Morgan includes a chapter on arrays and practice challenges. The publisher presents it especially for children and parents, while also describing it as an introduction for beginners more generally. It is a broader learning book, not a requirement or an arrays-only manual.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
