Dhananjay Kumar

The JavaScript Arrow function is a shorter way of writing a function expression.

Let us say you have a function expression as below,

---

var add = function (num1, num2) {
    return num1 + num2;
}

---

The above function can refactor for a shorter syntax using the arrow function as below,

---

var add = (num1, num2) => num1 + num2; 

---

So, as you see, the arrow function provides a convenient and short syntax to write a function expression. Basic syntax rules for an arrow function are as follows:

• Arguments should be passed in the small parentheses
• For only one argument, parentheses are optional
• For zero argument, there must be an empty parenthesis
• If there is a single expression in the function body
  • Using parenthesis is optional
  • Using the return statement is optional
• There is a special syntax to return an object.  Either an object should be enclosed inside small bracket or should be returned using the return statement.

You can return an object using the special syntax as shown below,

---

let Emp = (name, age) => (
    {
        Name: name,
        Age: age
    }
)
 
let emp1 = Emp('John', 20);
console.log(emp1);

---

You can also return an object using the return statement. So, you can refactor the above code as below,

---

let Emp = (name, age) => {
    return {
        Name: name,
        Age: age
    }
}
 
let emp1 = Emp('John', 20);
console.log(emp1);

---

I prefer to use the return statement as it makes code more maintainable and readable.  So, if you need to return an empty object from an arrow function, you can return in one of those ways,

---

var Emp1 = () => ({});
var Emp2 = () => { return {} };
 
let e1 = Emp1();
let e2 = Emp2();
 
console.log(e1);
console.log(e2);

---

Some of the restrictions of an arrow function are as follows,

• An arrow function does have arguments object
• An arrow function cannot  be called using the new operator
• An arrow function does not have its own this object, and it always inherits it from the enclosing scope
• An arrow function does not have the prototype property

As mentioned, an arrow function does not have its own this object. In the below code Emp arrow function returns this object; however, it does not have its own this object, so it returns this object of the enclosing scope.

---

function Org(name) {
    this.name = name;
    let Emp = () => {
        return this;
    }
 
    let e1 = Emp();
    console.log(e1); // Org { name: 'geek97' }
 
}
let o1 = new Org("geek97");

---

Above Emp function returns an object created by constructor Org.

One last thing keeps in mind that you can not use an arrow function to create a new object. An arrow function cannot be used as a constructor because it does not have the prototype property.  The following code will throw a TypeError,

---

var Emp = (Title, Price) => {
    this.Title = Title;
    this.Price = Price;
}
 
let e1 = new Emp("Book", 700);

---

The above code will throw an error. So as a summary remember that, you can explicitly return an object literal from an arrow function but cannot use it as a constructor.

I hope you find this blog post useful. Thanks for reading.