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
Catch me on
Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon
Top comments (28)
Array flat example has a wrong result.
Applying
Array.flat()without any value will only flat a provided array up to one level. In the provided example you have an array with 2 nesting levels. Thus, the result should be[1, 2, 3, 4, [5, 6]].If you know the number of nesting arrays you can provide it (e.g.
list.flat(2)), otherwise you can use global propertyInfinitywith it (e.g.list.flat(Infinity)) which will flat all number of nesting arrays.Thus your example might be rewritten in the following way
My bad, Thank you so much for pointing it out.
As previously mentioned, these are not hacks. Might also be a good idea to give working code samples, instead of ones with emojis that give errors.
Thanks for the suggestion, Emojis will work if use as string 'π'.
But not as variable names
I've also add code snippets, hope that helps.
Cool article, but poorly named. These just aren't hacks.
Thanks for the suggestion
Nice article, the emoji's are bad for me, sorry.
Thanks, I've also add code snippets, hope that helps.
It is man, Good job ! (:
Love it!! Thanks for sharing
Good idea, adding emojis worked for me, it was also clear and simple. Thanks for posting.
Dear Rahul SharmaοΌmay I translate your all dev articles into Chinese?I would like to share it with more developers in China. I will give the original author and original source.
Sure, you can don't forget to add original author and original source.
Interesting. One can read the code with emojis very fast. Very good idea :)
At only one glance I got all the methods. It's really awesome π. Unique concept of explaining with emojis.
Helped me a lot, thanks for sharing π