Let's understand javascript array functions and how to use them.
Array.map()
Returns a new array with the results of calling a provided function on every element in this array.
const list = [π«, π«, π«, π«];
list.map((βͺοΈ) => π); // [π, π, π, π]
// Code
const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]
Array.filter()
Returns a new array with all elements that pass the test implemented by the provided function.
const list = [π, π«, π, π«];
list.filter((βͺοΈ) => βͺοΈ === π); // [π, π]
// Code
const list = [1, 2, 3, 4];
list.filter((el) => el % 2 === 0); // [2, 4]
Array.reduce()
Reduce the array to a single value. The value returned by the function is stored in an accumulator (result/total).
const list = [π, π«, π, π«, π€ͺ];
list.reduce((β¬οΈ, βͺοΈ) => β¬οΈ + βͺοΈ); // π + π« + π + π« + π€ͺ
// OR
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15
Array.reduceRight()
Executes a reducer function (that you provide) on each element of the array resulting in a single output value(from right to left).
const list = [π, π«, π, π«, π€ͺ];
list.reduceRight((β¬οΈ, βͺοΈ) => β¬οΈ + βͺοΈ); // π€ͺ + π« + π + π« + π
// Code
const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15
Array.fill()
Fill the elements in an array with a static value.
const list = [π, π«, π, π«, π€ͺ];
list.fill(π); // [π, π, π, π, π]
// Code
const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]
Array.find()
Returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.
const list = [π, π«, π, π«, π€ͺ];
list.find((βͺοΈ) => βͺοΈ === π); // π
list.find((βͺοΈ) => βͺοΈ === π); // undefined
// Code
const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined
Array.indexOf()
Returns the first index at which a given element can be found in the array, or -1 if it is not present.
const list = [π, π«, π, π«, π€ͺ];
list.indexOf(π); // 0
list.indexOf(π‘); // -1
// Code
const list = [1, 2, 3, 4, 5];
list.indexOf(3); // 2
list.indexOf(6); // -1
Array.lastIndexOf()
Returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.
const list = [π, π«, π, π«, π€ͺ];
list.lastIndexOf(π); // 3
list.lastIndexOf(π, 1); // 0
// Code
const list = [1, 2, 3, 4, 5];
list.lastIndexOf(3); // 2
list.lastIndexOf(3, 1); // -1
Array.findIndex()
Returns the index of the first element in the array that satisfies the provided testing function. Otherwise -1 is returned.
const list = [π, π«, π, π«, π€ͺ];
list.findIndex((βͺοΈ) => βͺοΈ === π); // 0
// You might be thinking how it's different from `indexOf` π€
const array = [5, 12, 8, 130, 44];
array.findIndex((element) => element > 13); // 3
// OR
const array = [{
id: π
}, {
id: π«
}, {
id: π€ͺ
}];
array.findIndex((element) => element.id === π€ͺ); // 2
Array.includes()
Returns true if the given element is present in the array.
const list = [π, π«, π, π«, π€ͺ];
list.includes(π); // true
// Code
const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // false
Array.pop()
Removes the last element from an array and returns that element.
const list = [π, π«, π, π«, π€ͺ];
list.pop(); // π€ͺ
list; // [π, π«, π, π«]
// Code
const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]
Array.push()
Appends new elements to the end of an array, and returns the new length.
const list = [π, π«, π, π«, π€ͺ];
list.push(π‘); // 5
list; // [π, π«, π, π«, π€ͺ, π‘]
// Code
const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]
Array.shift()
Removes the first element from an array and returns that element.
const list = [π, π«, π, π«, π€ͺ];
list.shift(); // π
list; // [π«, π, π«, π€ͺ]
// Code
const list = [1, 2, 3, 4, 5];
list.shift(); // 1
list; // [2, 3, 4, 5]
Array.unshift()
Adds new elements to the beginning of an array, and returns the new length.
const list = [π, π«, π, π«, π€ͺ];
list.unshift(π‘); // 6
list; // [π‘, π, π«, π, π«, π€ͺ]
// Code
const list = [1, 2, 3, 4, 5];
list.unshift(0); // 6
list; // [0, 1, 2, 3, 4, 5]
Array.splice()
Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
const list = [π, π«, π, π«, π€ͺ];
list.splice(1, 2); // [π, π«]
list; // [π, π«, π€ͺ]
// Code
const list = [1, 2, 3, 4, 5];
list.splice(1, 2); // [2, 3]
list; // [1, 4, 5]
Array.slice()
Returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.
const list = [π, π«, π, π«, π€ͺ];
list.slice(1, 3); // [π«, π]
list; // [π, π«, π, π«, π€ͺ]
// Code
const list = [1, 2, 3, 4, 5];
list.slice(1, 3); // [2, 3]
list; // [1, 2, 3, 4, 5]
Array.join()
Joins all elements of an array into a string.
const list = [π, π«, π, π«, π€ͺ];
list.join('γ°οΈ'); // "πγ°οΈπ«γ°οΈπγ°οΈπ«γ°οΈπ€ͺ"
// Code
const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5"
Array.reverse()
Reverses the order of the elements in an array.
const list = [π, π«, π, π«, π€ͺ];
list.reverse(); // [π€ͺ, π«, π, π«, π]
list; // [π€ͺ, π«, π, π«, π]
// Code
const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]
Array.sort()
Sorts the elements of an array in place and returns the array. The default sort order is according to string Unicode code points.
const list = [π, π«, π, π«, π€ͺ];
list.sort(); // [π, π, π«, π«, π€ͺ]
// This make more sense π€
const array = ['D', 'B', 'A', 'C'];
array.sort(); // π ['A', 'B', 'C', 'D']
// OR
const array = [4, 1, 3, 2, 10];
array.sort(); // π§ [1, 10, 2, 3, 4]
array.sort((a, b) => a - b); // π [1, 2, 3, 4, 10]
Array.some()
Returns true if at least one element in the array passes the test implemented by the provided function.
const list = [π, π«, π, π«, π€ͺ];
list.some((βͺοΈ) => βͺοΈ === π); // true
list.some((βͺοΈ) => βͺοΈ === π‘); // false
// Code
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // false
Array.every()
Returns true if all elements in the array pass the test implemented by the provided function.
const list = [π, π«, π, π«, π€ͺ];
list.every((βͺοΈ) => βͺοΈ === π); // false
const list = [π, π, π, π, π];
list.every((βͺοΈ) => βͺοΈ === π); // true
// Code
const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // false
const list = [2, 4, 6, 8, 10];
list.every((el) => el%2 === 0); // true
Array.from()
Creates a new array from an array-like or iterable object.
const list = ππ«ππ«π€ͺ;
Array.from(list); // [π, π«, π, π«, π€ͺ]
const set = new Set(['π', 'π«', 'π', 'π«', 'π€ͺ']);
Array.from(set); // [π, π«, π€ͺ]
const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Array.of()
Creates a new array with a variable number of arguments, regardless of number or type of the arguments.
const list = Array.of(π, π«, π, π«, π€ͺ);
list; // [π, π«, π, π«, π€ͺ]
// Code
const list = Array.of(1, 2, 3, 4, 5);
list; // [1, 2, 3, 4, 5]
Array.isArray()
Returns true if the given value is an array.
Array.isArray([π, π«, π, π«, π€ͺ]); // true
Array.isArray(π€ͺ); // false
// Code
Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // false
Array.at()
Returns a value at the specified index.
const list = [π, π«, π, π«, π€ͺ];
list.at(1); // π«
// Return from last π€
list.at(-1); // π€ͺ
list.at(-2); // π«
// Code
const list = [1, 2, 3, 4, 5];
list.at(1); // 2
list.at(-1); // 5
list.at(-2); // 4
Array.copyWithin()
Copies array elements within the array. Returns the modified array.
const list = [π, π«, π, π«, π€ͺ];
list.copyWithin(1, 3); // [π, π, π€ͺ, π«, π€ͺ]
const list = [π, π«, π, π«, π€ͺ];
list.copyWithin(0, 3, 4); // [π«, π«, π, π«, π€ͺ]
// Code
const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]
NOTE: π€
- first argument is the target at which to start copying elements from.
- second argument is the index at which to start copying elements from.
- third argument is the index at which to stop copying elements from.
Array.flat()
Returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.
const list = [π, π«, [π, π«, π€ͺ]];
list.flat(Infinity); // [π, π«, π, π«, π€ͺ]
// Code
const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // [1, 2, 3, 4, 5, 6]
Array.flatMap()
Returns a new array formed by applying a given callback function to each element of the array,
const list = [π, π«, [π, π«, π€ͺ]];
list.flatMap((βͺοΈ) => [βͺοΈ, βͺοΈ + βͺοΈ ]); // [π, ππ, π«, π«π«, π, ππ, π«, π«π«, π€ͺ, π€ͺπ€ͺ]
// Code
const list = [1, 2, 3];
list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]
Must Read If you haven't
![devsmitra](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F830474%2F82f5210a-9bd9-4a31-b79e-d5f142992846.png)
React redux best practice to reduce code
Rahul Sharma γ» May 3 '22
#react
#redux
#javascript
#typescript
![devsmitra](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F830474%2F82f5210a-9bd9-4a31-b79e-d5f142992846.png)
How to cancel Javascript API request with AbortController
Rahul Sharma γ» Apr 9 '22
#javascript
#webdev
#frontend
#html
![devsmitra](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F830474%2F82f5210a-9bd9-4a31-b79e-d5f142992846.png)
13 Typescript Utility: A Cheat Sheet for Developer
Rahul Sharma γ» Apr 2 '22
#typescript
#javascript
#webdev
#frontend
![devsmitra](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F830474%2F82f5210a-9bd9-4a31-b79e-d5f142992846.png)
How to solve REST API routing problem with decorators?
Rahul Sharma γ» Mar 23 '22
#node
#typescript
#javascript
#express
Catch me on
Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon