Mastering Arrow Functions in js

In the previous blog Mastering function in js we have studied about function in javascript for better understanding of this blog read that previous blog.

Arrow Functions are shorter way to write a function using arrow ( =>) symbol. We assign a arrow function to a variable .

Arrow Function Syntax:

const variable_name=()=>{
  //function body
 // write task here
}

variable_name is the name of the function.

let make a simple arrow function:

const greet=()=>{
console.log("Namaste")
}

greet()  //Function call

Output:

Namaste

lets make one more function to add two numbers

const add=(a,b)=>{
   return a+b 
 }
const result=add(7,5)
console.log(result)

Output:

12

Arrow function with one parameter:

Lets make an arrow function with one parameter. We have to make a arrow function which square the number.

const square = x => x * x;

console.log(square(4)); // 16

Explanation

• square is the name of the function.

• x is the parameter.

• x * x calculates the square of the number.

One advantage of arrow functions is that we can write them in a single line when the function only returns a value.

In this example, we do not need to use the return keyword because arrow functions automatically return the result when written without curly braces {}. This is called implicit return.

Arrow Function with multiple parameter:

const multiply=(a,b)=> a*b

const result=multiply(5,6)
console.log(result) // 30

Explicit and Implicit return:

Explicit Return

When we manually use the return keyword, it is called explicit return.

Example

const square = (x) => {
  return x * x;
}

console.log(square(4)); // 16

Explanation

• Curly braces {} are used.

• We must explicitly write return.

• Without return, the function will return undefined.

Example:

const square = (x) => {
  x * x;
}

console.log(square(4)); // undefined

---

Implicit Return

When we do not write the return keyword, but the value is automatically returned, it is called implicit return.

Example

const square = x => x * x;

console.log(square(4)); // 16

Explanation

• No {} are used.

• The expression after => is automatically returned.

---

Key Difference

Explicit Return	Implicit Return
Uses return keyword	No return keyword
Uses {}	Usually written without {}
Used for multiple statements	Used for single expression
More readable for complex logic	Shorter syntax

Difference between Arrow function and regular function:

The main difference between arrow function and regular functions is arrow function does not have their own this it inherits this from its lexical environment but regular function have their own this.

let understand this with a example;

this in arrow function:

const bill={
 amount:1000,
 showAmount:()=>{
  console.log(this.amount)
 
 }
}
bill.showAmount()

Output:

undefined

because arrow function does not have their own this so it access from outer scope which is global in this case that's why it is showing undefined. But regular function have their own this.

this in regular function:

const bill={
 amount:1000,
 showAmount=function(){
  console.log(this.amount)
 
 }
}
bill.showAmount()

Output:

1000

in this case this has the context of object that's why it shows the real value of amount instead of undefined.

Conclusion

Arrow functions are a modern and concise way to write functions in JavaScript. They make the code shorter and easier to read, especially when writing simple functions or callbacks. With features like implicit return, developers can write clean one-line functions when only a single expression is required.

However, arrow functions behave differently from regular functions when it comes to the this keyword. Arrow functions do not have their own this; instead, they inherit it from their surrounding lexical scope. Because of this behavior, arrow functions are usually not recommended for object methods where access to the object’s this context is required.

In practice, arrow functions are commonly used for small utility functions, callbacks, and array methods because of their simplicity and readability, while regular functions are preferred when working with object methods or situations where the function needs its own this context.

Understanding when to use arrow functions and when to use regular functions helps developers write cleaner, more predictable, and more maintainable JavaScript code.