Arrow functions are a concise syntax for writing functions in JavaScript, introduced in ES6 (ECMAScript 2015). They make writing functions cleaner and have some behavioral differences compared to traditional functions.

Basic Syntax

const func = (parameters) => {
  // function body
};

If the function has only one expression, you can omit the curly braces {} and the return keyword:

const func = (parameters) => expression;

If there’s only one parameter, you can omit the parentheses ():

const func = parameter => expression;

If there are no parameters, parentheses are required:

const func = () => expression;

Examples

Traditional function:

function sum(a, b) {
  return a + b;
}

Arrow function:

const sum = (a, b) => a + b;

Function with no parameters:

const greet = () => "Elle, I miss you!";

Differences from Regular Functions

Arrow functions behave differently in a few key areas, especially when it comes to the this keyword.

1. No own this: Arrow functions do not have their own this. They inherit it from the surrounding context (lexical scope).
2. No arguments object: They don’t have the arguments object. If you need it, use a traditional function or rest parameters.
3. Cannot be used as constructors: You can’t use them with new, as they aren’t meant to be constructor functions.
4. No super or new.target: They don’t bind super or new.target.

Arrow functions are best used for short functions and callbacks, especially when you need to preserve the this context.