ES6 Arrow Functions

ES6 Arrow functions are a modern and shorter way to write JavaScript functions. Introduced in ECMAScript 6 (ES6), arrow functions make your code cleaner and more readable — especially useful when writing small or anonymous functions.

---

Traditional Function vs Arrow Function

Before ES6, you wrote functions like this:

function greet(name) {
  return "Hello, " + name;
}

With ES6 arrow function:

const greet = (name) => "Hello, " + name;

Both do the same thing, but the arrow function is shorter and easier to understand at a glance.

---

Syntax of Arrow Functions

Basic syntax:

(parameter1, parameter2, ...) => { 
  // function body 
}

Or even shorter, if it’s a single-line return:

(parameter) => expression;

Examples:

const add = (a, b) => a + b;
console.log(add(3, 5)); // 8

---

Features of Arrow Functions

1. Shorter Syntax

Arrow functions save you from typing function and return (in one-liners).

// Traditional
const square = function(x) {
  return x * x;
}

// Arrow
const square = x => x * x;

2. Implicit Return

If the function has only one expression, it returns it automatically.

const double = n => n * 2;

If you need multiple lines or logic, use {} and return explicitly:

const multiply = (a, b) => {
  let result = a * b;
  return result;
};

3. No this Binding

One of the biggest differences between regular functions and arrow functions is how they handle this.

• Arrow functions don’t have their own this.
• They inherit this from the parent (lexical scope).

This is very helpful in scenarios like callbacks or inside classes.

Example:

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++;
    console.log(this.age); // refers to Person object
  }, 1000);
}
new Person();

If you used a normal function inside setInterval, this would not refer to the Person object.

---

When to Use Arrow Functions

Good for:

• Short functions
• Callbacks (e.g., in .map(), .filter(), .forEach())
• Functional programming
• Inside React components (like event handlers)

Avoid when:

• You need a function with its own this (like methods in classes/objects)
• You need access to arguments or super
• You’re writing constructors (arrow functions can’t be used as constructors)

---

Examples of Arrow Functions

Example 1: Array map()

const numbers = [1, 2, 3, 4];
const squares = numbers.map(num => num * num);
console.log(squares); // [1, 4, 9, 16]

Example 2: Array filter()

const ages = [12, 25, 17, 30];
const adults = ages.filter(age => age >= 18);
console.log(adults); // [25, 30]

Example 3: Without Parameters

const sayHello = () => console.log("Hello!");
sayHello(); // Hello!

---

Arrow Functions Don’t Have:

Their own this

They use this from the outer scope.

arguments object

You can’t access arguments inside an arrow function.

 const test = () => {
  console.log(arguments); // Error!
}

Use a normal function if you need arguments.

---

Summary

Feature	Arrow Function	Traditional Function
Syntax	Short and concise	Verbose
this binding	Inherits from parent (lexical)	Own this
Can be used as method	Not ideal	Yes
Can be used as constructor	No	Yes
Implicit return	Yes (in one-liners)	No

---

Final Thoughts

ES6 arrow functions make JavaScript code cleaner, shorter, and easier to maintain — especially for small tasks and callbacks. But remember, they’re not a replacement for all functions. Choose wisely based on how you want to use this and other special features.