Szybki trening JavaScript

Symbols

Kto z was słyszał o symbolach?

Symbols : 01

                
                    let uniquEventSymbol = Symbol('click on a button');
                    console.log(typeof uniquEventSymbol);

💡 Co pojawi się w konsoli ?

Symbols : 01

                
                    let uniquEventSymbol = Symbol('click on a button');
                    console.log(typeof uniquEventSymbol);

💡 Co pojawi się w konsoli ?

                    
                        symbol

Babel jak transpiluje symbol?

Symbols : 02

                
                    let uniquEventSymbol = Symbol('click on a button');
                    console.log(uniquEventSymbol.toString());

💡 Co pojawi się w konsoli ?

Symbols : 02

                
                    let uniquEventSymbol = Symbol('click on a button');
                    console.log(uniquEventSymbol.toString());

💡 Co pojawi się w konsoli ?

                    
                        Symbol(click on a button)

Symbols : 03

                
                    const CLICK_ON_BUTTON_ID = Symbol('click on a button');
                    console.log(CLICK_ON_BUTTON_ID)

💡 Co pojawi się w konsoli ?

Symbols : 03

                
                    const CLICK_ON_BUTTON_ID = Symbol('click on a button');
                    console.log(CLICK_ON_BUTTON_ID)

💡 Co pojawi się w konsoli ?

                    
                        Symbol(click on a button)

Symbols : 04

                
                    let s1 = Symbol('event TouchSreen');
                    let s2 = Symbol('event TouchSreen');
                    
                    console.log(s1 === s2);

💡 Co pojawi się w konsoli ?

Symbols : 04

                
                    let s1 = Symbol('event TouchSreen');
                    let s2 = Symbol('event TouchSreen');
                    
                    console.log(s1 === s2);

💡 Co pojawi się w konsoli ?

                    
                        false

Symbols : 05

                
                    let s1 = Symbol.for('event TouchSreen');
                    let s2 = Symbol.for('event Click');
                    
                    console.log(s1);
                    console.log(s2);

💡 Co pojawi się w konsoli ?

Symbols : 05

                
                    let s1 = Symbol.for('event TouchSreen');
                    let s2 = Symbol.for('event Click');
                    
                    console.log(s1);
                    console.log(s2);

💡 Co pojawi się w konsoli ?

                    
                        Symbol(event TouchSreen),Symbol(event Click)

Symbols : 06

                
                    let s = Symbol('event Click');

                    let s1 = Symbol.for('event Click');
                    let s2 = Symbol.for('event Click');
                    
                    console.log(s1 === s2);
                    
                    console.log(s === s1);
                    console.log(s === s2);

💡 Co pojawi się w konsoli ?

Symbols : 06

                
                    let s = Symbol('event Click');

                    let s1 = Symbol.for('event Click');
                    let s2 = Symbol.for('event Click');
                    
                    console.log(s1 === s2);
                    
                    console.log(s === s1);
                    console.log(s === s2);

💡 Co pojawi się w konsoli ?

                    
                        true,false,false

Symbols : 07

                
                    let key = Symbol.for('event closingWindow');
                    let description = Symbol.keyFor(key);
                    console.log(description);

💡 Co pojawi się w konsoli ?

Symbols : 07

                
                    let key = Symbol.for('event closingWindow');
                    let description = Symbol.keyFor(key);
                    console.log(description);

💡 Co pojawi się w konsoli ?

                    
                        event closingWindow

Symbols : 08

                
                    let blog = {
                        title : 'Blog Name',
                        [Symbol.for('Szybki trening JS')] : 'content 1',
                        [Symbol.for('TDD z C#')] : 'content 2',
                    };
                    
                    let value = blog[Symbol.for('TDD z C#')];
                    console.log(value);

💡 Co pojawi się w konsoli ?

Symbols : 08

                
                    let blog = {
                        title : 'Blog Name',
                        [Symbol.for('Szybki trening JS')] : 'content 1',
                        [Symbol.for('TDD z C#')] : 'content 2',
                    };
                    
                    let value = blog[Symbol.for('TDD z C#')];
                    console.log(value);

💡 Co pojawi się w konsoli ?

                    
                        content 2

Symbols : 09

                
                    let blog = {
                        title : 'Blog Name',
                        [Symbol.for('Szybki trening JS')] : 'content 1',
                        [Symbol.for('TDD z C#')] : 'content 2',
                    };
                    
                    console.log(Object.getOwnPropertyNames(blog));

💡 Co pojawi się w konsoli ?

Symbols : 09

                
                    let blog = {
                        title : 'Blog Name',
                        [Symbol.for('Szybki trening JS')] : 'content 1',
                        [Symbol.for('TDD z C#')] : 'content 2',
                    };
                    
                    console.log(Object.getOwnPropertyNames(blog));

💡 Co pojawi się w konsoli ?

                    
                        ['title']

Symbols : 09

                
                    let blog = {
                        title : 'Blog Name',
                        [Symbol.for('Szybki trening JS')] : 'content 1',
                        [Symbol.for('TDD z C#')] : 'content 2',
                    };
                    
                    console.log(Object.getOwnPropertySymbols(blog));

💡 Co pojawi się w konsoli ?

Symbols : 09

                
                    let blog = {
                        title : 'Blog Name',
                        [Symbol.for('Szybki trening JS')] : 'content 1',
                        [Symbol.for('TDD z C#')] : 'content 2',
                    };
                    
                    console.log(Object.getOwnPropertySymbols(blog));

💡 Co pojawi się w konsoli ?

                    
                        [Symbol(Szybki trening JS), Symbol(TDD z C#)]

Symbols : 10

                
                    const symbol = Symbol('s'); 
                    console.log(symbol.description);

💡 Co pojawi się w konsoli ?

Symbols : 10

                
                    const symbol = Symbol('s'); 
                    console.log(symbol.description);

💡 Co pojawi się w konsoli ?

                    
                        s

Znane symbole

Znane symbole : 1

                
                    let Game = function() {

                    };
                    
                    let game = new Game();
                    console.log(game.toString());

💡 Co pojawi się w konsoli ?

Znane symbole : 1

                
                    let Game = function() {

                    };
                    
                    let game = new Game();
                    console.log(game.toString());

💡 Co pojawi się w konsoli ?

                    
                        [object Object]

Znane symbole : 2

                
                    let Game = function() {

                    };
                    
                    Game.prototype[Symbol.toStringTag] = 'Game Class Pacman';
                    
                    let game = new Game();
                    console.log(game.toString());

💡 Co pojawi się w konsoli ?

Znane symbole : 2

                
                    let Game = function() {

                    };

                    Game.prototype[Symbol.toStringTag] = 'Game Class Pacman';
                    
                    let game = new Game();
                    console.log(game.toString());

💡 Co pojawi się w konsoli ?

                    
                        [object Game Class Pacman]

Znane symbole : 3

                
                    let values1 = [1,2,3];
                    let values2 = [4,5,6]
                    console.log([].concat(values1).concat(values2));

💡 Co pojawi się w konsoli ?

Znane symbole : 3

                
                    let values1 = [1,2,3];
                    let values2 = [4,5,6]
                    console.log([].concat(values1).concat(values2));

💡 Co pojawi się w konsoli ?

                    
                        [1,2,3,4,5,6]

Znane symbole : 4

                
                    let values1 = [1,2,3]
                    let values2 = [4,5,6];
                    
                    values1[Symbol.isConcatSpreadable] = false;
                    values2[Symbol.isConcatSpreadable] = false;

                    console.log([].concat(values1).concat(values2));

💡 Co pojawi się w konsoli ?

Znane symbole : 4

                
                    let values1 = [1,2,3]
                    let values2 = [4,5,6];
                    
                    values1[Symbol.isConcatSpreadable] = false;
                    values2[Symbol.isConcatSpreadable] = false;

                    console.log([].concat(values1).concat(values2));

💡 Co pojawi się w konsoli ?

                    
                        [[1,2,3],[4,5,6]]

Znane symbole : 5

                
                    let values = [9,9,9];

                    let sum = values + 100;
                    console.log(sum);

💡 Co pojawi się w konsoli ?

Znane symbole : 5

                
                    let values = [9,9,9];

                    let sum = values + 100;
                    console.log(sum);

💡 Co pojawi się w konsoli ?

                    
                        9,9,9100

Znane symbole : 5

                
                    let values = [9,9,9];

                    values[Symbol.toPrimitive] = function (hint) {
                        console.log(hint);
                        return 27;
                    };
                    
                    let sum = values + 100;
                    console.log(sum);

💡 Co pojawi się w konsoli ?

Znane symbole : 5

                
                    let values = [9,9,9];

                    values[Symbol.toPrimitive] = function (hint) {
                        console.log(hint);
                        return 27;
                    };
                    
                    let sum = values + 100;
                    console.log(sum);

💡 Co pojawi się w konsoli ?

                    
                        'default', 127

Oto symbole dla iteracji:

Oto symbole dla wyrażeń regularnych:

Inne symbole to:

1. Idziemy dalej do tablic
2. Idziemy dalej do Modułów
3. Idziemy dalej do Klas
4. Idziemy dalej do Map,Set
5. Extensions
6. Symbols
7. Object Extensions
8. Iteratory
0. Początek