JavaScript Array Methods

Intermediate ~20 min read

Adding and Removing Elements

Methods to add or remove elements from the beginning or end of an array.

push(): Adds element to end
pop(): Removes element from end
unshift(): Adds element to beginning
shift(): Removes element from beginning

HTML

CSS

<h2>Basic Methods Demo</h2>
<p id='basicOutput'></p>

Slicing and Splicing

slice() extracts a part of an array and returns a new array (does not modify original).
splice() adds/removes items to/from an array (modifies original).

HTML

CSS

<h2>Slice/Splice Demo</h2>
<p id='spliceOutput'></p>

High-Order Array Methods

These methods take a function as an argument and are very powerful for data manipulation.

map()

Creates a new array by performing a function on each array element.

filter()

Creates a new array with all array elements that pass a test.

reduce()

Runs a function on each array element to produce (reduce it to) a single value.

HTML

CSS

<h2>Map/Filter/Reduce Demo</h2>
<p id='highOrderOutput'></p>

Summary

push/pop work on the end of the array.
unshift/shift work on the beginning of the array.
map transforms every element.
filter selects a subset of elements.
reduce combines elements into a single value.
These methods (especially map/filter/reduce) are essential for modern JavaScript (React, Vue, etc.).

Quick Quiz

Which method creates a NEW array with the results of calling a function for every array element?

forEach()

map()

filter()

reduce()

Previous Arrays

Next Objects

Adding and Removing Elements

Slicing and Splicing

High-Order Array Methods

map()

filter()

reduce()

Summary

Quick Quiz

Enjoying these tutorials?