TheDevSpace | Full-Stack Web Development Course
JavaScript Arrays
Cheat Sheet
Master full-stack development, one project
at a time with thedevspace.io.
Creating Arrays
Create an empty array.
1 const emptyArr = [];
Create an array with predefined values.
1 const fruits = ["apple", "banana",
"cherry"];
Create an array of a specific length and
fill it with a default value.
thedevspace.io
TheDevSpace | Full-Stack Web Development Course
1 const numbers = new Array(3).fill(0); "#
[0, 0, 0]
Adding & Removing
Elements
Add an element to the end of the array.
1 fruits.push("orange"); "# ["apple",
"banana", "cherry", "orange"]
Remove the last element from the array.
1 fruits.pop(); "# ["apple", "banana",
"cherry"]
Add an element to the beginning of the
array.
1 fruits.unshift("mango"); "# ["mango",
"apple", "banana", "cherry"]
Remove the first element from the array.
thedevspace.io
TheDevSpace | Full-Stack Web Development Course
1 fruits.shift(); "# ["apple", "banana",
"cherry"]
Finding & Checking
Elements
Check if an array includes a specific
value.
1 fruits.includes("banana"); "# true
Find the index of an element.
1 fruits.indexOf("cherry"); "# 2
Find the first element that matches a
condition.
1 fruits.find((fruit) "$
fruit.startsWith("a")); "# "apple"
Check if at least one element matches a
condition.
thedevspace.io
TheDevSpace | Full-Stack Web Development Course
1 fruits.some((fruit) "$ fruit.length >
5); "# true
Check if all elements match a condition.
1 fruits.every((fruit) "$ typeof fruit ""%
"string"); "# true
Looping Through Arrays
Loop through an array and execute a
function for each item.
1 fruits.forEach((fruit) "$
console.log(fruit));
Create a new array by transforming each
item.
1 const uppercaseFruits =
fruits.map((fruit) "$
fruit.toUpperCase());
2 "# ["APPLE", "BANANA", "CHERRY"]
thedevspace.io
TheDevSpace | Full-Stack Web Development Course
Filtering &
Transforming
Filter elements based on a condition.
1 const filtered = fruits.filter((fruit)
"$ fruit.startsWith("b"));
2 "# ["banana"]
Reduce an array to a single value.
1 const totalChars = fruits.reduce((sum,
fruit) "$ sum + fruit.length, 0);
2 "# Sum of all character lengths
Sorting & Reversing
Sort an array alphabetically.
1 const sorted = fruits.sort(); "#
["apple", "banana", "cherry"]
Reverse the order of an array.
thedevspace.io
TheDevSpace | Full-Stack Web Development Course
1 const reversed = fruits.reverse(); "#
["cherry", "banana", "apple"]
Splicing & Slicing
Remove elements or replace them with new
ones.
1 fruits.splice(1, 1, "grape"); "# Removes
"banana" and adds "grape"
Extract a portion of an array.
1 const sliced = fruits.slice(1, 3); "#
Extracts elements from index 1 to 2
Spread & Rest
Create a new array by copying and adding an
element.
thedevspace.io
TheDevSpace | Full-Stack Web Development Course
1 const newArr = [""&fruits, "kiwi"];
Destructure an array into variables.
1 const [first, ""&rest] = fruits;
2 "# first = "apple", rest = ["banana",
"cherry"]
Converting to & from
Strings
Convert an array to a string.
1 const str = fruits.join(", "); "#
"apple, banana, cherry"
Convert a string into an array.
1 const arr = str.split(", "); "#
["apple", "banana", "cherry"]
thedevspace.io
TheDevSpace | Full-Stack Web Development Course
⚡ Removing Duplicates
Create a unique array from duplicates.
1 const unique = [""&new Set(["a", "b",
"a", "c", "b"])];
2 "# ["a", "b", "c"]
thedevspace.io
