Arrow function returns

There is a new way to define functions in JavaScript, known as the fat arrow. Fat arrows are intended to be used for quick anonymous functions, especially where you want to use the outer 'this' context. To help streamline this use case when you use them without a single expression instead of a block they implicitly return the value of that expression.

var nums = [1, 2, 3] var total = nums.reduce((a, b) => a + b) console.log(total) //6

A super concise bit of syntactic sugar. But what if you need multiple statements/expressions inside of your function?

var nums = [1, 2, 3] // broke var total = nums.reduce((a, b) => { console.log('Summing: ', a, b) a + b }) console.log(total) // undefined

Still concise, but we log undefined instead of 6... Arrow functions with curly braces around the body don't implicitly return the value of their last expression.

I propose that we restrict ourselves to only the first form, the single expression arrow function. When functions grow more than a single expression, pull them out, make them function statements at the highest level they can be, and give them a meaningful name.

var nums = [1, 2, 3] var total = nums.reduce(sum) console.log(total) // 6 function sum (a, b) { console.log('Summing: ', a, b) return a + b }