Introduction:
Navigating through JavaScript array methods can be a daunting task for beginners. This comprehensive guide provides a cheat sheet of the 20 most common use cases for JavaScript arrays. Say goodbye to confusion and welcome clarity with this array methods meme challenge!
Immutability Notice:
Before delving into the array methods, it’s crucial to understand immutability. All functions discussed here maintain immutability, ensuring that the original array remains unchanged. Be cautious when dealing with mutable data types within arrays, distinguishing between shallowly and deeply immutable arrays.
Array Use Cases:
Add Element to Start of Array:
To prepend an item to the beginning of an array, use array spreading:
const arr = [1, 2, 3];
const result = [0, ...arr];
Add Element to End of Array:
To append an item to the end of an array, use array spreading:
const arr = [1, 2, 3];
const result = [...arr, 4];
Remove an Element From Start of Array:
To remove the first item in an array, use the slice method:
const arr = [1, 2, 3];
const result = arr.slice(1);
Remove an Element From End of Array:
To remove the last item in an array, use the slice method:
const arr = [1, 2, 3];
const result = arr.slice(0, -1);
Insert Element at Index in Array:
To add an item at a specific index of an array, use the toSpliced method:
const arr = [1, 2, 3];
const result = arr.toSpliced(1, 0, "one point five");
Replace an Element at Index in Array:
To replace an item at some index in an array, use toSpliced or with method:
const arr = [1, 2, 3];
const result1 = arr.toSpliced(1, 1, "two");
const result2 = arr.with(1, "two");
Remove an Element at Index in Array:
To remove an item from an array, use the toSpliced method:
const arr = [1, 2, 3];
const result = arr.toSpliced(1, 1);
Remove an Element By Value From an Array:
To remove a specific value from an array, use the filter method:
const arr = [1, 2, 3];
const result = arr.filter((element) => element !== 2);
Remove Objects By Property From an Array:
To remove an object with a specific attribute from an array, use the filter method:
const arr = [{ num: 1 }, { num: 2 }, { num: 3 }];
const result = arr.filter((obj) => obj.num !== 2);
Check if Array Includes an Element:
To check if an array contains a value, use the includes method:
const arr = [1, 2, 3];
const result = arr.includes(2);
Check if Array Includes Object with Property:
To check if an array contains an object with a property, use the some method:
const arr = [{ num: 1 }, { num: 2 }, { num: 3 }];
const result = arr.some((obj) => obj.num === 2);
Check if All Objects in an Array has a Property:
To check if every object in an array has a property, use the every method:
const arr1 = [{ num: 1 }, { num: 2 }, { num: 3 }];
const result1 = arr1.every((obj) => obj.num === 2);
const arr2 = [{ num: 2 }, { num: 2 }, { num: 2 }];
const result2 = arr2.every((obj) => obj.num === 2);
Convert Array to an Object:
To convert an array to a custom object, use the reduce method:
const arr1 = [1, 2, 3];
const result1 = arr1.reduce((acc, cur, index) => {
acc[`attr${index}`] = cur;
return acc;
}, {});
Convert Array of Objects to an Object:
To convert an array of objects to an object, use Object.assign and array spread syntax:
const arr = [{ attr1: 1 }, { attr2: 2 }, { attr3: 3 }];
const result = Object.assign({}, ...arr);
Convert Object to an Array:
To create an array from an object, use Object.keys, Object.values, or Object.entries:
const obj = { a: 1, b: 2, c: 3 };
const result1 = Object.keys(obj);
const result2 = Object.values(obj);
const result3 = Object.entries(obj).map(([key, value]) => ({ key, value }));
In some cases, chaining map and filter methods can modify and filter out values.
Combine Two Arrays:
To combine two arrays, use the concat method or the spread syntax:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray1 = arr1.concat(arr2);
const combinedArray2 = [...arr1, ...arr2];
Sort an Array:
If you want to sort an array by value, use the toSorted method. It is stable and not in-place:
let arr1 = ["b", "c", "a"];
const result1 = arr1.toSorted();
const arr2 = [10, 1, 5];
const result2 = arr2.toSorted();
const arr3 = [10, 1, 5];
const result3 = arr3.toSorted((a, b) => a - b);
Sort an Array of Objects:
To sort an array of objects by value, use toSorted method with a comparator function:
const arr = [{ num: 3 }, { num: 1 }, { num: 2 }];
const byNumberAttribute = (objA, objB) => objA.num