Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When should I use a return statement in ES6 arrow functions

The new ES6 arrow functions say return is implicit under some circumstances:

The expression is also the implicit return value of that function.

In what cases do I need to use return with ES6 arrow functions?

like image 893
Jess Telford Avatar asked Oct 07 '22 22:10

Jess Telford


People also ask

Do I need return in arrow function?

Arrow functions can have either a concise body or the usual block body. In a concise body, only an expression is specified, which becomes the implicit return value. In a block body, you must use an explicit return statement.

Can I use return in arrow function?

Arrow functions with curly brackets are the only way to get multiple statements or expressions inside the function body. The return statement stops the execution of a function and will return a value from the function.

When should I use arrow functions in ES6?

When you should use them. Arrow functions shine best with anything that requires this to be bound to the context, and not the function itself. Despite the fact that they are anonymous, I also like using them with methods such as map and reduce , because I think it makes my code more readable.

Why do we use return statement in JavaScript?

The return statement stops the execution of a function and returns a value. Read our JavaScript Tutorial to learn all you need to know about functions.


1 Answers

Jackson has partially answered this in a similar question:

Implicit return, but only if there is no block.

  • This will result in errors when a one-liner expands to multiple lines and the programmer forgets to add a return.
  • Implicit return is syntactically ambiguous. (name) => {id: name}returns the object {id: name}... right? Wrong. It returns undefined. Those braces are an explicit block. id: is a label.

I would add to this the definition of a block:

A block statement (or compound statement in other languages) is used to group zero or more statements. The block is delimited by a pair of curly brackets.

Examples:

// returns: undefined
// explanation: an empty block with an implicit return
((name) => {})() 

// returns: 'Hi Jess'
// explanation: no block means implicit return
((name) => 'Hi ' + name)('Jess')

// returns: undefined
// explanation: explicit return required inside block, but is missing.
((name) => {'Hi ' + name})('Jess')

// returns: 'Hi Jess'
// explanation: explicit return in block exists
((name) => {return 'Hi ' + name})('Jess') 

// returns: undefined
// explanation: a block containing a single label. No explicit return.
// more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label
((name) => {id: name})('Jess') 

// returns: {id: 'Jess'}
// explanation: implicit return of expression ( ) which evaluates to an object
((name) => ({id: name}))('Jess') 

// returns: {id: 'Jess'}
// explanation: explicit return inside block returns object
((name) => {return {id: name}})('Jess') 
like image 159
Jess Telford Avatar answered Oct 22 '22 06:10

Jess Telford