ES5 and ES6

ECMAScript International

JavaScript is the language of the internet. And has been for decades now. Apparently there has been an international standard made to keep the internet of the world on the same page.

ECMAScript == JavaScript

Making it the standard for all web browsers across the internet.

ES6 is just version 6 of ECMAScript. Currently we are on ver 7. But I am learning 5 and 6.

Babel is a JavaScript compiler that helps convert older versions of JavaScript to a newer version of the syntax that best fits modern browsers.

Let and Const variables

            `const player = 'Farrimond';
            let experience = 100;
            let wizardLevel = false;
            
            if (experience >90){
                let wizardLevel = true;
                console.log(wizardLevel);
            }`

I’ve essentially been taught that I should not be using var at all because it’s very confusting. As if the let in this script above was changed to var instead. Console logging outside of the if statement would return false still.

Leaving the variables with let instead appears to be more consistent. At least when dealing with the wizardLevel variable. No new scope is created when the above if statement isn’t a function.

I guess meaning you have no use for var anymore

Const

Essentially you would use the const as a variable that you cannot reassign a value to this variable. Useful when working with others. Any variables that do not need or should not need to change should be assigned to the const variable.

You can change the properties of the object, but cannot reassign the variable.

            `const player = obj.player;
            const experience = obj.experience;
            let wizardLevel = obj.wizardLevel;
            
            const { player, experience } = obj;
            let { wizardLevel } = obj;`

The first part of this code is one way to set a constant variable to a piece of that data within the constant. However, below are a more simplified version of the same practice.

Object Properties

            `const a = "Bill";
            const b = true;
            const c = {};
            
            const obj = {
                a: a,
                b: b,
                c: c
            }`

If properties and values are the same, you can simply list them in the object like so:

            `const obj = {
                a,
                b,
                c
            }`

To me these look like arrays. But being able to use these in Node.js will be helpful in the long run.

Template Strings

`const greeting = “Hello” + name + “you seem to be doing” + greeting “!”;

const name = “Matt”; const age = 30; const pet = “Jack Russell Terrier”;

const greetingBest = Hello ${name} you seem to be ${age-10}. What a lovely ${pet} you have;`

Please note the syntax used for this when comparing greeting to the greetingBest variables. It is a more efficient method to construct templates and defaults for websites.

Default Arguments

Another way to do the previous example would be:

            `function greet(name='', age=30, pet='Terrier'){
                return `Hello ${name} you seem to be ${age-10}. What a lovely ${pet} you have`;
            }`

Symbols (new in ECMAScript 6)

            `let sym1 = Symbol();
            let sym2 = Symbol('foo');
            let sym3 = Symbol('foo');`

Symbols are a completely unique type. And even if you were to make sym2 === sym3 this would return as false. This is good when you have thousands of properties in objects that you don’t want to conflict with one another.

Arrow Functions

You could create a function as follows:

            `function add(a, b) {
                return a + b;
            }`

Or, you could simply use an arrow function to essentially do the same thing much simpler.

            `const add2 = (a , b) => a + b;`

Way less formatting, and a good way of keeping everything on the same line.