DEV Community

Cover image for My most used javascript methods.
Martín Mato
Martín Mato

Posted on • Updated on

My most used javascript methods.

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] 
Enter fullscreen mode Exit fullscreen mode

.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] 
Enter fullscreen mode Exit fullscreen mode

.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
Enter fullscreen mode Exit fullscreen mode

.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
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (11)

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

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

Thanks. Just noticed and made the change.

Collapse
 
hiteshgupta9193 profile image
Hitesh Gupta

This is about Object.assign Example 2 -

const source1 = { "propA": 1 };
const source2 = { "propB": 2 };
const source3 = { "propC": 3 };
const target = Object.assign(source1, source2, source);

After execution of the above lines,
// target = { "propA": 1, "propB": 2, "propC": 3 };

also, it will update source1.
// source1 = { "propA": 1, "propB": 2, "propC": 3 };

if we don't want to update any of our existing sources, the correct way to write is
const target = Object.assign({}, source1, source2, source);

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
Martín Mato

Thanks!!

Collapse
 
iakashpatel profile image
Akash P.

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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.