JavaScript Arrays Cheat Sheet
Arrays are one of the most important concepts in JavaScript. They help you store multiple values in a single variable and work with data more easily. In this article, you will learn JavaScript arrays in a simple way with separate sections, method examples, and easy explanations.
Highlight
JavaScript arrays make it easy to store, manage, search, and transform multiple values in one place.
1. Why Arrays Matter
What is an Array?
An array is a special variable in JavaScript that can store multiple values in one place.
Why use Arrays?
Instead of creating many variables, you can keep related values together inside one array.
let fruits = ["Apple", "Banana", "Mango"];
In this example, fruits is an array that stores three values together.
2. How to Create an Array
Using Square Brackets
let numbers = [10, 20, 30, 40];Using Array Constructor
let colors = new Array("Red", "Blue", "Green");Most developers prefer square brackets because they are shorter and easier to read.
3. How to Access Array Elements
Array elements are accessed by their index number. Index starts from 0.
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // MangoIndex 0
First element
Index 1
Second element
Index 2
Third element
4. Array Length
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits.length); // 3
The length property tells you how many elements are inside the array.
5. Add Items to an Array
push()
Adds one or more elements to the end of an array.
let fruits = ["Apple", "Banana"];
fruits.push("Mango");
console.log(fruits); // ["Apple", "Banana", "Mango"]unshift()
Adds one or more elements to the beginning of an array.
let fruits = ["Banana", "Mango"];
fruits.unshift("Apple");
console.log(fruits); // ["Apple", "Banana", "Mango"]6. Remove Items from an Array
pop()
Removes the last element from an array.
let fruits = ["Apple", "Banana", "Mango"];
fruits.pop();
console.log(fruits); // ["Apple", "Banana"]shift()
Removes the first element from an array.
let fruits = ["Apple", "Banana", "Mango"];
fruits.shift();
console.log(fruits); // ["Banana", "Mango"]7. Update Array Elements
You can change an array value by using its index.
let fruits = ["Apple", "Banana", "Mango"];
fruits[1] = "Orange";
console.log(fruits); // ["Apple", "Orange", "Mango"]8. Loop Through an Array
for Loop
let fruits = ["Apple", "Banana", "Mango"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}forEach()
let fruits = ["Apple", "Banana", "Mango"];
fruits.forEach((fruit) => {
console.log(fruit);
});9. Search in an Array
includes()
Checks whether a value exists in the array.
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits.includes("Banana")); // trueindexOf()
Returns the index of a value. If not found, it returns -1.
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits.indexOf("Mango")); // 210. Convert Array to String
join()
Joins all elements into a string using a separator.
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits.join(", ")); // Apple, Banana, MangotoString()
Converts the array into a comma-separated string.
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits.toString()); // Apple,Banana,Mango11. slice() and splice()
slice()
Returns a part of an array without changing the original array.
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log(fruits.slice(1, 3)); // ["Banana", "Mango"]splice()
Adds, removes, or replaces elements in the original array.
let fruits = ["Apple", "Banana", "Mango"];
fruits.splice(1, 1, "Orange");
console.log(fruits); // ["Apple", "Orange", "Mango"]12. Important Array Methods for Transformation
map()
Creates a new array by changing each element.
let numbers = [1, 2, 3];
let doubled = numbers.map((num) => num * 2);
console.log(doubled); // [2, 4, 6]filter()
Creates a new array with only those elements that match a condition.
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // [2, 4]reduce()
Reduces the array to a single value.
let numbers = [1, 2, 3, 4];
let total = numbers.reduce((sum, num) => sum + num, 0);
console.log(total); // 1013. find(), some(), and every()
find()
Returns the first element that matches a condition.
let numbers = [5, 10, 15];
let result = numbers.find((num) => num > 8);
console.log(result); // 10some()
Checks if at least one element matches a condition.
let numbers = [1, 3, 5];
console.log(numbers.some((num) => num % 2 === 0)); // falseevery()
Checks if all elements match a condition.
let numbers = [2, 4, 6];
console.log(numbers.every((num) => num % 2 === 0)); // true14. sort() and reverse()
sort()
Sorts the array. For numbers, use a compare function.
let numbers = [40, 10, 30, 20];
numbers.sort((a, b) => a - b);
console.log(numbers); // [10, 20, 30, 40]reverse()
Reverses the order of elements in the array.
let fruits = ["Apple", "Banana", "Mango"];
fruits.reverse();
console.log(fruits); // ["Mango", "Banana", "Apple"]15. Merge Arrays with concat()
The concat() method joins two or more arrays and returns a new array.
let arr1 = ["Apple", "Banana"];
let arr2 = ["Mango", "Orange"];
let result = arr1.concat(arr2);
console.log(result); // ["Apple", "Banana", "Mango", "Orange"]16. Array Destructuring
Destructuring allows you to take values from an array and store them in variables quickly.
let fruits = ["Apple", "Banana", "Mango"];
let [first, second, third] = fruits;
console.log(first); // Apple
console.log(second); // Banana
console.log(third); // Mango17. Spread Operator with Arrays
The spread operator ... is used to expand array elements.
let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]18. Quick Method Summary Table
| Method | Use | Result |
|---|---|---|
| push() | Add at end | Changes original array |
| pop() | Remove from end | Changes original array |
| shift() | Remove from start | Changes original array |
| unshift() | Add at start | Changes original array |
| map() | Transform elements | Returns new array |
| filter() | Keep matching items | Returns new array |
| reduce() | Single final value | Returns one value |
| slice() | Copy part of array | Returns new array |
| splice() | Add/remove/replace | Changes original array |
19. Best Practices
Use map() when you want to transform values.
Use filter() when you want only matching values.
Use forEach() when you just want to run code for each item.
Use slice() when you want a copy without changing the original array.
20. Conclusion
JavaScript arrays are powerful and flexible. They allow you to store multiple values, loop through items, add or remove data, search values, and transform data easily.
If you understand arrays well, many JavaScript topics will become much easier. That is why arrays are a must-learn concept for every beginner and interview candidate.
Quick Summary
Array stores multiple values in one variable.
push() and unshift() add values.
pop() and shift() remove values.
map(), filter(), and reduce() are very important.