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.
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
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:
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 .
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:
** is the exponentiation operator and it’s the equivalent of
multiplyAndAdd function explained:
multiplyAndAddtakes a number, returns the
- 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
If we call the
sayName method, the first
this points to the person object but the second
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.