Introduction
This article is mainly about me walking you through some of the common JavaScript methods which I use in my day to day job. Its not an exhaustive list but covers a lot of methods which should be known I feel. I am not planning to explain all the methods deeply but would provide a cursory look for each method. Relevant links are provided for each method so you can further explore them in your free time.
So, lets start
I use map normally when I would like to convert an array of items(number, boolean, string,...) to some different representation. Let's take an example to understand it more clearly.
Suppose, you have been given an array of dates in ISO format and you would like to compare the dates with each other. I feel the easiest way would be to convert the dates to a number and compare those numbers instead.
let dates=['2022-11-20T14:09:36.865Z', '2022-10-19T14:09:36.865Z', '2022-09-20T14:07:36.865Z']
dates.map((date)=> new Date(date).getTime())
As a side note, the returned value of the map operation is a new array with the transformation provided by you.
Let's check out now filter function. Personally, I feel filter function should have been renamed to filterOut😅. In the initial days of learning JavaScript, this was the only method which I had to look repeatedly online.
Anyways, filter will provide you a new array with items removed out of the array based on the condition you provide. A simple example would be
let numbers=[2, 23, 33, 4]
numbers.filter(number => number > 20 )
Personally, I am okay with with writing more code instead of using reduce to make my code look compact. Its a personal preference, but if it makes sense that reduce is THE way to go for any specific problem, I don't shy away from using that as well. Enough with the monologue, I guess. So, what does reduce help us accomplish. Basically, the simplest answer is that you give it an array of items and it would return you a single value. The value can be anything based on the logic you provide.
const array = [10, 22, 3, 4];
const initialValue = 0;
const sum = array.reduce(
(accumulator, currentValue) => accumulator + currentValue,
initialValue
);
Instead of using indexOf and checking the result with specific numbers. My personal favourite of checking whether a value is present in the array is to use includes instead. It will return you a Boolean value based on whether the value is present in the array.
const array = [1, 2, 3];
array.includes(2)
The only caveat is that it is case sensitive. So, "mohit" and "Mohit" are not the same value in the 👀 of includes. So, maybe convert all your strings to lowercase before using includes on them.
Now, suppose if you have a requirement to convert a string to an array and would like to do further processing on it using the array methods which we already discussed above, then split is your buddy here. You would need to give it a separator on the basis of which, its going to split the string into an array of strings.
const str = 'The quick brown fox jumps over the lazy dog.';
const words = str.split(' ');
join is the opposite of split . It will convert an array of strings to a new string with the separator which you provide.
const words=["The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog."]
words.join(' ');
If you would like to modify an existing array. Then splice is the method which you are searching for. It would help you to add or remove element/elements from the array in-place. It would return elements which were removed from the array
const months = ['Jan', 'March', 'April', 'June'];
const removedItem = months.splice(1, 1);
console.log(removedItem)
console.log(months)
Now, suppose you would like to have a copy (shallow) of a selected portion of the array or a new (shallow) copy of the whole array, then slice can be used for it.
const animals = ['ant', 'bison', 'elephant'];
animals.slice(2)
Now, suppose if you would like to arrange the items in an array in ascending or descending order, then we can use sort and provide the condition based on which the sorting will happen. The array will be sorted in-place.
const array = [10,3, 4, 22 ];
array.sort(( a, b)=> a-b);
A word of caution, always make sure that your comparator function can return +ve value or -ve value or 0 based on your requirements. Basically, in the above example, I could have used a different comparator function, which might seem logical at first, but the sorting will not work on them and there are some other gotchas. If any confusion, I would highly suggest you to check out mdn
const array = [10,3, 4, 22 ];
array.sort((a, b) => a > b ? 1 : 0);
As mentioned in the start of the article, these are just some of the most common methods which I use daily. There are a lot of other methods which you can further explore. To name a few,
- reverse
- some
- every
- fill
- find
- push
- pop
and the list goes on.
Happy Learning!!
