Improve your JS skills with those tips #1
Tags: javascript, typescript, node, webdev
Published: 2021-03-13 00:28:16

In this article I will share with you some tips about JS that can improve your skills in JS !

## Includes method to avoid multiples checking

You can easily replace this 

```javascript
if (value === 'a' || value === 'b' || value === 'c') { ... }
``` 
By

```javascript
if (['a', 'b', 'c'].includes(value)) { ... }
``` 

More cleaner and you avoid to have too much condition in your `if`

## Double `!` operator to convert any variable into boolean

The `!` (NOT) operator can be use two times `!!` in order to convert any variable into boolean (like Boolean function), very convenient when you need to check some value before handle it.

```javascript
const toto = null

!!toto // false
Boolean(toto) // false

if (!!toto) { } // toto is not null or undefined
``` 

## Optional chaining

In `javascript` you will need to often check if some property of your object exist before handle it. So many dev use this :

```javascript
const toto = { a: { b: { c: 5 } } }

if (!!toto.a && !!toto.a.b && !!toto.a.b.c) { ... } // toto.a.b.c exist
```

You can use `optional chaining` in order to avoid to use a multiple checker like above.

```javascript
const toto = { a: { b: { c: 5 } } }

if (!!toto.a?.b?.c) { ... } // toto.a.b.c exist

// If the key doesn't exist, it will return undefined
const test = toto.a?.b?.c?.d // undefined
```

## Avoid Else when you return value in your if

I have seen this multiple time :

```javascript
if (...) { // the condition is not important in this example
  return 'toto'
} else {
  return 'tutu'
}
```

If your if return value you can just replace the code above by :

```javascript
if (...) { // the condition is not important in this example
  return 'toto'
}

return 'tutu'
```

If you need to use else if you can but you NEED to return a value for each else if!

## Avoid ForEach, use more Filter, Map, Reduce, Every & Some function

My best advice from this article, as beginner we use a lot of the forEach function, but JS offers you a lot of alternative, and moreover theses function are FP (functional programming).

What are theses function ? I will explain you when use it !

### Filter

As named, it allow us to filter some value in your array depending on your condition 

```javascript
const toto = [1, 2, 3, 4]

const evenValue = toto.filter(currentValue => {
   return currentValue % 2 == 0 // remove all value that return false with this condition
}) // [2, 4]
```

### Map

Use map when you need to transform all items in your item into another item, for exemple if you want to transform all of your number and multiply them by 2

```javascript
const toto = [1, 2, 3, 4]

const valueMultiplied = toto.map(currentValue => {
   return currentValue * 2 // remove all value that return false with this condition
}) // [2, 4, 6, 8]
```

### Reduce

The most difficult to understand, unliked other function, reduce has another thing, the `accumulator`, wtf is this and when use it ?

A good rules to know if you need to use `reduce` : 

`Do you need to get a single value from your array ?`

For exemple if I want to sum all number in your array into one value, you will need `reduce` and the `accumulator` is the sum ! And as any value, you need to initialise it !

```javascript
const toto = [1, 2, 3, 4]

const sum = toto.reduce((accumulator, currentValue) => {
   return accumulator += currentValue // you always need to return the accumulator
}, 0) // 10
```

### Some & Every

One of my favorite, I don't use them everyday but I like it !

`some` will check all of your item and when one of the item `match your condition`, it will return `true`, else it will return `false`.

`every` will check all of your item and when one of the item `don't match your condition`, it will return `false`, else it will return `true`.

But when use it ?

For exemple if you need to be sure that all of your item match a condition !

```javascript
const toto = [ 2, 4 ]

if (toto.every(val => val % 2 === 0)) { } // You are sure that your array contains only even value

const falsyToto = [ 2, 4, 5 ]

falsyToto.every(val => val % 2 === 0) // return false since array contain a odd value !
```

You can use `some` in the contrary context, for exemple if you want to be sure that your array contain `at least` one odd value

```javascript
const toto = [ 2, 4, 5 ]

toto.some(val => val % 2 !== 0) // return true
```

---

I hope you like this reading!

🎁 You can get my new book `Underrated skills in javascript, make the difference` for FREE if you follow me on [Twitter](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!