JavaScript lesson · 14 min

JavaScript Arrays

Store ordered values, transform arrays with map, and filter data for real UI work.

Code runs locally in your browser

What you will practice

Create an array of values.
Use filter to keep matching items.
Use map to transform data for output.

What this means

An array is an ordered list of values. It is useful whenever your program needs to work with many related items instead of one value at a time.

Arrays preserve order. The first item is at index 0, the second item is at index 1, and so on. This can feel unusual at first, but it is normal in JavaScript and many other languages.

Array methods such as `filter`, `map`, `find`, and `join` let you describe what should happen to a list without writing every low-level step yourself.

If this is your first time seeing this

An array is a list. If you have many values of the same kind, put them in an array instead of creating many separate variables.

Array methods let you ask the list to do work: keep some items, transform items, find one item, or join everything into text.

Mini glossary

Array: An ordered list of values inside square brackets.
Index: The position of an item in an array. The first item is index 0.
map: Creates a new array by transforming every item.

Example from everyday life

An array is like a shopping list. The list has an order, it can grow, and you can process it: keep only fruit, turn every item into uppercase labels, or join everything into one printable line.

How it works step by step

The code creates an array named `tools` with four text values.
`filter` checks every tool name and keeps only names with 10 characters or fewer.
`map` takes the filtered names and transforms each one to uppercase.
`join(", ")` turns the final array into one readable line for output.

Where you will use this

A search page stores results in an array, then filters them by category or query.
A file uploader stores selected files in an array before showing previews.
An analytics dashboard stores daily numbers in an array before drawing a chart.

Before you run the code

Arrays hold ordered lists: names, URLs, results from an API, selected files, and many other things you work with in browser apps.

Methods like filter and map let you describe data transformations without manually managing indexes for every step.

Common beginner mistakes

Expecting the first item to be index 1. In JavaScript, the first index is 0.
Forgetting that `map` returns a new array.
Using an array when named object properties would explain the data better.

JavaScript editor

const tools = ["JSON Formatter", "Regex Tester", "Base64", "URL Parser"];

const shortNames = tools
  .filter((name) => name.length <= 10)
  .map((name) => name.toUpperCase());

console.log(`Short tools: ${shortNames.join(", ")}`);
console.log(`Total tools: ${tools.length}`);

Console output

Run the code to see console output here.

Exercise checks0 of 2 checks passed.

WaitingFilters and formats short names

WaitingKeeps the original array count

Code runs locally in a temporary browser worker with a timeout. It is not sent to Lumio analytics or executed on the server.

Try changing this next

Add another tool name to the array and run the code.
Change the length condition from `<= 10` to `<= 15`.
Try printing only the first item with `tools[0]`.

Previous lesson Next lesson