I have encountered developers who ask the question: Arrow functions versus regular functions. Some developers argue that it's merely a syntax difference made to simplify code writing. Have you ever received an update for your mobile phone or laptop? Do you think the update you received will not change or fix anything regarding the current features of your device? Updates are expected to bring changes and improvements. Today, we will discuss the functional differences between Arrow and Regular functions.
Syntax Difference :
Here is how we write the normal functions in the javascript, with arguments and without arguments, with and without return statements.
function myFunction() { console.log(" Inside the func") } // -syntax for without arguments/with out return function myFunction(num1, num2) { return num1*num2 } //- syntax for with arguments and with return statment
Here is how we can write the Arrow functions in Javascript, with arguments and without arguments, with and without return statements.
const arrow = () => { console.log(" Inside the func") } // -syntax for without arguments / without return const arrow = (num1, num2) => { return num1*num2 } // - syntax for with arguments and with return statment const arrow =(num1, num2) => num1*num2 // This really simplified form for arrow function
Argument object in Arrow and Regular functions :
A normal function contains an "arguments " object which can be accessed in the function, it is a local variable that can store the arguments passed to a function and we can utilize the values: Let's see this in the code base.
function printArguments() { console.log(arguments) } printArguments("Eswar", 100, true) /* consolle output: { '0': 'Eswar', '1': 100, '2': true }*/
Where the arrow function there is no "argument" object if we try to access it we will get a: Uncaught ReferenceError: arguments is not defined
const print = (name, int,bool) => { console.log(arguments) } print("hello", 400, false) /*2 Uncaught ReferenceError: arguments is not defined at print (<anonymous>:2:15) at <anonymous>:1:1*/
Function as a constructor for class :
By using the normal function we can create a constructor for the class, which serves as a special function for instantiating an object from a class.
class Student { constructor(name, id) { this.name = name this.id = id } sayName() { console.log(`The student name is ${this.name}`) } } const student1 = new Student("Eswar", 15012) const student2 = new Student("Chandu", 14523) // In this constructor is a special function student1.sayName() // The student name is Eswar
But If we use the arrow function as the constructor for the class, SyntaxError: Classes may not have a field named 'constructor'.
Because arrow functions involve expressions that are assigned variables, JavaScript now sees the constructor as a field. And in classes, you cannot have a field named constructor as that is a reserved name.
class Student { constructor= (name, id)=> { this.name = name this.id = id } sayName() { console.log(`The student name is ${this.name}`) } } // Uncaught SyntaxError: Classes may not have a field named 'constructor'
Function Declaration and Hoisting :
Normal functions are hoisted and declared whereas arrow functions are assigned to some variables, we can access the function only with that variables.
Normal Function:
function myFunction(){ return true}/* function isspecial key and myFunction is the key name by which // we are declraing the function inorder call teh functio we use the name of of the function*/ myFunction();
Arrow Function:
const myFunction = () => true /*this anonymous arrow function has been assigned to variable myFunction If want to call the function I have to call by variable myFunction*/ myFunction()
As arrow functions are not declared so they can not be hoisted so when try to call the arrow function before it is created then we will get an error as not defined whereas if we try to call the normal function we will not get any error
Normal Function:
```javascript eswar(1,2) function eswar(num1,num2){ return num1*num2} //2
eswar() function eswar(num1,num2){ return num1*num2} //NaN
Arrow Function:
```javascript
myFunction1
const myFunction1 = () => q
// Uncaught ReferenceError: myFunction1 is not defined
".this" Keyword binding in Arrow and Regular Function:
In normal functions, a "this" variable is created which references to the objects by which they were called. Whereas using "this" in an arrow function, the arrow function does not automatically create a "this " variable. As a result, any reference to this would point to what "this" was before the arrow function was created. Lets try to understand by example :
Normal Function :
const obj = { name: 'deeecode', age: 200, print: function() { console.log(this) } } obj.print() /* { name: 'deeecode', age: 200, print: [Function: print] } this fuction is called by the obj so it took the values from the obj */
Now let's try to see what happens when we use this in arrow function
const obj = { name: 'deeecode', age: 200, print: () => { console.log(this) } } obj.print() /* Window - Here as this in arrow function will take the value of reference of this before the arrow function has created , in general at the starting of code this referes to object "window"- which created by the javascript engine*/