What the fork is Arrow Function?

Hey there 👋

I'm Zuber. I hope you are doing well. I'm a frontEnd developer, obsessed with ReactJS and CSS, leveling up my game every day.

So, I came back stronger than the 90's trend 🎶, ah sh*t no, Damn you Taylor Swift get out of my head.

Okay sorry, Let's do it again, I'm back with another blog (better), in this blog, we'll talk about the Arrow Functions from our beloved JavaScript <3

In 2015, TC39 (Ecma Technical Committee 39 - the committee that evolves JavaScript) released ES6 AKA ECMAScript 6 AKA ECMAScript2015. (We will talk about TC39 and ES history in another blog soon)

ES6 came with new syntaxes and some cool and awesome features to make our code more readable, modern, beautiful.

ES6 made our life easy with cool stuff like arrow functions, template literals, destructuring, JS modules, let - const, etc. These features allow us to write less do more.

Today, we're gonna talk about brace yourselves the Arrow Functions.

So, let's start.

What is an Arrow function 🏹

According to JavaScript.Info,

An Arrow function is a very simple and concise syntax for creating functions, that’s often better than Function Expressions.

Arrow functions are anonymous and also called Short Arrow, Lambda Functions, and Fat Arrow functions because it looks like a short-fat arrow =>.

In simple words, Arrow functions are short, clean, more readable, and modern as compared to regular javascript functions.

Let's see how -

Before jumping to the arrow function example let's do a short comparison between regular and arrow function syntax for a better understanding.

Regular Function 🆚 Arrow Function

Let's do a regular function example here, check out the below snap.

Now Let's do an Arrow function example.

See? How clean and beautiful it looks with arrow syntax! Also, this might be overwhelming let's break it down so you'll understand better.

Check out the snap below.

By using the arrow function we don't need to type the function keyword, return keyword (it’s implicit in arrow functions), and curly brackets as you can see in the above snap.

Features ✨

Passing Arguments in Arrow Function

If there is only one argument for an arrow function, that one argument can be used directly without any further syntax but if there are multiple arguments then you've to use parentheses and separate the arguments by a comma. Similarly, a function without any arguments must use empty parentheses to start the arrow function ( )=>

Returning Object in Arrow Fucntion

To return an object using the arrow function you have to use parentheses before the curly braces or it'll throw an error, check out the code snippet =>

Implicit return statements in Arrow functions

In Arrow functions, we don't need to write return statements, it comes with implicit ones. But when writing a multi-line function and doing some calculations you've to write a return statement, for single it'll be implicit. Check out the below code =>

Arrow functions and

First, let's talk about "this" in regular function. In regular function expressions, the "this" keyword is bound to different values based on the context in which it is called.

For example,

With arrow functions, however, this is lexically bound. It means that it uses "this" from the code that contains the arrow function. An arrow function does not create its own "this" context, so this has its original meaning from the enclosing context.

Arrow function with map, filter, and other built-in functions.

The map-filter functions with arrows look more clear and readable than ES5 syntax. With ES6 you can write shorter and smarter code. You can use the same with reduce and sort etc.

So, In a nutshell,

But but but, as we all know,

Sh*t wrong universe!! 😬

I mean, with great features comes few limitations too, after all, its arrow function not Adrak Wali Chai to satisfy everyone right.

So, let's see what are the limitation we have here=>

Limitations in Arrow Functions 😩

Arrow Function and this

Well, I know we talked about "this" as an advantage but it's on both sides 50/50 kinda, let's see what's the other 50 we got here.

An arrow function doesn’t have its own "this" value & It will point to the parent scope. Let's see how it affects the code =>

I was doing the research for the blog and I found a few dope examples from javascripttutorial.net

Example of an Event Handler =>

Suppose we have an input field,

<input type="text" name="username" id="username" >

Once users type their usernames, you capture the current value of the input and log it.

document.querySelector('#username').addEventListener('keyup', () => {
  console.log("Hello" + this.value)
});

However, when you execute the code, you will get the following message regardless of whatever you type:

Hello undefined

So does that mean the this.value in the event handler always returns undefined? Well YES!!

As mentioned earlier, the arrow function doesn’t have its own this value. It uses the "this" value of the enclosing lexical scope. The "this" in the arrow function in this example references the global object.

As we all know, In the browser, the global object is a window. The window object doesn’t have the value property. Therefore, the JavaScript engine adds the value property to the window object and sets its values to undefined.

To fix this issue, you need to use a regular function instead. The this value will be bound to the element that triggers the event.

username.addEventListener('keyup', function () {
      console.log("Hello" + this.value)
});

And, the same goes for object methods and prototype methods.

Few things to note => An arrow function doesn’t have,

• it's binding to this or super,
• arguments object.,
• new.target keyword,
• prototype property.

Conclusion 🌻

In this blog, We talked about that the arrow functions are anonymous, do not have a prototype or constructor, cannot be used with the new keyword, and determine the value of this through the lexical scope. Arrow functions are best with anything that requires this to be bound to the context, and not the function itself. Overall Arrow functions are dope, time-saving, and better than regular ones but sometimes not useful because of the limitations otherwise Arrow functions are my favorite <3

Which one do you use Arrow or Regular? Let me know in the comments and yes It'll be really helpful if you can give some feedback/suggestions.

That's it for today, I'll be back with another blog, Take care and be nice to everyone. <3

Thank you, have a beautiful life ahead ❤️

byeeee!!