Szybki trening JavaScript

Speaker

Cezary Walenciuk

Szybki trening JavaScript

2020-06-23

@walenciukC

Na ile Ty znasz JavaScript?

meme
Copyright © 2019 Cezary Walenciuk
meme
Copyright © 2019 Cezary Walenciuk
meme
Copyright © 2019 Cezary Walenciuk

Historia JavaScript

Historia JavaScript

Na czym polega nasz trening JavaScript?

O czym planuje mówić:

Rozgrzewka

Rozgrzewka 1

                    
                        console.log(null == undefined);
                    
                

💡 Co pojawi się w konsoli ?

Rozgrzewka 1

                    
                        console.log(null == undefined);
                    
                

💡 Co pojawi się w konsoli ?

                        
                            true
                        
                    

Rozgrzewka 2

                
                    console.log(false == '0');
                    console.log(false === '0');
                
            

💡 Co pojawi się w konsoli ?

Rozgrzewka 2

                
                    console.log(false == '0');
                    console.log(false === '0');
                
            

💡 Co pojawi się w konsoli ?

                    
                        true, false
                    
                

Rozgrzewka 3

                
                    (true + false) >= 2 - true;
                
            

💡 Co pojawi się w konsoli ?

Rozgrzewka 3

                
                    (true + false) >= 2 - true;
                
            

💡 Co pojawi się w konsoli ?

                    
                        true
                    
                

Składnia ES6: let i var

Jak to jest z tym var?

                
                    console.log(personId);
                    var personId = 11;
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:01:Jak to jest z tym var?

                
                    console.log(personId);
                    var personId = 11;
                
            

💡 Co pojawi się w konsoli ?

                    
                        undefined
                    
                

Składnia ES6:02:Jak to jest z tym let?

                
                    console.log(personId);
                    let personId = 11;
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:02:Jak to jest z tym let?

                
                    console.log(personId);
                    let personId = 11;
                
            

💡 Co pojawi się w konsoli ?

                    
                        Uncaught ReferenceError: personId is not defined
                    
                

Składnia ES6:03:Jak to jest z tym let?

                
                    let personId = 13;
                    console.log(personId);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:03:Jak to jest z tym let?

                
                    let personId = 13;
                    console.log(personId);
                
            

💡 Co pojawi się w konsoli ?

                    
                        13
                    
                

Składnia ES6:04:Jak to jest z tym let?

                
                    let personId
                    console.log(personId);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:04:Jak to jest z tym let?

                
                    let personId
                    console.log(personId);
                
            

💡 Co pojawi się w konsoli ?

                    
                        undefined
                    
                

Składnia ES6:05:Przestrzeń działania kodu

                
                    let personId = 15;
                    {
                       let personId = 8000;
                    }
                    console.log(personId);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:05:Przestrzeń działania kodu

                
                    let personId = 15;
                    {
                       let personId = 8000;
                    }
                    console.log(personId);
                
            

💡 Co pojawi się w konsoli ?

                    
                        15
                    
                

Składnia ES6:06:Przestrzeń działania kodu

                
                    {
                      let personId = 9000;
                    }
                    console.log(personId);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:05:Przestrzeń działania kodu

                
                    {
                      let personId = 9000;
                    }
                    console.log(personId);
                
            

💡 Co pojawi się w konsoli ?

                    
                        ReferenceError: personId is not defined
                    
                

Składnia ES6:06:Przestrzeń działania kodu

                
                    function editPersonId() {
                        personId = 16;
                    }

                    let personId = null;
                    editPersonId();
                    console.log(personId)
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:06:Przestrzeń działania kodu

                
                    function editPersonId() {
                        personId = 16;
                    }

                    let personId = null;
                    editPersonId();
                    console.log(personId)
                
            

💡 Co pojawi się w konsoli ?

                    
                        16
                    
                

Składnia ES6:07:Przestrzeń działania kodu

                
                    let id = 17;

                    for (let id = 0;id < 5;id++)
                    {

                    }
                    console.log(id);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:07:Przestrzeń działania kodu

                
                    let id = 17;

                    for (let id = 0;id < 5;id++)
                    {

                    }
                    console.log(id);
                
            

💡 Co pojawi się w konsoli ?

                    
                        17
                    
                

Składnia ES6:08:Domkniecia i var

                
                    let editFunctions = [];

                    for (var i = 5; i < 10; i++) {
                       editFunctions.push(function() {return i;});
                    }
                    
                    console.log(editFunctions[0]());
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:08:Domkniecia i var

                
                    let editFunctions = [];

                    for (var i = 5; i < 10; i++) {
                       editFunctions.push(function() {return i;});
                    }

                    console.log(editFunctions[0]());
                
            

💡 Co pojawi się w konsoli ?

                    
                        10
                    
                

Składnia ES6:09:Domkniecia i let

                
                    let editFunctions = [];

                    for (let i = 5; i < 10; i++) {
                       editFunctions.push(function() {return i;});
                    }
                    
                    console.log(editFunctions[0]());
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:08:Domkniecia i let

                
                    let editFunctions = [];

                    for (let i = 5; i < 10; i++) {
                       editFunctions.push(function() {return i;});
                    }
                    
                    console.log(editFunctions[0]());
                
            

💡 Co pojawi się w konsoli ?

                    
                        5
                    
                

Składnia ES6: const

Składnia ES6:10:Stałe

                
                    const PI = 3.14;
                    const ADDRESS = '10.0.0.1';
                    console.log(PI);
                    console.log(ADDRESS);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:10:Stałe

                
                    const PI = 3.14;
                    const ADDRESS = '10.0.0.1';
                    console.log(PI);
                    console.log(ADDRESS);
                
            

💡 Co pojawi się w konsoli ?

                    
                        3.14, 10.0.0.1
                    
                

Składnia ES6:11:Stałe 2

                
                    const PI;
                    const ADDRESS;
                    console.log(PI);
                    console.log(ADDRESS);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:11:Stałe 2

                
                    const PI;
                    const ADDRESS;
                    console.log(PI);
                    console.log(ADDRESS);
                
            

💡 Co pojawi się w konsoli ?

                    
                        Uncaught SyntaxError: Missing initializer in const declaration
                    
                

Składnia ES6:12:Stałe czy można je zmienić

                
                    const ADDRESS = 'localhost';
                    ADDRESS = '10.0.0.1'
                    console.log(ADDRESS);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:12:Stałe czy można je zmienić

                
                    const ADDRESS = 'localhost';
                    ADDRESS = '10.0.0.1'
                    console.log(ADDRESS);
                
            

💡 Co pojawi się w konsoli ?

                    
                        Uncaught TypeError: Assignment to constant variable.
                    
                

Składnia ES6:13:Przestrzeń blokowa

                
                    const PI= 3.14;

                    if (PI > 0) {
                        const PI = -3.14;
                    }
                    console.log(PI);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:13:Przestrzeń blokowa

                
                    const PI= 3.14;

                    if (PI > 0) {
                        const PI = -3.14;
                    }
                    console.log(PI);
                
            

💡 Co pojawi się w konsoli ?

                    
                        3.14
                    
                

Składnia ES6:14:Obiekty w stałych

                
                    const myConstObject = {mutableProperty: 10};
                    myConstObject.mutableProperty = 20; 
                    
                    console.log(myConstObject.mutableProperty); 
                    
                    const myConstArray = [30];
                    myConstArray.push(40);
                    
                    console.log(myConstArray); 
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:14:Obiekty w stałych

                
                    const myConstObject = {mutableProperty: 10};
                    myConstObject.mutableProperty = 20; 
                    
                    console.log(myConstObject.mutableProperty); 
                    
                    const myConstArray = [30];
                    myConstArray.push(40);
                    
                    console.log(myConstArray); 
                
            

💡 Co pojawi się w konsoli ?

                    
                        20, [30,40]
                    
                

Składnia ES6: Funkcje strzałkowe

Składnia ES6:15:Funkcje strzałkowe

                
                    var getPhone = () => "9"
                    console.log(typeof getPhone);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:15:Funkcje strzałkowe

                
                    var getPhone = () => "9"
                    console.log(typeof getPhone);
                
            

💡 Co pojawi się w konsoli ?

                    
                        function
                    
                

Składnia ES6:16:Funkcje strzałkowe 2

                
                    var getPhone = () => "9"
                    console.log(getPhone());
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:16:Funkcje strzałkowe 2

                
                    var getPhone = () => "9"
                    console.log(getPhone());
                
            

💡 Co pojawi się w konsoli ?

                    
                        9
                    
                

Składnia ES6:17:Funkcje strzałkowe 3

                
                    var getPhone =
                    version => "Note " + version
                    console.log(getPhone(10));
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:17:Funkcje strzałkowe 3

                
                    var getPhone =
                    version => "Note " + version
                    console.log(getPhone(10));
                
            

💡 Co pojawi się w konsoli ?

                    
                        Note 10
                    
                

Składnia ES6:18:Funkcje strzałkowe 4

                
                    var getPoints = 
                    (count,lifes) => count + (200 * lifes); 

                    console.log(getPoints(9000,2)); 
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:18:Funkcje strzałkowe 4

                
                    var getPoints = 
                    (count,lifes) => count + (200 * lifes); 

                    console.log(getPoints(9000,2)); 
                
            

💡 Co pojawi się w konsoli ?

                    
                        9400
                    
                

Składnia ES6:19:Funkcje strzałkowe 5

                
                    var getPoints = (count,lifes) => {
                        var lifeby  = lifes * 200;
                        return count + lifeby;
                     }
                     console.log(getPoints(9000,2))
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:19:Funkcje strzałkowe 5

                
                    var getPoints = (count,lifes) => {
                        var lifeby  = lifes * 200;
                        return count + lifeby;
                     }
                     console.log(getPoints(9000,2))
                
            

💡 Co pojawi się w konsoli ?

                    
                        9400
                    
                

Składnia ES6:20:Funkcje strzałkowe 6

                
                    document.addEventListener('click', function() {
                        console.log(this);
                     });
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:20:Funkcje strzałkowe 6

                
                    document.addEventListener('click', function() {
                        console.log(this);
                     });
                
            

💡 Co pojawi się w konsoli ?

                    
                        #document
                    
                

Składnia ES6:21:Funkcje strzałkowe 7

                
                    document.addEventListener('click',
                    () => console.log(this));
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:21:Funkcje strzałkowe 7

                
                    document.addEventListener('click',
                    () => console.log(this));
                
            

💡 Co pojawi się w konsoli ?

                    
                        Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
                    
                

Składnia ES6:22:Funkcje strzałkowe 8

                
                    var post = {
                        postId: 604,
                        read: function () {
                            console.log(this);
                        }
                    };
                    post.read();
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:22:Funkcje strzałkowe 8

                
                    var post = {
                        postId: 604,
                        read: function () {
                            console.log(this);
                        }
                    };
                    post.read();
                
            

💡 Co pojawi się w konsoli ?

                    
                        {postId: 604, read: ƒ}
                    
                

Składnia ES6:23:Funkcje strzałkowe 9

                
                    var post = {
                        postId: 604,
                        read: () => console.log(this)
                    };
                    post.read();
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:23:Funkcje strzałkowe 9

                
                    var post = {
                        postId: 604,
                        read: () => console.log(this)
                    };
                    post.read();
                
            

💡 Co pojawi się w konsoli ?

                    
                        Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
                    
                

Składnia ES6:24:Funkcje strzałkowe 10

                
                    var post = {
                        postId: 604,
                        read: function () {
                            return () => console.log(this.postId);
                        }
                    };
                    post.read()();
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:24:Funkcje strzałkowe 10

                
                    var post = {
                        postId: 604,
                        read: function () {
                            return () => console.log(this.postId);
                        }
                    };
                    post.read()();
                
            

💡 Co pojawi się w konsoli ?

                    
                        604
                    
                

Składnia ES6:25:Funkcje strzałkowe 11

                
                    var post = {
                        postId: 604,
                        read: function () {
                            return () => console.log(this.postId);
                        }
                    };
                    
                    var newPost = {
                        postId: 198,
                    };
                    post.read().call(newPost);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:25:Funkcje strzałkowe 11

                
                    var post = {
                        postId: 604,
                        read: function () {
                            return () => console.log(this.postId);
                        }
                    };
                    
                    var newPost = {
                        postId: 198,
                    };
                    post.read().call(newPost);
                
            

💡 Co pojawi się w konsoli ?

                    
                        604
                    
                

Składnia ES6:26:Funkcje strzałkowe 12

                
                    var post = {
                        postId: 604,
                        read: function () {
                            return () => console.log(this.postId);
                        }
                    };
                    
                    var newPost = {
                        postId: 198,
                    };
                    post.read().bind(newPost)();
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:26:Funkcje strzałkowe 12

                
                    var post = {
                        postId: 604,
                        read: function () {
                            return () => console.log(this.postId);
                        }
                    };
                    
                    var newPost = {
                        postId: 198,
                    };
                    post.read().bind(newPost)();
                
            

💡 Co pojawi się w konsoli ?

                    
                        604
                    
                

Składnia ES6:27:Funkcje strzałkowe 13

                
                    var getScore = ()
                    => 9000;
                    
                    console.log(typeof getScore);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:27:Funkcje strzałkowe 13

                
                    var getScore = ()
                    => 9000;
                    
                    console.log(typeof getScore);
                
            

💡 Co pojawi się w konsoli ?

                    
                        Uncaught SyntaxError: Unexpected token '=>'
                    
                

Składnia ES6:28:Funkcje strzałkowe 14

                
                    var getScore = () => 9000;

                    console.log(getScore.hasOwnProperty("prototype"));
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:28:Funkcje strzałkowe 14

                
                    var getScore = () => 9000;

                    console.log(getScore.hasOwnProperty("prototype"));
                
            

💡 Co pojawi się w konsoli ?

                    
                        false
                    
                

Składnia ES6: Domyślne wartości w parametrach

Składnia ES6:29:Domyślne wartości w parametrach

                
                    var getGame = function(id = 0,type="none") {

                        console.log(id + ", " + type);
                    }
                    
                    getGame(undefined, "RPG");
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:29:Domyślne wartości w parametrach

                
                    var getGame = function(id = 0,type="none") {

                        console.log(id + ", " + type);
                    }
                    
                    getGame(undefined, "RPG");
                
            

💡 Co pojawi się w konsoli ?

                    
                        0,RPG
                    
                

Składnia ES6:30:Domyślne wartości w parametrach 2

                
                    var getTotalScore = function(score = 0,lives = 0, 
                    addscore = lives * 200) {
                    
                        console.log(score + addscore);
                    
                    };
                    getTotalScore(5000,2);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:30:Domyślne wartości w parametrach 2

                
                    var getTotalScore = function(score = 0,lives = 0, 
                    addscore = lives * 200) {
                    
                        console.log(score + addscore);
                    
                    };
                    getTotalScore(5000,2);
                
            

💡 Co pojawi się w konsoli ?

                    
                        5400
                    
                

Składnia ES6:31:Domyślne wartości w parametrach 3 : score + addscore

                
                    var generatePoints = () => 200;

                    var getTotalScore = function(score = 0,lives = 0, 
                    addscore = lives *  generatePoints()) {
                    
                        console.log(score + addscore);
                    
                    };
                    getTotalScore(5000,2);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:31:Domyślne wartości w parametrach 3 : score + addscore

                
                    var generatePoints = () => 200;

                    var getTotalScore = function(score = 0,lives = 0, 
                    addscore = lives *  generatePoints()) {
                    
                        console.log(score + addscore);
                    
                    };
                    getTotalScore(5000,2);
                
            

💡 Co pojawi się w konsoli ?

                    
                        5400
                    
                

Składnia ES6:32:Domyślne wartości w parametrach 4 : arguments.length

                
                    var generatePoints = () => 200;

                    var getTotalScore = function(score = 0,lives = 0, 
                    addscore = lives *  generatePoints()) {
                    
                        console.log(arguments.length);
                    
                    };
                    getTotalScore(5000,2);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:32:Domyślne wartości w parametrach 4 : arguments.length

                
                    var generatePoints = () => 200;

                    var getTotalScore = function(score = 0,lives = 0, 
                    addscore = lives *  generatePoints()) {
                    
                        console.log(arguments.length);
                    
                    };
                    getTotalScore(5000,2);
                
            

💡 Co pojawi się w konsoli ?

                    
                        2
                    
                

Składnia ES6:33:Domyślne wartości w parametrach 5

                
                    var getName = function(name = defaultname, defaultname = "MR"){
                        console.log(defaultname + " " + name);
                    }
                    
                    getName();
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:33:Domyślne wartości w parametrach 5

                
                    var getName = function(name = defaultname, defaultname = "MR"){
                        console.log(defaultname + " " + name);
                    }
                    
                    getName();
                
            

💡 Co pojawi się w konsoli ?

                    
                        Uncaught ReferenceError: Cannot access 'defaultname' before initialization
                    
                

Składnia ES6:34:Domyślne wartości w parametrach 6

                
                    var getName = function(name = defaultname, defaultname = "MR"){
                        console.log(defaultname + " " + name);
                    }
                    
                    getName("Cezary");
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:34:Domyślne wartości w parametrach 6

                
                    var getName = function(name = defaultname, defaultname = "MR"){
                        console.log(defaultname + " " + name);
                    }
                    
                    getName("Cezary");
                
            

💡 Co pojawi się w konsoli ?

                    
                        MR Cezary
                    
                

Składnia ES6:35:Domyślne wartości w parametrach 7

                
                    var getName = new Function("name = 'Cezary'","return name");
                    console.log(getName());
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:35:Domyślne wartości w parametrach 7

                
                    var getName = new Function("name = 'Cezary'","return name");
                    console.log(getName());
                
            

💡 Co pojawi się w konsoli ?

                    
                        Cezary
                    
                

Rest i Spread

Składnia ES6:36:Rest

                
                    var showTags = function (postId, ...tags){

                        console.log(tags instanceof Array);

                    };
                    showTags(777,"Java","Wzorce-Projektowe","C#");
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:36:Rest

                
                    var showTags = function (postId, ...tags){

                        console.log(tags instanceof Array);

                    };
                    showTags(777,"Java","Wzorce-Projektowe","C#");
                
            

💡 Co pojawi się w konsoli ?

                    
                        true
                    
                

Składnia ES6:37:Rest 2

                
                    var showTags = function (postId, ...tags){

                        console.log(tags);
                    
                    };
                    showTags(777,"Java","Wzorce-Projektowe","C#");
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:37:Rest 2

                
                    var showTags = function (postId, ...tags){

                        console.log(tags);
                    
                    };
                    showTags(777,"Java","Wzorce-Projektowe","C#");
                
            

💡 Co pojawi się w konsoli ?

                    
                        ["Java", "Wzorce-Projektowe", "C#"]
                    
                

Składnia ES6:38:Rest 3

                
                    var showTags = function (postId, ...tags){

                        console.log(tags);
                    
                    };
                    showTags(777);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:38:Rest 3

                
                    var showTags = function (postId, ...tags){

                        console.log(tags);
                    
                    };
                    showTags(777);
                
            

💡 Co pojawi się w konsoli ?

                    
                        []
                    
                

Składnia ES6:39:Rest 4

                
                    var showTags = function (postId, ...tags){};
                    console.log(showTags.length);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:39:Rest 4

                
                    var showTags = function (postId, ...tags){};
                    console.log(showTags.length);
                
            

💡 Co pojawi się w konsoli ?

                    
                        1
                    
                

Składnia ES6:40:Rest 5

                
                    var showTags = function (postId, ...tags){

                        console.log(arguments.length);
                    
                    };
                    showTags(777,"Java","Wzorce-Projektowe","C#");
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:40:Rest 5

                
                    var showTags = function (postId, ...tags){

                        console.log(arguments.length);
                    
                    };
                    showTags(777,"Java","Wzorce-Projektowe","C#");
                
            

💡 Co pojawi się w konsoli ?

                    
                        4
                    
                

Składnia ES6:41:Rest 6

                
                    var showTags = new Function("...tags", "return tags;");

                    console.log(showTags("Java","Wzorce-Projektowe","C#"));
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:41:Rest 6

                
                    var showTags = new Function("...tags", "return tags;");

                    console.log(showTags("Java","Wzorce-Projektowe","C#"));
                
            

💡 Co pojawi się w konsoli ?

                    
                        ["Java", "Wzorce-Projektowe", "C#"]
                    
                

Składnia ES6:43:Spread

                
                    var values = [11,12,33,44,13,45];
                    var maxValue = Math.max(...values);
                    console.log(maxValue);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:43:Spread

                
                    var values = [11,12,33,44,13,45];
                    var maxValue = Math.max(...values);
                    console.log(maxValue);
                
            

💡 Co pojawi się w konsoli ?

                    
                        45
                    
                

Składnia ES6:44:Spread 2

                
                    var values = [11,12,33,44,13,45];
                    var valuesArray = [...values];
                    console.log(valuesArray );
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:44:Spread 2

                
                    var values = [11,12,33,44,13,45];
                    var valuesArray = [...values];
                    console.log(valuesArray );
                
            

💡 Co pojawi się w konsoli ?

                    
                        [11,12,33,44,13,45]
                    
                

Składnia ES6:44:Spread 3

                
                    var values = [,,,,];
                    var valuesArray = [...values];
                    console.log(valuesArray );
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:44:Spread 3

                
                    var values = [,,,,];
                    var valuesArray = [...values];
                    console.log(valuesArray );
                
            

💡 Co pojawi się w konsoli ?

                    
                        [undefined, undefined, undefined, undefined]
                    
                

Składnia ES6:45:Spread 4

                
                    var values = [1,2,3,4,];
                    var valuesArray = [...values];
                    console.log(valuesArray );
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:45:Spread 4

                
                    var values = [1,2,3,4,];
                    var valuesArray = [...values];
                    console.log(valuesArray );
                
            

💡 Co pojawi się w konsoli ?

                    
                        [1,2,3,4]
                    
                

Składnia ES6:46:Spread 5

                
                    var valuesArray = [...[1,2,3,4,]];
                    console.log(valuesArray );
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:46:Spread 5

                
                    var valuesArray = [...[1,2,3,4,]];
                    console.log(valuesArray );
                
            

💡 Co pojawi się w konsoli ?

                    
                        [1, 2, 3, 4]
                    
                

Składnia ES6:47:Spread 6

                
                    var maxNumber = Math.max(..."987654321");
                    console.log(maxNumber);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:47:Spread 6

                
                    var maxNumber = Math.max(..."987654321");
                    console.log(maxNumber);
                
            

💡 Co pojawi się w konsoli ?

                    
                        9
                    
                

Składnia ES6:48:Spread 7

                
                    var wordsArray = ["CEZ",..."WAL",
                    "PO SCIANIE"];
                    console.log(wordsArray);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:48:Spread 7

                
                    var wordsArray = ["CEZ",..."WAL",
                    "PO SCIANIE"];
                    console.log(wordsArray);
                
            

💡 Co pojawi się w konsoli ?

                    
                        ["CEZ", "W", "A", "L", "PO SCIANIE"]
                    
                

Składnia ES6: Definiowanie obiektów

Składnia ES6:50: Definiowanie obiektów

                
                    var price = 7.99, tax = 0.2;

                    var product = {
                        price,
                        tax,
                        "calulacte priceWithTax"() {
                            return this.price * this.tax;
                        }
                    
                    }; 
                    
                    console.log(product["calulacte priceWithTax"]());
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:50: Definiowanie obiektów

                
                    var price = 7.99, tax = 0.2;

                    var product = {
                        price,
                        tax,
                        "calulacte priceWithTax"() {
                            return this.price * this.tax;
                        }
                    
                    }; 
                    
                    console.log(product["calulacte priceWithTax"]());
                
            

💡 Co pojawi się w konsoli ?

                    
                        1.598
                    
                

Składnia ES6:51: Definiowanie obiektów 2

                
                    var field = 'dynamicPrice';
                    var field2 = 'dynamicTax'
                    var price = 7.99, tax = 0.2;
                    var product = {
                        [field] : price,
                        [field2 ] : tax ,
                    }; 
                    console.log(product);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:51: Definiowanie obiektów 2

                
                    var field = 'dynamicPrice';
                    var field2 = 'dynamicTax'
                    var price = 7.99, tax = 0.2;
                    var product = {
                        [field] : price,
                        [field2 ] : tax ,
                    }; 
                    console.log(product);
                
            

💡 Co pojawi się w konsoli ?

                    
                        {dynamicPrice: 7.99, dynamicTax: 0.2}
                    
                

Składnia ES6:52: Definiowanie obiektów 3

                
                    var field = 'dynamicPrice';
                    var field2 = 'dynamicTax'
                    var price = 7.99, tax = 0.2;
                    var product = {
                        [field + "-1"] : price,
                        [field2 + "-1"] : tax ,
                    }; 
                    console.log(product);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:52: Definiowanie obiektów 3

                
                    var field = 'dynamicPrice';
                    var field2 = 'dynamicTax'
                    var price = 7.99, tax = 0.2;
                    var product = {
                        [field + "-1"] : price,
                        [field2 + "-1"] : tax ,
                    };
                    console.log(product);
                
            

💡 Co pojawi się w konsoli ?

                    
                        {dynamicPrice-1: 7.99, dynamicTax-1: 0.2}
                    
                

Składnia ES6: pętla..of

Składnia ES6:53: Pętla..of

                
                    var codes = "CZEF";
                    for (var code of codes)
                    {
                        console.log(code);
                    }
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:53: Pętla..of

                
                    var codes = "CZEF";
                    for (var code of codes)
                    {
                        console.log(code);
                    }
                
            

💡 Co pojawi się w konsoli ?

                    
                        C,Z,E,F
                    
                

Składnia ES6:54: Pętla..of 2

                
                    var post = {id:11,title:"m",content:"l"};

                    for (var p of post)
                    {
                        console.log(p);
                    }
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:54: Pętla..of 2

                
                    var post = {id:11,title:"m",content:"l"};

                    for (var p of post)
                    {
                        console.log(p);
                    }
                
            

💡 Co pojawi się w konsoli ?

                    
                        Uncaught TypeError: post is not iterable
                    
                

Składnia ES6:51: Pętla..of 3

                
                    var obj = {
                        name: "Simon",
                        age: "20",
                    }
                    
                    for(var propt in obj){
                        console.log(propt + ': ' + obj[propt]);
                    }
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:53: Pętla..of 3

                
                    var obj = {
                        name: "Simon",
                        age: "20",
                    }

                    for(var propt in obj){
                        console.log(propt + ': ' + obj[propt]);
                    }
                
            

💡 Co pojawi się w konsoli ?

                    
                        name: Simon, age :20
                    
                

Template Literal

Składnia ES6:52: Template Literal

                
                    let numer = 888;
                    console.log('Numer : ${numer}');
                    let numer2 = '888';
                    console.log('Numer : ${numer2}');
                    
                    let numer3 = 999;
                    console.log(`Numer : ${numer3}`);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:52: Template Literal

                
                    let numer = 888;
                    console.log('Numer : ${numer}');
                    let numer2 = '888';
                    console.log('Numer : ${numer2}');
                    
                    let numer3 = 999;
                    console.log(`Numer : ${numer3}`);
                
            

💡 Co pojawi się w konsoli ?

                    
                        Numer : ${numer},Numer : ${numer2}, Numer : 999
                    
                
                
                    let what = `K
                    O
                    C
                    H
                    A JAVASCRIPT`;
                    console.log(what);
                
            

Składnia ES6:53: Template Literal

💡 Co pojawi się w konsoli ?

                
                    let what = `K
                    O
                    C
                    H
                    A JAVASCRIPT`;
                    console.log(what);
                
            

Składnia ES6:53: Template Literal

💡 Co pojawi się w konsoli ?

                
                    K
                    O
                    C
                    H
                    A JAVASCRIPT
                
            

Składnia ES6:54: Template Literal 3

                
                    function showCommand(command) {
                        let ile = 3;
                        console.log(command);
                    }
                    let ile = 20;
                    showCommand(`Kup ${ile} jabłek`);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:54: Template Literal 3

                
                    function showCommand(command) {
                        let ile = 3;
                        console.log(command);
                    }
                    let ile = 20;
                    showCommand(`Kup ${ile} jabłek`);
                
            

💡 Co pojawi się w konsoli ?

                    
                        20
                    
                
                
                    function process(segments,...textes) {
                        console.log(segments);
                        console.log(textes);
                    }
                    
                    let headerText = "Blog Stefana";
                    let title = "Co nowego ES2030";
                    process `-> ${headerText} wpisy ${title} <-`;
                
            

Składnia ES6:55: Template Literal 4

💡 Co pojawi się w konsoli ?

                
                    function process(segments,...textes) {
                        console.log(segments);
                        console.log(textes);
                    }
                    
                    let headerText = "Blog Stefana";
                    let title = "Co nowego ES2030";
                    process `-> ${headerText} wpisy ${title} <-`;
                
            

Składnia ES6:55: Template Literal 4

💡 Co pojawi się w konsoli ?

                
                    ["-> ", " wpisy ", " <-"]
                    ["Blog Stefana", 
                    "Co nowego ES2030"]
                
            

Składnia ES6: Dekonstrukcja

Składnia ES6:56: Dekonstrukcja

                
                    let programmersSalary = 
                    [3000,5000,7200,8500,10000,15000];

                    let [lowest,low,avarage,ok,yes,hight] = 
                    programmersSalary;

                    console.log(lowest);
                    console.log(avarage);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:56: Dekonstrukcja

                
                     let programmersSalary = 
                    [3000,5000,7200,8500,10000,15000];

                    let [lowest,low,avarage,ok,yes,hight] = 
                    programmersSalary;
                    
                    console.log(lowest);
                    console.log(avarage);
                
            

💡 Co pojawi się w konsoli ?

                    
                        3000, 7200
                    
                

Składnia ES6:57: Dekonstrukcja 2

                
                    let programmersSalary = 
                    [3000,5000,7200,8500,10000,15000];

                    let [lowest,,,,,hight] = programmersSalary;
                    console.log(hight);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:57: Dekonstrukcja 2

                
                    let programmersSalary = 
                    [3000,5000,7200,8500,10000,15000];
                    
                    let [lowest,,,,,hight] = programmersSalary;
                    console.log(hight);
                
            

💡 Co pojawi się w konsoli ?

                    
                        15000
                    
                

Składnia ES6:58: Dekonstrukcja 3

                
                    let programmersSalary = 
                    [3000,5000,7200,[8500,10000,15000]];

                    let [lowest,low,avarage,
                        [seniorlowest,senioravarage, seniorHigh]] =
                     programmersSalary;
                     
                    console.log(seniorlowest);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:58: Dekonstrukcja 3

                
                    let programmersSalary = 
                    [3000,5000,7200,[8500,10000,15000]];

                    let [lowest,low,avarage,
                        [seniorlowest,senioravarage, seniorHigh]] =
                     programmersSalary;
                     
                    console.log(seniorlowest);
                
            

💡 Co pojawi się w konsoli ?

                    
                        8500
                    
                

Składnia ES6:60: Dekonstrukcja 4

                
                    let game = {
                        title: 'Mortal Kombat 2',
                        desc: 'bla bla',
                        platform: 'Amiga'
                    };
                    
                    let {title,desc} = game;
                    console.log(title);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:60: Dekonstrukcja 4

                
                    let game = {
                        title: 'Mortal Kombat 2',
                        desc: 'bla bla',
                        platform: 'Amiga'
                    };
                    
                    let {title,desc} = game;
                    console.log(title);
                
            

💡 Co pojawi się w konsoli ?

                    
                        Mortal Kombat 2
                    
                

Składnia ES6:60: Dekonstrukcja 5

                
                    let [title,desc] = undefined;
                    console.log(`title ${title} desc ${desc}`);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:60: Dekonstrukcja 5

                
                    let [title,desc] = undefined;
                    console.log(`title ${title} desc ${desc}`);
                
            

💡 Co pojawi się w konsoli ?

                    
                        Uncaught TypeError: undefined is not iterable
                    
                

Składnia ES6:61: Dekonstrukcja 6

                
                    let [title,desc] = null;
                    console.log(`title ${title} desc ${desc}`);
                
            

💡 Co pojawi się w konsoli ?

Składnia ES6:61: Dekonstrukcja 6

                
                    let [title,desc] = null;
                    console.log(`title ${title} desc ${desc}`);
                
            

💡 Co pojawi się w konsoli ?

                    
                        Uncaught TypeError: null is not iterable
                    
                

Podsumowanie

Moduły JavaScript

                
                    <!DOCTYPE html>
                    <head>
                        <meta charset="utf-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <title>Szybki trening</title>
                        <meta name="viewport" content="width=device-width, initial-scale=1">
                        <script type="module" src="/module-first.js"   ></script>
                        <script type="module" src="/main.js" ></script>
                    </head>
                    <body>
                    </body>
                
            

💡 Co pojawi się w konsoli ?

Moduły JavaScript

                
                    // Plik main.js
                    import value from '/module-first.js';
                    console.log(value);


                    // Plik module-first.js
                    export let worstGameEver = "Last of US 2";
                    let game = "Settlers";
                    export default game;
                
            

💡 Co pojawi się w konsoli ?

                    
                        ???
                    
                

Moduły JavaScript

                
                    class Solider {
                        constructor() {
                            console.log('buduje Solider');
                        }
                    }
                    class SoftwareSolider extends Solider {
                        constructor() {
                            //super();
                            console.log('buduje SoftwareSolider');
                        }
                    }
                    let s = new SoftwareSolider();
                
            

💡 Co pojawi się w konsoli ?

                    
                        ???