ES6 syntax best parts

Where to find info about ES6 new syntax and features

Classes

Class are used everywhere in Angular, so worth double reading the manual of javascript class in ES6.

  • ;` in class are allowed but ignored
  • we can use getter of setter (that is not an angular syntax but an ES6 one )
    get errorMessage() {
     // put a logic  to get error messasage
     Return erroMessage;
    } 
    

Destructuration

private getDataUrl({org, project}) {
  console.log(org); 
  console.log(project); 
}

instead of

private getDataUrl(data) {
  console.log(data.org); 
  console.log(data.project); 
}

Fat arrow syntax

2 use cases of spread operator

Defaulting an object

{
  ...state,
  error: null,
  pending: true,
}

with lodash the equivalent would be

_.default(state, { error: null, pending: true });

Concatenating arrays

import { OrganizationComponent,
         OrganizationCreateComponent,
         OrganizationProfileComponent } from 'organizations';

import { OtherComponent1, OtherComponent2 } from 'others';

const organizationModules = [
  OrganizationComponent, 
  OrganizationCreateComponent,
];

const otherComponents = [
  OtherComponent1,
  OtherComponent2
]; 

const commonModules = [
  ...organizationModules, 
  ...otherComponents,
  { customObject: test },
]

Modules and imports

Async / Await

  • https://javascript.info/async
Written on October 10, 2017