What is Anonymous Function? What is Arrow Notation?

In this article, we are looking at anonymous function. So we will take a look at the anonymous function and also understand what is arrow notation. So we will first take look at anonymous function. We will take both topics one by one.

Anonymous Function

When we declare a function specify both body and identifier. So JavaScript supports anonymous function which Doesn’t necessary to have an identifier.

Anonymous Function

You might be wondering how will we call the function if we did not specify a name for that function. Now what a few minutes keep this topic aside,  and talk about expressions. Now we know that an expression is something that evaluates to a value. And we know that functions are values like any other in javascript.

you can specify a function as an expression.  anonymous function helps us to do that. so when you declare a function as the expression you don’t need to specify an identifier for that function.  when you use the function as expression A function expression can be assigned to something Or called immediately.

we will create a variable and assign the function as an expression. Let’s consider the following example

so the outcome of this function is the same As if we had declared the function in the usual way. So in this function, we have f variable as an identifier That refers to the function. So if you wanted to call this function just use f  and specify parenthesis.

like this,

the only difference is that We are creating an anonymous function and assigning it to the variable. Now you know that what is anonymous function and how do you use it.  but now we just wanted to understand why we need to use the anonymous function. 

Now there is a different situation where you need to call the function immediately. Anonymous functions used as the argument or as a method or to create function properties in the object.

Just like this. In this example, we will understand how to use the function in the object property.

when you execute this statement you will get “You called me !” message on the console.  in this example we had created an object with two properties name and invoke. for the invoke property we had specified function expression.  and to call this function you just need to specify the object and call its property with parentheses.

if you don’t use parentheses then this would return the reference of the function. You can do the same thing with shorthand syntax. just like this.

Now here we just remove the colon and function keyword. When you execute this code you will get the same outcome. The reason behind this we use the method in the object. In ECMAScript 6 this is a new shorthand syntax for the method. So here invoke is the method And to call this method we use object dot method name.

Arrow Notation

in this tutorial, we will look at a very interesting thing in JavaScript which is Arrow notation. In ECMAScript 6 a new and welcome syntax called arrow notation. To specify a row you can use an equal sign with greater than the operator. This new feature helps you to reduce The number of times you have to type The word function. As well as the number of curly braces you have to type.

Arrow function allows you to specify syntax in three ways.

  1. You can omit the function keyword.
  2. If the function takes only a single parameter then you can omit parentheses.
  3. If your function has only a single statement then you can omit curly braces also.

Arrow functions are always anonymous. After that keep in mind, you can’t specify Identifier for the arrow function Like you can with the function keyword.

Now let’s take a look at the following examples.

so in this example, we omit the function keyword and after the parenthesis, we specify arrow annotation. As I said if you specify only one statement then you can I omit curly braces also while creating array function. 

Now let’s take one more example with one argument.

if you wanted to multiply two values then you can do this.

Now using these examples you will understand how you can use the arrow function. Using Arrow function it is very easy to declare a function with arguments.

this Keyword

This keyword is normally associated with object-oriented programming. And we will be learning object-oriented programming in a future lecture, however, this keyword has also some important features and it can be used in multiple ways.

Normally this keyword is related to the function that are properties of the object. This keyword normally refers to itself. Just like we create an anonymous function and specify reference of that function in the variable.  so this keyword refers to the current object where he used.

now let’s take an example and understand how this work.

Now in this example, we had created an object with two properties. So first we declare a name property with the “Daily tuition” message and then we create second property. In the second property y, we specify method magic and return hello message with first Property value. You can see here we use this keyword to call the first property of the current object.

So when you execute this statement you will get hello daily tution message on the console. Now here this keyword is bound to the object. Not because Magic is the property of the object but we called it directly on the object.

Now if we create a reference of this object and compare both using assignment operator then the result would be true. And if you call this method using reference then you will get this output.

When you execute this statement you will get an error message on the console.  so here JavaScript called undefined to this keyword. Because JavaScript didn’t know that this keyword is originally declared in obj variable. So this keyword bound to undefined.


That’s it. I hope you understand this article. Please read more tutorials on the blog to get interesting updates and knowledge.