Here list of things that we can get rid in javascript, with the advent of ES6:

No more + (addition operator) to perform string concatenation:

With the help of Template Strings we no more need +

Instead of:

1
2
3
4

var fname = "Hemanth",
    lname = "HM";

console.log("Hello " + fname + "." + lname);

We could:

1
2
3

let fname = "Hemanth", lname = "HM";

console.log(`Hello ${fname}.${lname}`); // Hello Hemanth.HM

No more use of the keyword function:

With Arrow Function Definitions we can do something like:

1

let greet = (name) => `"Hello ${name}`;

Which with ES5 would be:

1
2
3

var greet = (function (name) {
  return "Hello " + name;
}).bind(this);

P.S: Lot of them say that this an abuse, as arrow functions are mainly meant for lexical scoping, but I like this ;)

Also, with better object literals:

1
2
3

var Hulk = {
  name: () => "Mr.H";
}

That would have been:

1
2
3
4
5

var Hulk = {
  name: function () {
    return "Mr.H";
  }
};

No more arguments conversions:

Yes! No more converting arguments to Array with [].slice.call(arguments) Rest parameters puts them to rest ;)

1
2
3

let sortRestArgs = (...theArgs) => theArgs.sort();

console.log(sortRestArgs(5,2,7,1)) // [1,2,5,7];

We use to:

1
2
3

var sortRestArgs  = function(){
  return [].slice.call(arguments).sort();
}

No more || the (OR) operator trick/check:

With the help of default arguments, we can re-write something like:

1
2
3
4
5
6
7

var frameWork = function(namespace) {
  namespace = namespace || {
    utils:{},
    core:{}
  };
  // some more code
}

To something like:

1

let frameWork = (namespace = {utils: {}, core: {}}) => ''

No more var that = this saving the context:

Major use of Arrow functions, is about the lexical scoping.

1
2
3
4
5
6
7
8
9
10
11

var Person = function(fname, lname, age ) {
    this.fname= fname;
    this.lname = lname;
    this.age = age;

    var that = this;  // We need to save the context.

    this.yo = function() {
        return "Yo! " + "I'm" + that.fname!
    };
}

This could be simplified to:

1
2
3
4
5
6

var Person = (fname, lname, age) => {
   this.fname= fname;
   this.lname = lname;
   this.age = age;
   this.yo = () => `Yo! I'm ${this.fname}!`; // `this` reffers to Person.
}

Similarly we could use this pattern in EventListeners, setTimeout et.al

Well, that's it for now, this list sure has some great potential to grow ;)

Update 0:

Below are few insights from Reginald Braithwaite

Ternary operators are a little different, we have had them for decades, and the consensus is that they are hard to parse visually.

They’re a clear case of brevity hindering readability. Whereas, we have had arrow-like notation for functions in other languages for decades, and the consensus is that they are easy to read. They’re new to JavaScript, so they seem difficult, but that will pass. I am very comfortable that programmers just getting into JavaScript will have no idea why anybody wouldn't like them.

My personal suggestion is to use arrows when you don’t care about the things that function give you. So use arrows, except:

• If you need to write a recursive function, use function name (...).

• If you want to have a readable stack trace (which is often!), use a named function expression or function declaration.

• If you want to put helper functions at the bottom of the code so that the main thing is at the top, use function declarations.

• If you care about this, use the function keyword, for example if you’re writing a true method or a method decorator.

• If you care about arguments, and don’t want to use parameter destructuring, use function.