loading...
Cover image for Arrow Function: Basics

Arrow Function: Basics

bhagatparwinder profile image Parwinder 👨🏻‍💻 ・1 min read

JavaScript with Parwinder (37 Part Series)

1) What is Javascript? 2) Where can I run JavaScript? 3 ... 35 3) Types in JavaScript 4) What are objects in JavaScript? 5) Reference vs Value 6) Arrays in JavaScript 7) Array Methods in JS 8) Array Instance Methods 9) Array Instance Methods II 10) Functions in JavaScript 11) Type of Functions in JavaScript 12) Scope in JavaScript 13) Hoisting in JavaScript 14) Closures in JavaScript 15) Debugging in JavaScript: Console Methods 16) The new Keyword in JavaScript 17) JavaScript: Type Conversion 18) JavaScript: While Loop 19) JavaScript: Do While Loop 20) JavaScript: For Loop 21) Lesser-Known JavaScript Tricks 22) Events & Event Handling 23) Event Bubbling 24) Event Capturing 25) JS: Switch Statement Explained 26) Arrow Function: Basics 27) this Keyword in JavaScript 28) Arrow functions & this keyword 29) Callback Functions & Callback Hell 30) Strict Mode in JavaScript 31) Optional Chaining 32) Timers & Intervals 33) Arrow Function and The new, arguments & super Keyword! 34) Promises: Introduction 35) Promises: Chaining, Error Handling & Operators 36) New Promise Methods: allSettled & any 37) Async/Await: Introduction

Introduction

Arrow functions introduced in ES6 is a concise way of creating functions compared to function expressions.

The name arrow function comes from the use of =>.

Syntax:

const functionName = (arg1, arg2, ... argN) => {
    return value;
}

Example

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

console.log(multiply(7, 8)); // 56
console.log(multiply(3, 2)); // 6

Key Features

  • Arrow functions are anonymous function until they are assigned to a variable.
  • If there is only 1 argument, we can skip parenthesis.
   const square = x => {
       return x * x;
   }

   console.log(square(2)); // 4
   console.log(square(7)); // 49

The only caveat to this rule is that if the 1 argument is destructured.

const foo = ({name = "New User"}) => name;

console.log(foo({})); // New User
console.log(foo({name: "Parwinder"})); // Parwinder
  • If there are no arguments, we need to have the parenthesis
   const greeting = () => {
       return "Hello World!";
   }

   console.log(greeting()); // Hello World!
  • If the function body is an expression, it will return the expression, we can remove the brackets and the return keyword.
   const greeting = () => "Hello World!";
   console.log(greeting()); // Hello World

Now that we know all these key features, let us rewrite the example to get the square of a number:

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

JavaScript with Parwinder (37 Part Series)

1) What is Javascript? 2) Where can I run JavaScript? 3 ... 35 3) Types in JavaScript 4) What are objects in JavaScript? 5) Reference vs Value 6) Arrays in JavaScript 7) Array Methods in JS 8) Array Instance Methods 9) Array Instance Methods II 10) Functions in JavaScript 11) Type of Functions in JavaScript 12) Scope in JavaScript 13) Hoisting in JavaScript 14) Closures in JavaScript 15) Debugging in JavaScript: Console Methods 16) The new Keyword in JavaScript 17) JavaScript: Type Conversion 18) JavaScript: While Loop 19) JavaScript: Do While Loop 20) JavaScript: For Loop 21) Lesser-Known JavaScript Tricks 22) Events & Event Handling 23) Event Bubbling 24) Event Capturing 25) JS: Switch Statement Explained 26) Arrow Function: Basics 27) this Keyword in JavaScript 28) Arrow functions & this keyword 29) Callback Functions & Callback Hell 30) Strict Mode in JavaScript 31) Optional Chaining 32) Timers & Intervals 33) Arrow Function and The new, arguments & super Keyword! 34) Promises: Introduction 35) Promises: Chaining, Error Handling & Operators 36) New Promise Methods: allSettled & any 37) Async/Await: Introduction

Posted on by:

bhagatparwinder profile

Parwinder 👨🏻‍💻

@bhagatparwinder

Happy, cheerful, confident. Web developer based out of Chicago :)

Discussion

markdown guide
 

If there is only 1 argument, we can skip parenthesis

Unless there's one argument which is destructured.

const q = ({ a = 1 }) => a;

If the function has only one statement, and the statement returns a value, we can remove the brackets and the return keyword.

Rather, if the function body is an expression, the value of the expression is returned.

Consider why the following is not legal -- it is one statement, but it is not a valid expression.

const r = () => return;

This is also why you need parentheses in the following case

const s = () => ({ a: 1 });
 

I do consider both examples as edge cases but they are correct and valid. I have updated the article to showcase them. I appreciate the feedback.

Thanks for reading! ♥️

 

If the function has only one statement, and the statement returns a value, we can remove the brackets and the return keyword.

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

"Hello World!" is not a statement, and if it were, it would not return.

It is an expression, and it evaluates.

Yep agreed. Corrected the post as I mentioned above.

Looking better, although

If the function body is an expression, it will return the expression, we can remove the brackets and the return keyword.

If it has {} or return, then the function body isn't an expression. :)

I think the simplest way to express it is that there are two distinct forms.

  1. () => expression;
  2. () => { ...; return value; }; // block of statements

Your bullet point 2 is generally how folks write functions if they are not using shorthand. That is why my blog post starts with the example of an arrow function that has {} and return.

The shorthand is omitting the braces and return when there is one expression, Which is reflected by the fourth bullet point (or the part you just quoted). So at this point I am covering both the points you mentioned.

Thanks for the feedback.

Sure. The main thing is not to conflate expressions and statements. :)