JavaScript Refresher: Arrow Functions & this Keyword

Arrow functions JavaScript mein ES6 (2015) se aaye hain aur functions likhne ka ek short aur modern tareeka dete hain. React mein yeh bahut use hote hain kyunki inka syntax simple hai aur this keyword ka behaviour alag hota hai. Is section mein hum arrow functions aur unke this keyword ke use ko simple examples ke saath samjhenge.

Arrow Functions Kya Hain?

Arrow functions normal functions ka shorter version hain jo => syntax use karte hain. Yeh functions likhne mein time bachate hain aur code ko clean banate hain.

Features:

• Short Syntax: Function keyword ki zarurat nahi, aur chhote functions ke liye ek line mein likh sakte hain.
• No own this: Arrow functions apna this nahi banate, balki parent scope ka this inherit karte hain.
• No return keyword: Agar ek line ka expression hai, toh return aur curly braces ki zarurat nahi.

Basic Syntax:

• Normal function: function name() { return value; }
• Arrow function: const name = () => value;

Example 1: Simple Arrow Function

// Normal function
function add(a, b) {
return a + b;
}

// Arrow function
const addArrow = (a, b) => a + b;

console.log(add(2, 3)); // Output: 5
console.log(addArrow(2, 3)); // Output: 5

Explanation:

• addArrow ek arrow function hai jo a aur b ko add karta hai.
• Ek line ka expression hone ke wajah se return aur {} nahi likhe.
• Agar multiple lines hain, toh {} aur return use karna padta hai.

Example 2: Multi-line Arrow Function

const greet = (name) => {
const message = <code>Namaste, ${name}!</code>;
return message;
};

console.log(greet("Rahul")); // Output: Namaste, Rahul!

Explanation:

• Yahan {} aur return use kiya kyunki function mein multiple lines hain.
• Arrow function ka syntax normal function se chhota hai.

this Keyword in Arrow Functions

Normal functions mein this ka value depend karta hai ki function kaise call hua. Lekin arrow functions mein this parent scope se inherit hota hai, jo React mein bahut useful hai.

Normal Function mein this:

• Normal functions ka this us object ko point karta hai jo function ko call karta hai.
• Agar function standalone call hota hai, toh this global object (browser mein window) ko point karta hai.

Arrow Function mein this:

• Arrow functions apna this nahi banate, balki us scope ka this use karte hain jahan yeh define hote hain.
• Yeh React components mein helpful hai kyunki this ko bind karne ki zarurat nahi padti.

Example 3: this in Normal vs Arrow Function

const person = {
name: "Ankit",
normalGreet: function() {
console.log("Namaste, " + this.name);
},
arrowGreet: () => {
console.log("Namaste, " + this.name); // this global scope se aata hai
}
};

person.normalGreet(); // Output: Namaste, Ankit
person.arrowGreet(); // Output: Namaste, undefined (browser mein this window hai)

Explanation:

• normalGreet mein this person object ko point karta hai kyunki function person se call hua.
• arrowGreet mein this global scope (window) se aata hai, isliye name undefined hai.

React mein Arrow Functions ka Use

React mein arrow functions events aur state handling ke liye use hote hain kyunki yeh this ko component ke context mein rakhte hain bina binding ke.

Example 4: React Component mein Arrow Function

import React, { useState } from 'react';

function App() {
const [count, setCount] = useState(0);

// Arrow function for event handler
const handleClick = () => {
setCount(count + 1);
console.log(<code>Count: ${count}</code>);
};

return (

<div>
<h1>Count: {count}</h1>
<button>Increment</button>
</div>
);
}
&nbsp;

export default App;

Explanation:

• handleClick ek arrow function hai jo count state ko update karta hai.
• Arrow function ke wajah se this component ke context mein rehta hai, isliye bind karne ki zarurat nahi.
• Yeh code Vite project mein src/App.jsx mein daal ke try kar sakte ho (npm run dev se).

Example 5: setTimeout mein Arrow Function

Arrow functions setTimeout jaise callbacks mein useful hain kyunki yeh component ke context ko maintain rakhte hain.

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

const handleTimeout = () => {
setTimeout(() => {
setCount(count + 1);
console.log(<code>Count: ${count}</code>);
}, 1000);
};

return (

<div>
<h1>Count: {count}</h1>
<button>Start Timer</button>
</div>
);
}
&nbsp;

export default Counter;

Explanation:

• handleTimeout aur setTimeout ke andar wala function dono arrow functions hain, jo ensure karta hai ki this component ke context mein rahe.
• useState hook state manage karta hai, aur setCount count ko update karta hai.
• Yeh functional component hai jo Vite project mein src/Counter.jsx mein daal ke test kar sakte ho.

Key Points

• Arrow Functions: Short syntax, no own this, React mein event handlers ke liye perfect.
• this in Arrow Functions: Parent scope ka this inherit karta hai, binding ki zarurat nahi.
• Use Case: React mein arrow functions use karo jab this ka context maintain karna ho, jaise event handlers ya callbacks mein.
• Normal Functions: Jab this dynamically change hona chahiye, tab use karo (rare in React).