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] 

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

Comments

[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 😀

[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.

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

[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.

[Martín Mato]

Thanks. Just noticed and made the change.

[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);

[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.

[Martín Mato]

Thanks!!

[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.