Arrow  v/s Regular Functions

Arrow v/s Regular Functions

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 :

  1. 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 :

  1. 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 :

  1. 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 :

  1. 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:

  1. 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*/