by Indrek Lasn

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

Photo by Fabian Grohs on Unsplash

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

Note: This article was originally published under strilliant.com — please give love to the original too! ❤

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. Take this…www.strilliant.com

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 is the equivalent of Math.pow

The multiplyAndAdd function explained:

  • multiplyAndAddtakes 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, please give us some claps so more people can see it.

You can reach out to me with questions on Twitter.

Indrek Lasn (@lasnindrek) | Twitter
The latest Tweets from Indrek Lasn (@lasnindrek). {{ 🥥.bio }}. Zurich, Switzerlandtwitter.com

Here are some articles you might enjoy:

Strilliant
Tutorials by developers to developerswww.strilliant.comSupercharge your debugging experience for Node.js
You see this, what do you do?medium.com✨ Immensely upgrade your development environment with these Visual Studio Code extensions
Let’s talk about Code — Visual Studio Code.medium.freecodecamp.orgHow to set-up a powerful API with Nodejs, GraphQL, MongoDB, Hapi, and Swagger
Separating your frontend and backend has many advantages:medium.freecodecamp.orgHere are some of the best resources to improve your coding skills
There are lots of high-quality coding tutorials, books, and overall resources on the web. I’ve gathered the very best…medium.comHere’s what you need to know as a new developer
If you’ve started to learn programming and have decided to get serious — or you’re fresh out of school with no job…medium.freecodecamp.org