DEV Community

Improve your JS skills with those tips #1

Code Oz on March 13, 2021

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

Read full post

Rohit Gupta • Mar 13 '21

Very Nice

Some of the features are from ES6 and later
For some older browsers, use indexOf in place of includes:

if (['a', 'b', 'c'].indexOf(value) > -1) { ... }

While I encourage developing for clients that have no problems to adapt only mainstream browsers like chrome. firefox, you can persuade them to avoid using deprecated browser support for better code readability.

Ovienadu Ken • Mar 15 '21

Yea, we should take advantage of the newer syntax and utilize tools like babel to transpile for older browsers.

Code Oz • Mar 13 '21

Nice thank you Rohit!

Whaison • Mar 17 '21 • Edited

Nice Article

Btw, you don't have to use the double not (!!) operator in a condition. It is enough to just write

if (value) { 
  ...
}

because an if statement checks the truthyness (or the falsyness) of the value.

falsy values are:

false
0 (zero)
"" (empty string)
null
undefined
NaN

Everything else will be treated as truthy.
The same rules apply to Boolean(value) and !!value.

This also works inside other boolean expressions so you can write for example:

let item = response.body && response.body.item || 'default'

-> If the body of the response is truthy and the item field is truthy: assign item = response.body.item. If either of them is falsy assign item = 'default'.

NOTE: in JavaScript the && and || operators work differently than in other languages

left && right === left  // if left is falsy
left && right === right // if left is truthy

left || right === right // if left is falsy
left || right === left  // if left is truthy

Code Oz • Mar 18 '21

Nice to know this! Thank you for sharing this it's very interesting Whaison

Julia 👩🏻‍💻 GDE • May 28 '22

Amazing article on how to make your code look more professional. Thanks for sharing these great tips!

Jason Litowitz • Mar 13 '21

You suggested avoiding forEach, but provided no reason not to. Can you please explain why not? It accepts a function for its input parameter, just like all the other functional programming examples you provided. Is it, for example, slower than a loop? Is it more of a memory hog than map?

epresas • Mar 13 '21 • Edited

HI, I wouldn't avoid forEach in favor of map, each method basically does the same thing: given an array of elements, execute a callback function on each of the elements, the main difference for me is that while forEach mutates the original array, map instead returns a new array of the same size with the result of the callback on each element of the original array, which is something to consider if you might need the original data later on your code.

If you want to "do something" with the data (logging it, storing it), you may use forEach without problems, but if you want to modify the data (the famous "double the number" example we see everywhere, or parse the data from an array of objects in any way), map is your best friend, because it will return a new array with the result of your operations.

I'm not 100% sure, but I think map is faster than forEach, and another cool feature is method chaining; with map you can do something like myArr.map().filter().reduce() // and so on.

Is just a matter of what are you trying to accomplish.

I hope this was helpful! Take care!

Code Oz • Mar 13 '21

Thanks dude it the explication that my article miss about foreach!

You don't need need for each in order to change item in the current array.

It not respect fp (function al programming) if you use for each since you are currently mutating the array that are being iterated!

Moreover foreach function return nothing

Nico Zerpa (he/him) • Mar 16 '21

I think he's trying to say that beginners use forEach in situations in which other methods such as map, reduce, etc. are more appropriate.

I don't really think you should avoid forEach completely. But it is a good idea to see if you can use any of the other of the FP methods first.

Sergey Khomushin • Mar 13 '21

It's a strange article for me.
TLDR; how to improve your JS skill? Use JS functionality! Okay...

IMO. You can take a higher level and, for example, explain why such code (@epresas ) is not very efficient in terms of performance.
myArr.map().filter().reduce() // and so on.

Manohar Reddy Poreddy • Sep 25 '21

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'

should it be below ?

return (...) ? 'toto': 'tutu' ;

Code Oz • Sep 25 '21

hey thanks for your comment, yes it's working in case of you only need to return something! If you add more logic in the if or after you cannot use ternary (unlike you create function).

The other point is about else if! If you need to have else if is more complicated!

Code Oz • Sep 25 '21

hey thanks for your comment, yes it's working in case of you only need to return something! If you add more logic in the if or after you cannot use ternary (unlike you create function).

The other point is about else if! If you need to have else if is more complicated!

ThanhTanPM2000 • Mar 13 '21

thanks you so much

Daniel Atwood • Mar 15 '21

I think using a switch is better than Array.includes. Includes is very very slow. ~95% slower than using a normal if or switch statement.

Ambareesh "Amby" Balaji • Mar 16 '21

Equally fast on Chrome 89: jsben.ch/O1q01
Modern browsers are clever.

Angelica Maria • Mar 19 '21

Thank you so much!

amandaolsen • Sep 30 '21

Why use the Double !! when you could use the Boolean function?

qq449245884 • Oct 1 '21

Dear CodeOz，may I translate your all dev articles into Chinese?I would like to share it with more developers in China. I will give the original author and original source.