Improve your JS skills with those tips #1

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

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

By

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.

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 :

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.

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 :

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 :

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

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

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 !

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 !

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

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 and MP me 😁

Or get it HERE

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

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

And you can mark 🔖 this article!