My most used javascript methods.
Tags: javascript, beginners
Published: 2020-03-28 22:28:31

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](https://lodash.com/), 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](https://reactjs.org/), where we need to avoid unnecessary re-rendering of our app. 

## So, here are the methods.

[<code>.map()<code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 <code>for</code> 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.
```javascript
const numbers = [100, 200, 300];
const doubles = numbers.map(n => n * 2);

// doubles = [200, 400, 600] 
```

[<code>.filter()<code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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
```javascript
const numbers = [20, 200, 30, 45, 100, 102];
const result = numbers.filter(n => n <= 100);

// result = [20, 30, 45, 100] 
```

[<code>.some()<code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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.
```javascript
const ages = [20, 13, 12];
const areAdults = ages.some(n => n >= 18);

// areAdults = true
```

[<code>.every()<code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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.
```javascript
const ages = [20, 13, 18, 43];
const allAdults = ages.every(n => n >= 18);

// allAdults = false
```

[<code>Array.from()<code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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.
```javascript
const lastName = 'mato';
const lnArray = Array.from(lastName);

// lnArray = ['m','a','t','o']
```

[<code>Object.assign()<code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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
```javascript
const source = { "propA": 1 };
const copy = Object.assign({}, source);

// copy = { "propA": 1 };
```
**Example 2**
Multiple sources with different properties
```javascript
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
```javascript
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 };
```

[<code>String.split()<code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split)
It separates a certain string into multiple substrings using a specified separator. 

**Example**
Separate string by commas. 
```javascript
const str = 'text1,text2,text3';
const splitted = str.split(",");

// splitted = ['text1', 'text2', 'text3']
```

[<code>String.slice()<code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice)
It extracts a section of a string, delimited by two indexes, and returns a new one. 

**Example**
```javascript
const str = 'alpha,beta,gamma';
const sliced = str.slice(6, 10);

// sliced = 'beta'
```

[<code>String.indexOf()<code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)
It finds and return the index of the first occurrence of an string.

**Example**
```javascript
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!