Day 6: ES2015

Apparently now knowing much about the ECMAScript2015 is hurting my learning about Vue.js, so a crash course on ES6 might help.

Setup

Though most modern browsers support ES6 already, a lot of old ones don’t. That’s when Babel comes in handy.
Create a package.json file echo {} > package.json, run npm install --save-dev babel-cli then install some babel presets npm install babel-preset-es2015 --save-dev, load the presets echo '{"presets": ["es2015"] }' > .babelrc, then you can add a script section in package.json so that we can later use npm run build to compile the javascript easier.

"scripts": {
    "build": "babel src -d output"
  }

let, const vs var

Old javascript has this problem Hoisting.

function fire(bool) {
    if (bool) {
        var foo = 'bar';
        console.log(foo);
    } else {
        console.log(foo);
    }
}

Even though you declare foo in the if block, javascipt is actually declaring it in the top scope. So even if you run fire(false), there’s no error getting thrown to you, instead you get an undefined.
With let you can have block level declaration. So:

function fire(bool) {
    if (bool) {
        let foo = 'bar';
        console.log(foo);
    } else {
        console.log(foo);
    }
}

Now you have the same behaviour as what you would get with any other traditional language.

const seems to let you declare immutable variables, but it is not strictly immutable.

const names = ['abe', 'bob'];

if you try to reassign names

names = ['candy'];

it will stop you.

But you can do names.push('david');
A bit weird right?
Yeah it is.

if you want absolute immutability, you can use force immutability with `const names = Object.freeze([…]);

var doesn’t seem very useful now. We don’t use it anymore pretty much.

=>

=> replaces the old and long syntax.

this.tasks.forEach(task => console.log(task));

instead of

this.tasks.forEach(function(task) {
            console.log(task)
        });

Much cleaner.
If you have more parameters than one, (task, secondPara) => console.log(task, secondPara).
The parenthesis can always be there, but can be omitted if there’s a single argument.
If no argument is needed: () => console.log(task, secondPara) the parenthesis must be there.
if there are more than 1 line in the function, put {} around the body and it should be fine.
If we do choose to use the single line approach, there is am implicit return after => the arrow.

Default Parameters

function applyDiscount(cost, discount = .10) {
    return cost - (cost * discount);
}

Instead of the old

function applyDiscount(cost, discount) {
    discount = discount || .10;
    return cost - (cost * discount);
}

One cool thing is that you can pass in functions as the default parameter as well.

function applyDiscount(cost, discount = getDefault()) {
    return cost - (cost * discount);
}

Rest

function sum(...numbers) {
    return numbers.reduce((prev, current) => prev + current);
}

console.log(sum(1,2,3,4,6,7));

Rest will translate the argument into an array.

Spread

function sum2(x, y){
    return x + y;
}

let nums = [1,2];
console.log(sum2(...nums));

Spread splits an array into arguments.

Template Strings

Backticks can be used around long template strings, and the end result is still a string and you can still use stuff like trim() on them.
To insert variables in a template string, use ${ varName }.

Leave a Reply

Your email address will not be published. Required fields are marked *