Super quick question as I'm getting used to arrow functions. I know they implicitly return, and that we can implicitly return as long as its an expression. However, for example, can I reduce the following $scope.setEdit = () => { $scope.edit = true; } to $scope.setEdit = () => $scope.edit = true; without encountering any undesired behavior? I'm unsure how arrow functions behave when simply assigning a variable. I've only used in place where I normally would have a return statement, never with simple assignment.

This is just an example. Thanks!

Super quick question as I'm getting used to arrow functions. I know they implicitly return, and that we can implicitly return as long as its an expression. However, for example, can I reduce the following $scope.setEdit = () => { $scope.edit = true; } to $scope.setEdit = () => $scope.edit = true; without encountering any undesired behavior? I'm unsure how arrow functions behave when simply assigning a variable. I've only used in place where I normally would have a return statement, never with simple assignment.

This is just an example. Thanks!

• javascript
• angularjs
• ecmascript-6
• arrow-functions

Share Improve this question Follow asked Apr 29, 2019 at 15:14 swedishcheefswedishcheef 56722 gold badges1212 silver badges2828 bronze badges 4

• Does any code use the return value? – Nicholas Tower Commented Apr 29, 2019 at 15:16
• 2 This has little to do with arrow functions, but with expression evaluation. Whatever the expression evaluates to (with possible side effects) will be the returned value. So if you know what the expression a = b does and returns, then you have your answer. – trincot Commented Apr 29, 2019 at 15:18
• 2 "I know they implicitly return" - no they don't. They only do this when you omit the curly braces. myFunc = () => { a = b + c } will return undefined, but myFunc = () => a = b + c; will return the new value of a. – Chris Barr Commented Apr 29, 2019 at 15:22
• 1 Thanks for the answers, guys. This is clear to me now. – swedishcheef Commented Apr 29, 2019 at 15:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

This has little to do with arrow functions, but with expression evaluation. Whatever the expression evaluates to (with possible side effects) will be the returned value.

This arrow-expression function:

() => a = b

does and returns the same as:

() => {
    return a = b;
}

It is a function with side effects: a gets a value. Assignments can occur in expressions and return the assigned value. So it is equivalent to:

() => {
    a = b;
    return b;
}

I think you have a misunerstanding of how arrow functions work. They only implicitly return when you use the shorthand version.

Here's what I mean - these three function are functionally identical, they all return the string 'hello'

function a() { return 'hello' }
const b = () => { return 'hello' }; //arrow Fn /w braces needs a return statement to return anything
const c = () => 'hello';            //shorthand arrow Fn w/o braces returns whatever the arrow points to

Here's a demo of this in action, using all the different function styles

//regular function with no return value
var a = 'bar';
const myFunc1 = function() { a = 'foo'; }
console.log(myFunc1(), a);

//regular function with a return value
a = 'bar';
const myFunc2 = function() { return a = 'foo'; }
console.log(myFunc2(), a);

//arrow function with a return value
a = 'bar';
const myFunc3 = () => { return b = 'foo'; }
console.log(myFunc3(), a);

//arrow function with no return value
a = 'bar';
const myFunc4 = () => { b = 'foo'; }
console.log(myFunc4(), a);

//arrow function using shorthand, which has an implicit return value
a = 'bar';
const myFunc5 = () => b = 'foo';
console.log(myFunc5(), a);

An assignment is just an expression, just as any other expression:

  const a = () => b = 1;

  console.log(
    c = 1,
    a()
  );

without encountering any undesired behavior?

It depends if the caller expects something to be returned. If not, the returned result will go into nowhere, then it makes no difference.