ES6 functions or older functions?

1

Hello guys,
I just wonder if there any pros when I use es6 functions instead of usual older

function smth{

}

Except of course that sometimes es6 functions are shorter

2

Use both, its not a replacement. Basically, yes, use the arrow function syntax for callbacks - myArray.map(v => v + 1), it makes writing callbacks much less verbose as you say, and that is a good thing. If you use it for short throwaway functions it makes things a lot easier to read. Generally make the program out of functions, with arrow functions used for callbacks in those functions. But it’s main use is to deal with the problem of this, so that you don’t need to bind the this value: http://2ality.com/2012/04/arrow-functions.html

This might be a little difficult to grok if you’re not aware of the issue, but it comes up all the time with event handlers, or with timeouts, various asynchronous things where you need to pass in the current context. The arrow function was added because of a problem with JavaScript semantics that made it very easy to introduce errors into your programs.

Example

This is a very simple example, and prior to arrow functions you would’ve needed to remember to use bind. This won’t work:

class Counter {
  constructor() {
    this.num = 0;
  }

  timer() {
    setInterval(function() {
      this.num++;
      console.log(this.num);
    }, 1000);
  }
}

This happens, because inside the function used as a callback to setInterval, this does not refer to the object created by the class:

> const count = new Counter()
> counter.timer()
NaN
NaN
NaN
NaN
NaN
....

This does work:

class Counter {
  constructor() {
    this.num = 0;
  }

  timer() {
    setInterval(() =>  {
      this.num++;
      console.log(this.num);
    }, 1000);
  }
}

As expected:

> const count = new Counter()
> counter.timer()
1
2
3
4
5
6
....
3

Besides the point. You shouldn’t adopt arrow functions just because they are shorter.

  • this is not bound to the function. Useful if you want the current this in context.

  • concise syntax is good for callbacks and short, inline functions. Ex:

[1,2,3].forEach(x => x++)
fetch(url).then(data => anotherFunction(data))
  • immutable function expressions. Function expressions are hoisted to the top of the scope, and when you use const, they are immutable. ex:
const logData = data => data.someProp
However, there are times when you shouldn't use arrow functions.

  • You are using a library that needs functions to have their own this binding. The one I think about is mongoose. Arrow functions simply don’t work for a lot of methods.

  • You are declaring a function normally, and you don’t want it hoisted. This is normal usage for defining a function, and it is probably what you will do most of the time. Ex:

console.log(doSomething()) // it works!

function doSomething() {
  // do something
}

console.log(doSomething()) // it works down here too!
  • You need your function to have a name. Arrow functions are anonymous or have no name. This is usually ok for callbacks and simple functions, but it is a good practice to have named functions, and it is required for certain patterns like recursion where the function has to reference itself.
For myself, I usually try to use normal functions unless I need a callback or a short one-line function. Fictional example usage for me would be like this: 
const r = .03
const t = 2

const log = value => console.log(value)

// entry point
function main() {
  let i = calculateInterest(100)
  log(updateAccountBal(i))
}

function calculateInterest(p) {
  return p*r*t
}

updateAccountBal(i) {
  getCurrentBalance().then(bal => bal += i)
}