Javascript array methods you must know

Image Source

Array is a data structure which can hold more than one value at a time. Most of the programming languages like C, C#, Java, Javascript etc, supports array data structure but the major difference of JS array is, unlike C or Java, it can hold different types of data at a same time. So we can say Arrays in JavaScript are heterogeneous.

Let’s dive into the methods.

Map

Array.map() used to iterate through an array elements. It returns a new array populated with result of provided method on each element of array. Array.map() does not mutate the array on which it is called.

Syntax:

array.map(callback(value, index, array), thisValue);
// Only value is required, rest of them are optional.
// We will use only value in our examples below.

Example:

let array = [1, 2, 3, 4, 5, 6];
let mapped_array = array.map(item => item * 2);
console.log(mapped_array);
// Output [2, 4, 6, 8, 10, 12]

💡 Notable thing, it will return the same length of array as original one.

Filter

Array.filter() used to filter an array based on certain criteria or condition. It returns only those elements who satisfy the condition & return true. Array.filter() also does not mutate the original array, on which it is called.

Syntax:

array.filter(callback(value, index, array), thisValue);

Example:

let array = [1, 2, 3, 4, 5, 6];
let filtered_array = array.filter(item => item > 3);
console.log(filtered_array);
// Output [4, 5, 6]

we can use filter to simply remove the null or undefined values from an array.

let array = [1, 2, null, 4, undefined, 6, null, undefined];
let filtered_array = array.filter(Boolean);
console.log(filtered_array);
// Output [1, 2, 4, 6]

💡 Notable thing, Methods like map() and filter() are about twice as fast as using forEach() and pushing to a new array to do the same thing. While, using forEach() for multi-step manipulation is about twice as fast as chaining methods like filter() and map().

Some

Array.some() used to check a condition against the array elements. It returns true if the condition gets satisfy, at least for one element of array. Otherwise, it returns false as a result. It returns response in Boolean.

Syntax:

array.some(callback(value, index, array), thisValue)

Example:

let array = [1, 2, 'Max', 4, 5, 'Paul', 7, 'John'];
let some_array = array.some(item => item == 'John');
console.log(some_array);
// Output true
let some_array = array.some(item => item == 'Jane');
console.log(some_array);
// Output false

Every

Array.every(), as implies by name itself, this method is used to check a condition on each element of an array. It returns true if and only if all the elements satisfy the condition which is applied. Otherwise, it will return false. It returns response in Boolean.

Syntax:

array.every(callback(value, index, array), thisValue);

Example:

let array = [1, 2, 3, 4, 5, 6, 7, 8];
let every_array = array.every(item => typeof item == 'number');
console.log(every_array);
// Output true
let array = [1, 2, 'Max', 4, 5, 'Paul', 7, 'John'];
let every_array = array.every(item => typeof item == 'string');
console.log(every_array);
// Output false

💡 Notable thing, every() method exits the operation when it get false as a response. Let say, if the condition gets failed at the 3rd index of array of length 10, every() method will exit the process at third index itself, it won’t iterate for next elements.

Flat

Array.flat() is used to flatten an array of arrays, basically Array.flat() concatenates sub array elements into a single array. It takes an argument as a number which tells about the specific depth of concatenation.

Syntax:

array.flat([depth]);                            // Depth is optional

Example:

let array = [1, 2, [3, 4], [[5, 6], 7], 8];
let flat_array = arr.flat();
console.log(flat_array);
// Output [1, 2, 3, 4, [5, 6], 7, 8]
let flat_array = array.flat(2);
console.log(flat_array);
// Output [1, 2, 3, 4, 5, 6, 7, 8]

💡 Notable thing, default depth for flat() method is 1.

Reduce

Array.reduce() method used to reduce an array elements by applying some operation on them. reduce() method always executes a reducer function which we provide as a parameter & respond with single value output.

Syntax:

array.reduce(callback(total, curValue, curIndex, array), initValue);
// Total & Current value are required here.

Example:

let array = [1, 2, 3, 4, 5];
let reducer = (accumulator, currentVal) => accumulator + currentVal;
let reduced_array = array.reduce(reducer);
console.log(reduced_array);
// Output 15

Summary

Javascript array comes with lot of great methods, which makes our life easier. Using javascript array methods can simplify our development problems with less efforts & can save our great amount of time. Also, it improves the performance of our code, in most of the cases. I’m not expecting that you guys have learn something new, but I am certain that, you have stir up these concepts.

Give some 👏 if you enjoyed the post.