We’ve all done it — but the question is, are you still coding it?

JavaScript is easy — especially if you’ve already got programming knowledge and experience through another language. Many newbies and veteran developers encounter JavaScript out of necessity. A good portion of the Internet runs on some form of JavaScript. The frontend has its frameworks and libraries such as Angular, React, and Vue. Backend is dominated by node.js, Next.js, Express, Gatsby, and Meteor.

Whatever the case, JavaScript is here to stay.

By design, JavaScript is easy to pick up and just work. There’s no main() class to set up, no special functions required to run - just the right file extension and we're good to go. Libraries and frameworks exist to make our coding lives easier by encapsulating patterns, good architectural practices, and streamline modes of thought for code scalability and cohesiveness.

But there are little things that we do to sabotage our code. Most of the time, we don’t even notice it. Here are four common bad JavaScript practices that exist in every repository in some form — if not in the past, then in the present git commit.

Normal function vs Arrow function

We all know what a normal function looks like. We also know what an arrow function looks like. But many of us don’t know what’s the actual functionality and differences are between a normal function and an arrow function.

While a normal function and arrow function appear to be doing the same thing, the major impact it has on your code is how argument binding works.

Arrow functions don’t have arguments binding.

For example:

let normalFunc = {
   showMeTheMoney(){
     console.log(arguments)
   }
 }
 ​
 let arrowFunc = {
   showMeTheMoney : () => console.log(arguments)
 }
 ​
 normalFunc.showMeTheMoney(10)
 arrowFunc.showMeTheMoney(10)

normalFunc.showMeTheMoney(10) will return:

[object Arguments] {
   0: 10
 }

Meanwhile, arrowFunc.showMeTheMoney(10) will return:

error ReferenceError: arguments is not defined

Another feature difference between normal and arrow function is how new keyword works.