loading...
Cover image for My most used javascript methods.

My most used javascript methods.

otamnitram profile image Martín Mato Updated on ・3 min read

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!

Discussion

pic
Editor guide
Collapse
karataev profile image
Eugene Karataev

They really helpful methods indeed. But I'd not throw away libraries like lodash completely, because they have a lot of useful functions.
Btw, the post's cover image with old-style jQuery carousel code is not in sync with the post content - React's mentions and relatively new es2015 Object.assign, .some, .every methods 😀

Collapse
otamnitram profile image
Martín Mato Author

Yes, you are right. I didn't take the time to select the right cover image; I will choose another later.
Regarding Lodash, in my opinion, since nowadays we have ES6 and Babel to compile ES6 in ES5, I think that most of the time, there is no need to sacrifice speed and add complexity using Lodash when you can use pure ES6 functions. But, again, it is just an opinion. Lodash is still very popular and useful in a lot of cases.

Collapse
aabbccsmith profile image
alistair smith

Fantastic article, Martín, and I would have to agree with you on ES6 versus Lodash, especially since the new integrations would be faster (being native). Babel is a life saver!!

Collapse
appurist profile image
Paul / Appurist

Psst. The third example, the .some example, is likely to confuse a few folks due to the <= 18 that should read >= 18 (like the .every example).

That one typo aside, this is a great list and if I did such an article, my list would probably match this.

Collapse
otamnitram profile image
Martín Mato Author

Thanks. Just noticed and made the change.

Collapse
harper0478 profile image
harper0478

Great Article! I m a beginner and though it's necessary to know many things in JavaScript, very nice to know what you should get use to using right away. thanks for the article.

Collapse
otamnitram profile image
Collapse
iakashpatel profile image
Akash Patel

that's awesome, as JS developer, what you mentioned is relative for me as well. I am also using the same methods as every day. great sharing. thanks, Martin.

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
rajnishkatharotiya profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
Rajnish Katharotiya

Very informative post on most used JS Methods, I have also started a series for the similar to this.
Check snippet for how to validate every record of the collection with a unique case on youtu.be/p5JW6YIh5yo

"" Thanks for watching, if you found it informative - please subscribe the channel to support me. ""