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:

const A = { name: 1 };
Object.freeze(A);
A.name = 2; // fail

You can't be half a gangster

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".

let array1 = [1, 2, 3];
let sum = array1.map(value => value + 1);
// 2,3,4

"Ahhh nevermind I already miss those lovely brackets, let's put them back.":

let array2 = [1, 2, 3];
array2.forEach(num => {
  if (num == 2) console.log("number 2 found");
});

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):

let doSomething = x => {
  const a = x + 1;
  const b = a + 2;
  return b;
};
doSomething(1);

2. CoffeeScript:

doSomething = (x) ->
  a = x + 1
  b = a + 2
  return b

doSomething 1

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:

const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5];
// [1, 2, 3, 4, 5]
const name = "Matthieu";
const chars = [...name];
// M,a,t,t,h,i,e,u

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.

let variableHere = "just a variable";
let a = `some text
${variableHere}
other text`;

Export/Import

It's something that you must have encountered if you have read other articles about Angular 2. Here is an example:

export var a = 1;
export cb = function(x,y) {
  console.log(x,y);
}

import { a, cb } from "somewhere/over/the/rainbow";
cb(a, a);

//Or
import * as importedModule from "somewhere/over/the/rainbow";
importedModule.cb(importedModule.a, importedModule.a);

Property Shorthand

This one is by far my favourite.

Before:

const obj = {
  variableWithAnnoyingLongName: variableWithAnnoyingLongName,
  anotherVariableWithAnnoyingLongName: anotherVariableWithAnnoyingLongName
};

Now with ES6:

const obj = {
  variableWithAnnoyingLongName,
  anotherVariableWithAnnoyingLongName
};

Combined with the new Function Signature feature it gets more powerful ! [optin-cat id=1473]

Function Signature

We can now assign the parameters of a function:

• By default ex: doSomething(a=1, b=2)
• By destructuring:

const arr1 = [1, 2, 3];
function destructure([a, b]) {
  console.log(a, b);
  //1 2
}
destructure(arr1);

• 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:

function doSomething({ age, name, id }) {
  console.log(age, id, name);
  //26 2
}
const age = 26;
const id = 2;

doSomething({ age, id });

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:

class Animal {
  constructor(id, name) {
    this.id = id;
    this.name = name;
  }
}

Inheritance:

class Bird extends Animal {
  constructor(id, name, featherType) {
    super(id, name);
    this.featherType = featherType;
  }
}

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.

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.