FSM Full Stack Masterclass
Platform under construction
JavaScript course badge

Arrays & Collections

Advanced

Array Methods

Array methods let you add, remove, copy, join and inspect list data. The key is knowing which methods mutate.

const tags = ["html", "css"];

tags.push("javascript");
const preview = tags.slice(0, 2);

Arrays & Collections

Array methods are list operations with different mutation rules.

Some array methods change the original array. push, pop, shift, unshift, reverse, sort and splice mutate.

Other methods return a new value or new array. slice, concat, includes and join leave the original array alone.

Modern JavaScript also includes non-mutating alternatives such as toSorted, toReversed and toSpliced in supported runtimes.

push / pop

Add or remove at the end, mutating the array.

shift / unshift

Remove or add at the start, mutating the array.

slice

Copy a section without mutating.

splice

Remove or insert items by mutating the original array.

Examples

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

Copy before changing shared data

const currentTags = ["html", "css"];
const nextTags = [...currentTags, "javascript"];

console.log(currentTags);
console.log(nextTags);

Unexpected mutation

const currentTags = ["html", "css"];
const nextTags = currentTags;

nextTags.push("javascript");

// currentTags changed too.

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.

push

Add one item to the end.

const tags = ["html", "css"];
tags.push("javascript");

console.log(tags);

slice

Copy part of an array without changing it.

const tags = ["html", "css", "javascript"];
const firstTwo = tags.slice(0, 2);

includes

Check whether an array contains a value.

const tags = ["html", "css"];

console.log(tags.includes("css"));

join

Turn array items into a string.

const tags = ["html", "css", "javascript"];

console.log(tags.join(", "));

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.

Know mutating methods

push, pop, shift, unshift, sort, reverse and splice change the array.

Use slice for copies

slice is a safe way to copy a section.

Use includes for membership

It reads better than indexOf for simple checks.

Use join for display strings

It is clearer than manual concatenation.

Prefer spread for simple additions

It creates a new array for state-like updates.

Document intentional mutation

Mutation is not always wrong, but it should be obvious.

Production thinking

Collection choices decide how readable data flow becomes.

Why does this matter?

Many array bugs are not syntax bugs. They happen because one part of the code changes a list another part still expects to be stable.

Accessibility

Array methods often update visible list content. Predictable updates prevent duplicate or missing items in the rendered UI.

Production note

Production code should be consistent about mutation, especially in shared state and rendering code.

SEO note

Lists of links or content blocks should be assembled predictably without accidental mutation.

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.

  • Rewrite the update with push and compare behavior.
  • Use includes to avoid adding a duplicate.
  • Use slice to show only the first two items.

Practice assignment

Do this before moving to the next topic.

  1. Use one mutating method.
  2. Use one non-mutating method.
  3. Explain which method changed the original array.

Try it yourself

Compare mutating and non-mutating updates

Live preview

Self-check

Before you continue, prove that you understand Array Methods.

Advanced

A collection method should tell the reader what kind of operation is happening before they read the callback body.

  1. Can you name three mutating array methods?
  2. Can you explain slice versus splice?
  3. Can you explain why includes is useful?
  4. Can you explain why spread helps with state updates?
  5. Can you explain when mutation is acceptable?