My most used javascript methods.
Martín Mato
Posted on March 28, 2020
Being my first post, I want to share something handy but useful, especially if you are in the first steps with Javascript.
I read a lot of posts and articles regarding Javascript methods. I selected those most used for me.
The main idea of using these methods is to avoid the need to use libraries like Lodash, which makes worse the speed of our app and adds, sometimes, extra complexity to the code composition.
Also, it is a good thing to mention that none of these methods mutate the data; this is especially important in React, where we need to avoid unnecessary re-rendering of our app.
So, here are the methods.
.map()
It returns a new array with the result of a function for each element in another array. We can think this is a method like a for
but easier to implement. The array returned has the same length as the original array.
Example
An array that contains the double of each item of another array.
const numbers = [100, 200, 300];
const doubles = numbers.map(n => n * 2);
// doubles = [200, 400, 600]
.filter()
It returns an array with all the elements of another array that meet a determined condition.
Example
Return numbers less than or equal to 100
const numbers = [20, 200, 30, 45, 100, 102];
const result = numbers.filter(n => n <= 100);
// result = [20, 30, 45, 100]
.some()
It returns a bool if at least one element in an array meets a determined condition.
Example
Return true if there is an adult age in the array.
const ages = [20, 13, 12];
const areAdults = ages.some(n => n >= 18);
// areAdults = true
.every()
It returns a bool if all of the elements in an array meets a determined condition.
Example
Return true if all the ages in the array are adult.
const ages = [20, 13, 18, 43];
const allAdults = ages.every(n => n >= 18);
// allAdults = false
Array.from()
It returns an array created from any object with length or an iterable object like a string.
Example
Return an array with each letter of my last name.
const lastName = 'mato';
const lnArray = Array.from(lastName);
// lnArray = ['m','a','t','o']
Object.assign()
It copies one or more source objects to a target object. It replaces all the properties on the target object with the ones in the source objects.
Example 1
Clone an object
const source = { "propA": 1 };
const copy = Object.assign({}, source);
// copy = { "propA": 1 };
Example 2
Multiple sources with different properties
const source1 = { "propA": 1 };
const source2 = { "propB": 2 };
const source3 = { "propC": 3 };
const target = Object.assign(source1, source2, source3);
// target = { "propA": 1, "propB": 2, "propC": 3 };
Example 3
Multiple sources with same properties
const source1 = { "propA": 1, "propB": 2};
const source2 = { "propB": 2 };
const source3 = { "propC": 3 };
const target = Object.assign(source1, source2, source3);
// target = { "propA": 1, "propB": 2, "propC": 3 };
String.split()
It separates a certain string into multiple substrings using a specified separator.
Example
Separate string by commas.
const str = 'text1,text2,text3';
const splitted = str.split(",");
// splitted = ['text1', 'text2', 'text3']
String.slice()
It extracts a section of a string, delimited by two indexes, and returns a new one.
Example
const str = 'alpha,beta,gamma';
const sliced = str.slice(6, 10);
// sliced = 'beta'
String.indexOf()
It finds and return the index of the first occurrence of an string.
Example
const str = 'There is a snake in my boot';
const index = str.indexOf('snake');
// index = 11
Conclution
I hope this was helpful, especially for those who are javascript beginners.
As this is my first post, and I have the intention to write more, please feel free to leave your comments and let me know what I can improve. Also, let me know which are your favorite or most used Javascript methods.
Thanks for reading!
Posted on March 28, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024