regular and arrow function difference

regular funciton

function (){}

funciton name(){}

function name('a','b'){}

arrow functions

const name =()=>{}

const name =(a,b)=>{return a+b}

name(1,2)

https://www.facebook.com/photo/?fbid=195615656700516&set=pcb.801116034516701

this keyword

Arrow functions and regular functions in JavaScript have some differences in terms of syntax, behavior, and their treatment of the this keyword. Here are the key distinctions:

1. Syntax:

   • Arrow functions have a concise syntax with an arrow (=>) between the parameter list (if any) and the function body.
   • Regular functions have the function keyword followed by an optional function name, a parameter list (if any), and a function body enclosed in curly braces.

2. Binding of this:

   • Arrow functions do not have their own this binding. Instead, they lexically inherit the this value from the surrounding scope in which they are defined.
   • Regular functions have their own this binding, which is determined by how they are called or invoked. The value of this is dynamically set based on the context of the function call.

3. Arguments object:

   • Arrow functions do not have their own arguments object. If you try to access arguments within an arrow function, it will refer to the arguments object of the surrounding non-arrow function (if any).
   • Regular functions have their own arguments object, which is an array-like object containing the arguments passed to the function.

4. Usage of new keyword:

   • Arrow functions cannot be used as constructors with the new keyword. Trying to use an arrow function as a constructor will result in a runtime error.
   • Regular functions can be used as constructors with the new keyword to create new objects. When a regular function is called with new, it creates a new instance of the function's prototype object.

5. Method syntax:

   • Arrow functions are often used in object methods when you want to preserve the lexical scope of this. However, arrow functions do not have their own this, so they cannot be used as methods that require access to the instance object.
   • Regular functions are typically used as methods in objects when you need access to the instance object via this.

Here's an example to demonstrate some of these differences:

 s

// Arrow function
const arrowFunction = () => {
  console.log(this); // 'this' refers to the surrounding scope (lexical this)
};

// Regular function
function regularFunction() {
  console.log(this); // 'this' depends on how the function is called
}

const obj = {
  arrowMethod: arrowFunction,
  regularMethod: regularFunction
};

obj.arrowMethod(); // 'this' is inherited from the surrounding scope
obj.regularMethod(); // 'this' refers to the 'obj' instance

s

In this example, the arrow function does not have its own this binding, so it inherits the this value from the surrounding scope, which could be the global scope or the scope of the containing function/object. The regular function, on the other hand, has its own this binding, which is determined by the context in which it is called. When regularMethod is called on the obj object, this refers to the obj instance.

Overall, the choice between arrow functions and regular functions depends on the specific use case and the desired behavior regarding this binding and other factors like the need for the arguments object or the ability to use the new keyword.