Mastering The Fundamentals Of Arrow Functions: A Comprehensive Guide

Mastering The Fundamentals Of Arrow Functions: A Comprehensive Guide

Namaskar🙏🏼

namaskar-namaste.gif (498×498)

Hey everyone, this is Aryan Sharma's blog, and I hope you're all doing well & great.

I'm thrilled to begin this JavaScript blog for absolute beginners.

📍You can find my blogs here↗️

Why wait?

Let's go🚀🚀

Arrow functions

There we have another simple syntax for creating functions, It's called "arrow functions" because it looks like:

let func = (arg1, arg2, ..., argN) => expression;

This creates a function func that accepts arguments arg1..argN, then evaluates the the expression on the right side with their use and returns its result.

It is a shorter version of:

In other words, it’s the shorter version of:

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

Let’s have an astounding example:

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

alert( sum(3, 4) );  // 7

In the above example, (a, b) => a + b means a function that accepts two arguments a and b and are evaluating and returns the result.

For instance, to dynamically create a function:

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

Non-readable right?
They are very convenient for simple one-line actions when we’re just too lazy to write many words.

Multiline arrow functions

Up to this point, we had only seen very basic arrow functions. They evaluated the arguments from the side opposite of =>, and returned the right-side expression along with them.

There are occasions when we require a function with more statements and expressions. We can then enclose them in curly braces if such is the case. The main distinction is that curly braces, like conventional functions, require a return within them in order to return a value.

let sum = (a, b) => {  
  let result = a + b;
  return result; 
};

alert( sum(1, 2) );

without arrows

(...args) => expression

An expression is on the right side; the function evaluates it and returns the outcome. If there is only one parameter, brackets can be omitted.

with arrows

(...args) => { body }

Multiple statements can be written inside a function using brackets, but if we want to return something, we need an explicit return.

I Hope you loved the blog❣️

See u in the next blog...Stay tuned🎶

Don't forget to follow me on:
Twitter And LinkedIn