ES6 Features That Can’t Be Ignored (part 1)

Now that we have some great starter projects for Angular 2 and React, it’s easy to hit the ground running with ES6.
I summed up the features that will change the way JavaScript Developers code. You can get a full Angular 2 environment here or you can go to es6fiddle or babeljs to test it online.

Let’s get started!

Constants that are inconstant

Since JavaScript is Object Oriented, when you see ‘constant’, you can think that your object is going to stay the same forever.

Well not really.

This only concern the primitive, if you want to make an object immutable, you need to use Object.freeze, example:

You can’t be half a gangster

 

When ES6 get’s high, we go low.

– Matthieu Drula

Do you like CoffeeScript? Well they tried to get some inspiration there.
What most likely went through their mind:

“Guys, we might as well put some CoffeeScript like syntax in it since it’s very compact and readable. We will not use curly brackets anymore”.

audience-applause ES6

sad-frog

“Ahhh nevermind I already miss those lovely brackets, let’s put them back.”:

All this fumble because of implicit return. If you only have one line of code, you can skip the brackets since the returned value can only be the result of this line, if not, you need to add them.

So. Quick test.

1.  Almost CoffeeScript (ES6):

2. CoffeeScript:

Which one do you want to bring to prom night? (Hint: Number 2).

The very useful ones

The spread operator

This feature might be very useful if you are working with Angular 2 and the change detection doesn’t kick in when you update an array.

This operator is a quick way to realise a concatenation or splitting a string:

Multiline strings and variable interpretation

ES6 finally brought something that has been present for years in other languages and was dreadfully missing in JavaScript. By using the backquote symbol, you can break lines and indent your strings. You can also combine that with the use of ${} in order to use some variables.

Export/Import 

It’s something that you must have encountered if you have read other articles about Angular 2.

Here is an example:

Property Shorthand

This one is by far my favourite.

Before:

Now with ES6:

Combined with the new Function Signature feature it gets more powerful !

Function Signature

We can now assign the parameters of a function:

  • By default ex: doSomething(a=1, b=2)
  • By destructuring:
  • By changing the arguments names ex:  f({a: name, b: age})
  • Or by selecting them with a shorthand ex: f({name, age})

So now we can do cool things like:

The controversial one

Do you like JAVA? Well ES6 is now JAVA. Period. Next.

Joke aside.

There are many features that have been stolen implemented from JAVA. The most obvious ones:

Classes:

Inheritance:

Eric Elliott said about classes that they are “the marauding invasive species” you can (must) have a look at his well-described article here.

If you are ready to fight for your own style, prepare to receive friendly-fire from many of your Angular 2 colleagues.javascript inheritance troll

Conclusion

ES6 comes with new features that make JavaScript looks like a different language.
Some features are really easy to use like the multi line strings. Others will however require a little bit of time to master like the use of constants.
The next post will be about generators, promises, symbols, destructuring assignment and many other features.

2 Comments

  1. AJ AJ
    October 17, 2016    

    Pleased to see you mention the Coffeescript inspiration that ES6 appears very much inspired by.

    It’s too bad that they followed this inspiration through only half-way because as badly as I want to make the switch to ES6, you will still find me using coffeescript whenever other factors (see: team members) don’t necessitate otherwise.

    Still too much unecessary punctuation, and the function syntax change alone drives me crazy with its unecessary syntax variations ( can I use fat arrows (& do I care if it binds to a scope?), do I need brackets, am I in a class declaration that again demands slight alterations? ).

    Not too mention it can’t hold a candle to Coffeescript in straight readability (e.g., initialize mod for mod in modules when mod isnt deferredMod ~~ incredibly straightforward, understandable English that most coding langauges could only wish to emulate ).

    • Matthieu Drula Matthieu Drula
      October 19, 2016    

      Indeed it’s frustrating.
      But there are cool things that ES6 provides like shorthands that make life easier.

Leave a Reply

5 Shares