Modern JS from ES6

JavaScript , Sat Jan 14 2023

    ES6+ JavaScript

    In this section, we'll explore ES6. So... What exactly is ES6? Is is going to be hard? No, absolutely not! As a matter of fact, you're already writting ES6 JavaScript code.

    ECMAScript 6 or simply ES6 is the 6th edition of the set of standards specified by ECMA International to standardize Javascript. In simpler terms, ES6 contains various features. There have been more than 10 editions of ECMAScript with the latest release in 2020 but ES6 remains the most significant and widely implemented edition.

    You can think of it in this way: ES6 is to Javascript as your favorite update is to your favorite game. It is simply an "update", to the core functionalities of the language.

    But what exactly did it bring, you may ask. So, let's get into it!

    1. const and let

    You're already a master at these! In this eBook I am to teach you only the best practices of a language. So from the first chapter, when we started learning variables, you immediately learned about const and let.

    Before ES6 we had only var. var can still be used, but let and const make code easier to read and understand as they signal how a variable is used.

    Let's see what the differences are.

    Example:

    When using var you can reassign your variable. So, you could be creating two variables with the same name twice without knowing it. let doesn't permit that if you are in the same block:

        var age = 27;
        console.log(age); // 27
        var age = 28;
        console.log(age); // 28

        let age = 27;
        console.log(age); // 27
        let age = 28;
        console.log(age); // SyntaxError

    We can also use const to specify that the variable isn't going to be changed.

        const password = '123123';
        password = '123456'; // TypeError: Assignment to a constant variable

        let password = '123123';
        password = '123456'; // Allowed

    2. Arrow Functions

    The second ES6 addition on the list are our beloved arrow functions. We've used them a lot throughout the course and by now you should be really familiar with them.

    Arrow functions allowed us to change our code

    from:

        function multiply(x){
            return x*x;
        }

    ...to:

        const multiply = (x) => {
            return x*x;
        };

    We can even skip the brackets if we only have one return statement. So, the most compact version of this arrow function would be:

       const multiply= (x) => x*x;

    3. Default Parameters

    The third on our list are default parameters.

    With default parameters, you do add default values to your parameters.

    For example, if a function has arguments x, y, & z, and when you call this function, you do not mention the value of z.

    ES6 assumes its default value which has been given while creating function.

        const add = (x=1,y=2,z=10)=>{
            return x+y+z;
        };

    These are the default argument values which will be used if no value is specified while calling the function.

    add(10,3);// 23 // x=10 // y=3 // z=10; (since it is not defined)

    4. Template Strings

    What if I told you that you can add a variable or an object information directly as a string?

    Well, you'd say, of course we know that Adrian, we've already learned template strings :)

    Template strings are a huge addition to JavaScript, we've worked with them throughout the entire course, you should be familiar with them by now. And you guessed it, they were also introduced in ES6.

    For example, let's say that we want to show our customer the order details on our website.

    How do we do it?

        const customer = 'John';
        const order = {
            name: 'iPad',
            price: 1400,
        };
        // the old way ... ugly
        const message = 'Hello '+customer.name+','+'do you want to buy '+order.product+' for'+order.price+'bucks?';
        // the new way
        const message = 'Hello `${customer.name}`, do you want to buy an `${order.product}` for `${order.price}` bucks?';
        // That is so simple!

    This is often used in React.

    dogs.js

        const dogs = ['Bear', 'Fluffy', 'Doggo'];
        const woof = (dogName) => console.log(`${dogName} says Woof!`);
        const number = 5;
        export dogs, woof, number;

    test.js

        const onlyOneThing = 'test';
        export default onlyOneThing;

    index.js

        import {dogs, woof, number} from './dogs.js';
        console.log(dogs);
        console.log(number);
        woof(dogs[0]);
        import onlyOneThing from './test.js';
        console.log(onlyOneThing);

    Spread & Rest

    Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected

        function sum(x,y,z){
            return x+y+z;
        }
        const numbers = [1,2,3];
        console.log(sum(...numbers));
        // expected output: 6
        console.log(sum.apply(null,numbers));
        // expected output: 6

    The rest parameter syntax allows a function to accept an indefinite number of arguments as an array, providing a way to represent variadic functions in JavaScript.

        function sum(...theArgs){
            return theArgs.reduce((previous, current)=>{
                return previous+current;
            })
        }
        console.log(sum(1,2,3));
        // expected output: 6
        console.log(sum(1,2,3,4));
        // expected output: 10

    Array Destructuring

    The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

    If we want to extract data using arrays, it's quite simple using destructuring assignment. Let's refer to our first example for arrays. Instead of going through that repetitive process, we'll do this.

        const introduction=['Hello','I','am','John'];
        const [greeting,pronoun]=introduction;
        console.log(greeting); // "Hello"
        console.log(pronoun); // "I"

    Object destructuring

    The destructuring assignment also works with objects.

    We should have an existing object on the right side, that we want to split into variables. The left side contains an object-like “pattern” for corresponding properties. In the simplest case, that's a list of variable names in {...}.

        const person = {name:'John',country: 'American', job:'Developer'};
        const {name,country,job}=person;
        console.log(name);//"John"
        console.log(country);//"American"
        console.log(job);//"Developer"