New javascript features overview. Part one

Home » Tutorials » JavaScript » New javascript features overview. Part one
JavaScript is extension of ECMAScript language. One of the largest ECMAScript update for developers is ECMAScript 2015 (ECMAScript 6). Today we’ll consider some of new features of ECMAScript.
In this lesson we’ll look at some modern Javascript features:

  • variables (new keywords let and const)
  • arrow functions, functions execution context
  • template variables (simplification strings concatenation)
  • destructuring
  • functions params (default params, rest params)
  • promises
Code lesson
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <script>
        'use strict';
        // (1) var, let, const
        var a = 5;
        const b = 3;
        // b = b + 3;
        console.log(b);

        function addNum(x) {
            let b = a;
            console.log(this); // не в строгом режиме - контект вызова
            return b = b + x;
        }

        console.log(addNum(5));
        console.log(a);

        // (2) - стрелочные функции

        function summa(a,b) {
            console.log(this);
            return a+b;
        }

        let sum = (a,b) => {
            console.log(this);
            return a+b
        };

        console.log(sum(5,11));
        console.log(summa(5,11));

        var man = {
            name: 'Камиль',
            sayHello: function() {
                console.log(this);
                return function() {
                    console.log(this);
                    console.log(this.name + ' привет')
                }
            },
            sayBye: function() {
                console.log(this);
                return () => {
                    console.log(this);
                    console.log(this.name + ' пока');
                }
            }
        }

        // var hiKam = man.sayHello();
        // hiKam();

        var byeKam = man.sayBye();
        byeKam();

        // (3) - шаблонные литералы
        let name = 'Камиль';
        let surname = 'Абзалов';
        console.log(name + " " + surname);
        console.log(`${name} ${surname}`);


        // (4) деструктулизация
        const arr = [1,2,3,4,5];
        const [ ,second, , ,fifth] = arr;
        console.log(second, fifth);

        let age = 29;
        let nextAge = 30;

        [age, nextAge] = [nextAge, age];

        console.log(age);
        console.log(nextAge);

        // (4) - for...of

        const secondArr = [1,2,3,4,5];

        for(const num of secondArr) {
            console.log(num);       
        }

        // (5) - параметры по умолчанию
        const printName = (name = 'Камиль') => console.log(name);

        printName();
        printName('Иван');

        // (6) - rest
        const printData = (name, ...data) => { 
            console.log(name);
            console.log(data);
        }

        printData('Камиль', 29, 'Москва');

        console.log(arr.concat(secondArr));
        console.log([...arr, ...secondArr]);


        // (7) - промисы
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => resolve("done!"), 1000);
            setTimeout(() => reject("error!"), 2000);
        });
        // console.log(promise);

        promise.then(
            resolve => console.log(1),
            reject => console.log(2)
        );

        promise.catch(
            () => console.log('error')
        );

        promise.finally(
            () => console.log('finally')
        )

        let remoteDate = fetch('http://jsonplaceholder.typicode.com/users')
                        .then(response => {return response.json()})
                        .then(text => console.log(text))
   
    </script>
</body>
</html>

0 Comments

Submit a Comment

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

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This