Platform under construction

Arrays & Collections

Advanced

Arrays

Arrays store ordered lists of values. They are the foundation for lists, queues, search results, UI rows and data transformations.

const topics = ["HTML", "CSS", "JavaScript"];

console.log(topics[0]);
console.log(topics.length);

Arrays & Collections

An array is an ordered, zero-indexed list.

Arrays are used when order matters or when you have many values of the same kind. A list of records, tags, messages or selected ids is usually an array.

Array positions start at zero. The first item is index 0, the second item is index 1, and length tells you how many items are in the array.

Arrays are objects and they are mutable by default. Some methods change the original array, while others return a new array. Knowing the difference is essential.

Zero index

The first item is array[0].

length

The number of items in the array.

Mutable

Many array methods can change the original array.

Iterable

Arrays work with for...of, spread and many collection patterns.

Examples

Array code should reveal whether it reads, mutates, transforms or summarizes.

List data kept together

const topics = ["HTML", "CSS", "JavaScript"];

const firstTopic = topics[0];
const totalTopics = topics.length;

Separate variables for list data

const topic1 = "HTML";
const topic2 = "CSS";
const topic3 = "JavaScript";

// This becomes hard to loop, filter or render.

Code patterns

Reusable examples for quick reference.

These are the patterns developers search for constantly: reading items, copying arrays, choosing map/filter/reduce, sorting with a comparator, destructuring and using Set or Map.

Create an array

Use an array literal for most lists.

const topics = ["HTML", "CSS", "JavaScript"];

Read by index

Use square brackets to read a position.

const topics = ["HTML", "CSS", "JavaScript"];

console.log(topics[0]);

Add without mutating

Spread creates a new array with extra items.

const topics = ["HTML", "CSS"];
const nextTopics = [...topics, "JavaScript"];

Check array shape

Use Array.isArray instead of typeof.

const value = ["HTML", "CSS"];

console.log(Array.isArray(value));

Rules that matter

The right collection method makes the intent obvious.

Arrays and collections are not just storage. They describe whether the code is selecting, transforming, grouping, counting, sorting or enforcing uniqueness.

Use arrays for ordered lists

If position or sequence matters, an array is a natural fit.

Remember zero-based indexes

The first item is index 0.

Use length for count

length is one more than the last index.

Know mutation behavior

push changes the original array; map returns a new one.

Use Array.isArray

typeof [] returns object, not array.

Keep item shape consistent

Arrays are easier to work with when items have the same shape.

Production thinking

Collection choices decide how readable data flow becomes.

Why does this matter?

Most UI data eventually becomes a list. Arrays are how JavaScript stores and transforms those lists.

Accessibility

Arrays often render navigation, cards or messages. Stable order and clear item data help accessible output stay predictable.

Production note

Production code should avoid accidental array mutation when the same data is shared across modules or UI state.

SEO note

Arrays often hold rendered links, headings or structured content blocks. Stable arrays produce stable page output.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add a fourth topic to the array.
Render the total number of topics.
Read and display the first item separately.

Practice assignment

Do this before moving to the next topic.

Create an array with three items.
Read the first and last item.
Add one item using spread.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Arrays.