TODAY COMMUNITY SESSION BATCH fsr060523 06 july

1-Discuss the differences between the “this” keyword in a regular function and an arrow function.

The value of this in a regular function is determined dynamically based on how the function is called

The value of this in an arrow function bound to the surrounding scope

1 Like

1. Regular Function:
```  const obj = {
  name: "John",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

obj.greet(); // Output: Hello, John

In this example, the regular function greet is defined inside the obj object. When the greet function is called using obj.greet(), the valuue of this inside the function refers to the obj object itself. So, it can access the name property of the obj object.

  1. Arrow Function:
  name: "John",
  greet: () => {
    console.log("Hello, " + this.name);
  }
};

obj.greet(); // Output: Hello, undefined

In this example, the arrow function greet is defined inside the obj object. Unlike regular functions, arrow functions do not have their own “this” binding. Instead, they lexically capture the value of this from their surrounding scope, which is the global scope in this case. Therefore, this.name inside the arrow function refers to the name property of the global object, which is undefined in this context.

  1. Usage of “this” in Callbacks:
const obj = {
  name: "John",
  regularFunc: function() {
    console.log("Regular Function - Hello, " + this.name);
  },
  arrowFunc: () => {
    console.log("Arrow Function - Hello, " + this.name);
  },
  executeCallbacks: function() {
    this.regularFunc(); // Output: Regular Function - Hello, John
    this.arrowFunc(); // Output: Arrow Function - Hello, undefined
  }
};

obj.executeCallbacks();

In this example, the executeCallbacks method is defined inside the obj object. It calls two functions: regularFunc, which is a regular function, and arrowFunc, which is an arrow function. The regular function correctly captures the this value of the obj object, while the arrow function captures the this value from the surrounding lexical scope (which is the global scope). As a result, this.name inside the arrow function returns undefined.

These examples demonstrate that regular functions and arrow functions have different behaviors when it comes to the “this” keyword. Regular functions have dynamic “this” binding based on the calling context, while arrow functions have lexical “this” binding from the surrounding scope. It’s important to consider these differences when deiciding which type of function to use in different scenaarios.

2 Likes

this keyword :- by using this keyword we can avoid writing of multiple functions , we can write only one
line code
arrow function :- It also works like a normal function ,b y using => symbol
color = ()=>{ alert (“green”);}

1 Like

1-Discuss the differences between the “this” keyword in a regular function and an arrow function.
in regular function this keyword represent the window object

but in arrow function this keyword represent the current object of the scope

1 Like
<button id="button" onclick="fun1(this)">1</button>
function fun1(x){
    // console.log(x,y)
    x.style.background = "red";
    // x.className = "effect"
    
    // x.style.background = y;
}

click
var abc =()=>{
document.getElementById(“button”).style.backgroundColor=“green”;}

1 Like
type or paste code here
```<button id="button" onclick="abc();" >click</button>
var abc =()=>{
    document.getElementById("button").style.backgroundColor="green";}
1 Like