Most used JavaScript methods I use in my day to day job

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

Array.map

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()) // [1668953376865, 1666188576865, 1663682856865]

As a side note, the returned value of the map operation is a new array with the transformation provided by you.

Array.filter

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 ) // [23, 33]

Array.reduce

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];

// 0 + 10 + 22 + 3 + 4
const initialValue = 0;
const sum = array.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
); // 39

Array.includes

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) // true

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.

String.split

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(' '); //  ["The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog."]

Array.join

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(' '); //  "The quick brown fox jumps over the lazy dog."

Array.splice

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) // ["March"]
console.log(months) // ["Jan", "April", "June"]

Array.slice

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) // ["elephant"]

Array.sort

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); // [3, 4, 10, 22]

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); // [10, 3, 4, 22]

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!!

Comments

[Leandro RR]

despite all methods mentioned above i've been taking a look at Intl.
like you can get a array of itens like this:

const brothers = ['christine', 'josh', 'jhon'];
const stringOfBrothers = brothers.join(', ').replace(/\,(?=[^,]*$)/, ' and'); 
console.log(stringOfBrothers);
// Output: "christine, josh and jhon"

but with the Intl.ListFormat() you can achieve the same thing above without workarounds or regex and plus, you can do it for every language (eg: japanese, portuguese and etc):

const brothers = ['christine', 'josh', 'jhon'];
const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
const stringOfBrothers = formatter.format(brothers);

console.log(stringOfBrothers);
// Output: "christine, josh and jhon"

looks more code? yeah but seems more readable to me and you have more features.

source: developer.mozilla.org/pt-BR/docs/W...