JavaScript has become one of the most widespread programming languages in use today, and rightfully so. Because of it’s near ubiquitousness in web applications, it has afforded the close-eye of a vast majority of the programming community.

As we all know, programmers have F.O.D. (Fear of D.R.Y. (Don’t Repeat Yourself), but do treat yourself to a nested acronym), so the community has worked its incredible magic of logical decision making in the interest of efficiency and precision and turned JavaScript into a labyrinth of shortcuts to make the language more accessible and powerful. Once these shortcuts are understood, the true power of JavaScript syntax can be unlocked and wielded, making you the programmer you were always meant to be. Sort of like the first Kung Fu Panda.

One of the most important syntactical tools every JavaScript programmer needs to have holstered is the Arrow Function. At first glance, Arrow Function syntax looks like another of many ways to just clean up JavaScript code, and that’s not wrong. However, this syntax also comes equipped with built-in functionality that makes it not only easier to read and understand, but also more efficient and easier to implement.

Clean up may not be a first order priority when building a new application, but understanding and harnessing these shortcuts early on can save a lot of time and headaches when combing back through and looking for bugs in initial drafts of an application.

“this” Keyword

From what I understand, the this keyword has been the source of many JavaScriptor’s nightmares for many years past. When defining and calling regular functions in JavaScript, this would bind itself to the window, the function, etc., unexpectedly, and there was no way to explicitly control this behavior in many cases, and in other cases, this would have to be explicitly bound to the context for which it was to be called.

Arrow functions quash this JavaScript behavior in that this is not automatically bound to the function. That means that this will behave the same regardless of the context of being called within the arrow function, so the behavior becomes predictable. Hooray!!

“arguments” Object

When implementing Regular Function syntax, an “arguments” object is available within the context of the function itself:

The “arguments” object is defined for us with an index of keys beginning at 0, pointing to the arguments passed in the function call in the order they were passed.

However, in our arrow function, this object is not automatically assigned:

The arguments object is still attached to the arguments passed in the parent function, dragonWarrior().

In order to bypass this, we must employ the rest parameters feature to our arrow function, at which point our arguments object will be assigned to the arguments passed in our arrow function:

#javascript #web-development #programming #developer