Arrow Functions in JavaScript: A Simpler Way to Write Functions

Function in JavaScript are reusable block of code design to perform specific task. They allow you to organize, reuse, and modularize code. It can take input, perform task and returns outputs.

Understanding Functions :

In functions, parameters are placeholders defined in the function, while arguments are the actual values you pass when calling the function.

function greet(name) {
 // 'name' is a parameter console.log("Hello " + name); 
}
greet("Alice"); // "Alice" is the argument

Type of Functions :

1. Named Function.

2. Anonymous Function.

3. Function Expression.

4. Arrow Function (ES6).

5. IIFE.

6. Callback Functions.

7. Arrow function.

What arrow functions are ?

Arrow functions in JavaScript are a concise way to write function using the => syntax, automatically binding this from the surrounding context.

Arrow function don't have own this, super and arguments. And should not be used arguments.

Arrow function cannot be used constructors. Calling them with new keyword throws Type error.

Arrow function cannot use yield and create generator function

Basic arrow function syntax :

Syntax :

const functionName = (parameters) => {  
// function body  return result;
};

The following code defines an arrow function that takes two numbers and returns their sum.

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

Arrow Function without Parameters :

const gfg = () => {
 console.log( "Hi from GeekforGeeks!" );
}
gfg();

Arrow Function with Single Parameters :

When an arrow function has only one parameter, parentheses around the parameter can be omitted, making the syntax shorter and cleaner. This is commonly used in callbacks, array methods, or simple operations.

const square = x => 
x*x; 
console.log(square(4));

Arrow functions with multiple parameters :

Arrow functions with multiple parameters, like (param1, param2) => { }, simplify writing concise function expressions in JavaScript, useful for functions requiring more than one argument.

const gfg = ( x, y, z ) => { 
console.log( x + y + z ) 
} 
gfg( 10, 20, 30 );

Implicit return vs explicit return :

Implicit return : Implicit functions are functions where we return a value, but without using the return keyword.

Example : -

explicit return : - Now let’s quickly mention what an explicit function is. An explicit function is when we explicitly declare a value with a function’s “return” keyword or curly braces in the function.

Example :-

Basic difference between arrow function and normal function.

Normal function : The ordinary way of declaring functions in JavaScript is to use the function keyword. And normal function create own this mean it depend on which function are calling.

function logNumbers(num1, num2) {
  console.log(arguments)
}

logNumbers(8, 24)

Arrow function : arrow function way of declaring function without function keyword. And arrow function doesn't contain own this mean it inherit this outer function when we are calling.

const logNumbers = (num1, num2) => {
  console.log(arguments)
}

logNumbers(8, 24) // Uncaught ReferenceError: arguments is not defined

In this blog explain about arrow function syntax, declaration and working flow then anyone understand and use arrow function easily.

I hope blog is helpful. Thanks for reading....