How to use destructuring and arrow functions to improve your JavaScript code

How to use destructuring and arrow functions to improve your JavaScript code

Without further ado, here are some everyday “tricks” to make your Javascript code much more readable.

Destructuring

Take this (intentionally) deeply nested object. Reading the age of a mammal would lead us to a very verbose and repetitive code.

Instead of doing that, we can use shorten our code by a huge margin with object destructing.

Object destructuring

Destructing bear and deer

Much better and less verbose. Note that we’re using constants since we don’t want to change the age. But think about it: age is not a constant… once per year in fact the age does increment.

If we declare it as a constant and try to change it later — we get an error. That’s the point of a constant… it’s immutable.

To play around this (intentional) restriction, we can use the let keyword (mutable) instead:

Cool it works. Let’s try deconstructing using both let and const keywords. Give the bear and deer a name. Now — usually, the name of an individual does not change too often — if ever — thus we can treat it as immutable.

We can also apply deconstruction on arrays, like so:

Array deconstruction

Cool huh — but there’s a lot more to it!

I recommend reading more about the ups and downs about deconstucting — Below you can find a finely detailed chapter about destructuring .

http://exploringjs.com/es6/ch_destructuring.html

Arrow functions

Arrow functions are a cool way to shorten your code — they’re not quite the same as traditional functions. Arrow functions are lexically scoped — we’ll get into that in a moment.

Take our previous array of animals — how would you loop over every animal and console.log the each animal?

Nothing too special, traditional forEach loop. For each animal we log out the animal. Let’s refactor our forEach loop to use arrow functions.

Much cleaner and less verbose. The less code we have to write, less we have to maintain in the future. A good rule of thumb is to write less code, but not too clever code.

Here’s a more complex example:

This pattern is called currying — we return a function inside a function. Most notable example which utilizes currying would be the connect()() function from Redux.

note: ** is the exponentiation operator and it’s the equivalent of Math.pow

The multiplyAndAdd function explained:

  • multiplyAndAdd takes a number, returns the base to the exponent power (multiplication)
  • Adds a number to the exponent

multiplyAndAdd(2)(4) is the same as 2x2 + 4

Let’s write the same functionality using arrow functions.

Less verbose for sure — but we can do even more.

Woah! We’re down from 6 lines to just 1 line of code.

Caveat #1: Notice there are no return statements. Normally the return statements are required to return values from functions. Arrow functions call return implicitly, as long as there are no braces. If we use arrow functions with braces, we have to call the return explicitly.

If this is new to you, check out this awesome article about return rules.

Caveat #2: The this keyword works differently with arrow functions.

Take this example: we have a person object — inside the object we have two properties, the name of the person and a function which returns the name of the person

If we call the sayName method, the first this points to the person object but the second this is undefined?

Note: The second this actually points to the window object but since we’re using Quokka, there is no window object.

Second this points to the window

Why does this happen? Just to point out, this is a very common interview question as well — answering this shows good understanding of the language mechanics. Check out this StackOverflow answer for an in-depth answer.

Here’s a common workaround for this with regular functions.

Arrow functions are lexically scoped, and its value within the arrow function is determined by the surrounding scope — thus they don’t need this work-around.

If you found this article to be useful, I encourage you to share it with your friends.

You can reach out to me with questions on Twitter.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×