Es6 and Es7 Refactor — Sugar Syntax

Refactoring

1. Functionality Unchanged
2. Performance improvement
3. Maintainability better
4. Understandability
5. Code deletion & Unused Code

Template literals

const firstName = ‘everyone’;

console.log(`Welcome ${firstName} to ES6 & ES& Refactor!`)

ES5

var classes = ‘header’
classes += (isLargeScreen() ? ‘’ : item.isCollapsed ?
‘ icon-expander’ : ‘ icon-collapser’);

ES6

const classes = `header ${ isLargeScreen() ? ‘’ : (item.isCollapsed ? ‘icon-expander’ : ‘icon-collapser’) }`;

Objects sugar syntax

ES5

const x = 50

const y = 60

const obj = { x:x, z:y}

ES6

const x = 50

const y = 60

const obj = { x, z:y}

Destructuring

1. Default parameters
2. Rest
3. Spread
4. Array and Objects

Default Parameters

const [a=4,b=5] = [50];

// values

a = 50

b = 5

Default in Functions

const add = (x=4,y=5) => x +y;

let key = ‘z’;
let {[key]: foo} = {z: ‘bar’};
console.log(foo); // “bar”

Rest

const [a, b, …rest] = [10, 20, 30, 40, 50];

a = 10

b= 20

rest = [30, 40, 50]

({c, d, …rest} = {c: 10, d: 20, e: 30, f: 40});

rest = {e: 30, f: 40}

Concat Array

const x = [ 3, 4, 5];

const y = [ …x , 6, 7];

function f(x, y, z) {
return x + y + z;
}
// Pass each elem of array as argument
f(…[1,2,3]) == 6