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 àrrays

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

Written on October 10, 2017