Základy programovania v JavaScripte

Lekcia 12

Milan Herda, 08/2020

Video k tejto lekcii:

Nový JavaScript

ES2015 a ďalej

Verzie JavaScriptu

1 jún 1997
2 jún 1998
3 december 1999
4 jún 2003
5 december 2009
5.1 jún 2011
ES 2015 jún 2015
ES 2016 jún 2016
ES 2017 jún 2017
ES 2018 jún 2018
ES 2019 jún 2019
ES 2020 jún 2020

Najväčšie rozšírenie JS od jeho vzniku

ES 2015

Vybrané novinky z ES 2015 a neskorších verzií

Deklarácia premenných

  • let

  • const

Dva nové spôsoby deklarácie

Blokový scope

Arrow funkcie

  • kratší zápis
  • uchovávanie kontextu (this, arguments)

Arrow funkcie - kratší zápis

var pow = function (arg) {
    return arg * arg;
};
const pow = (arg) => {
    return arg * arg;
};
const pow = (arg) => arg * arg;
// Pozor, zátvorky okolo argumentov sa dajú odobrať
// iba v prípade jednoargumentovej funkcie
// Funkcia bez argumentov musí mať zátvorky uvedené!
const getName = () => 'zelenina';
const pow = arg => arg * arg;

Arrow funkcie - zdieľanie kontextu

const tyrion = {
    name: 'Tyrion',
    tags: ['piť', 'nadávať', 'veci'],

    printKnowledge: function () {
        this.tags.forEach(function (tag) {
            console.log(this.name + ' vie ' + tag);
        });
    }
};

tyrion.printKnowledge();

Arrow funkcie - zdieľanie kontextu

const tyrion = {
    name: 'Tyrion',
    tags: ['piť', 'nadávať', 'veci'],

    printKnowledge: function () {
        const that = this;

        this.tags.forEach(function (tag) {
            console.log(that.name + ' vie ' + tag);
        });
    }
};

tyrion.printKnowledge();

Arrow funkcie - zdieľanie kontextu

const tyrion = {
    name: 'Tyrion',
    tags: ['piť', 'nadávať', 'veci'],

    printKnowledge: function () {
        this.tags.forEach((function (tag) {
            console.log(this.name + ' vie ' + tag);
        }).bind(this));
    }
};

tyrion.printKnowledge();

Arrow funkcie - zdieľanie kontextu

const tyrion = {
    name: 'Tyrion',
    tags: ['piť', 'nadávať', 'veci'],

    printKnowledge: function () {
        this.tags.forEach((tag) => {
            console.log(this.name + ' vie ' + tag);
        });
    }
};

tyrion.printKnowledge();

Rozšírené objektové literály

const name = 'Ferko';
const lastName = 'Mrkvička';
const x = 'abc';
const y = 'def';

const fero = {};

/* Pre objekt fero:
 * - vytvorte property name a lastName,
 *   ktoré budú mať hodnoty z premenných vyššie
 * - vytvorte metódu foo, ktorá vráti reťazec 'metóda foo'
 * - vytvorte property, ktorej názov je poskladaný z hodnôt
 *   uložených v premenných x a y. Hodnotou tejto novej property
 *   bude reťazec: 'počítaná property'
 */

console.log(fero.name);
console.log(fero.lastName);
console.log(fero.foo());
console.log(fero.abcdef);

Rozšírené objektové literály

const name = 'Ferko';
const lastName = 'Mrkvička';
const x = 'abc';
const y = 'def';

const fero = {
    name: name,
    lastName: lastName,
    
    foo: function () {
        return 'metóda foo';
    },
};

fero[x + y] =  'počítaná property';

console.log(fero.name);
console.log(fero.lastName);
console.log(fero.foo());
console.log(fero.abcdef);
const name = 'Ferko';
const lastName = 'Mrkvička';
const x = 'abc';
const y = 'def';

const fero = {
    name,
    lastName,
    
    foo() {
        return 'metóda foo';
    },
    
    [x + y]: 'počítaná property',
};

console.log(fero.name);
console.log(fero.lastName);
console.log(fero.foo());
console.log(fero.abcdef);

Destructuring - polia

const [x, y] = [1, 2];

const pole = ['agát', 'blýskavica', 'cieľovníci'];

const [a, , c] = pole;

const [foo, bar, baz = 33] = [11, 22];

// výmena hodnôt dvoch prvkov

let [var1, var2] = ['value 1', 'value 2'];

[var2, var1] = [var1, var2];

Destructuring - objekty

const obj = {
    foo: 1,
    bar: 2,
    baz: 3,
};

const { foo, baz } = obj;

// prípadne pod iným názvom
const { foo: aliasFoo, baz } = obj;

// default hodnoty

const {foo, xyz = 42} = obj;

Destructuring - objekty

// argumenty funkcie

const params = {
    logger: 'console',
    isDev:  true,
};

foo(params);

const foo = function ({ isDev, logger }) {
    console.log(logger);
    console.log(isDev);
};

Default hodnoty argumentov funkcie

const foo = function (x, y = 5) {
    // ...
};

const bar = (x, y = 5) => {
    // ...
};

Rest operátor

const foo = (x, ...y) => {
    console.log(y);
};

foo(1, 2, 3, 4, 5);

Spread operátor

const foo = (x, y, z) => {
    console.log(x, y, z);
};

const arr = [1, 2, 3];

foo(...arr);
const osoba = {
    name: 'fero',
    priezvisko: 'mrkvicka',
};

const klonOsoby = {
    ...osoba,
};

Template string

const multiline = `toto je viacriadkový
reťazec
`;

console.log(multiline);

const str = 'reťazec';
const val = 'hodnotami';

const replaced = `toto je ${str} s nahradenými ${val}`;

console.log(replaced);

for-of cyklus

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

for (const i of arr) {
    console.log(i);
}
const foo = function* () {
    yield 1;
    yield 2;
}

for (const i of foo()) {
    console.log(i);
}
const str = 'hello world';

for (const c of str) {
    console.log(c);
}

Moduly

Modul je samostatný JS súbor, ktorý svoju funkcionalitu sprístupňuje cez exportovanie premenných a/alebo funkcií.

Ak nejaký iný JS kód chce využiť nejakú funkcionalitu modulu, tak si naimportuje iba tie premenné a/alebo funkcie, ktoré potrebuje.

Ďakujem za pozornosť

Školenie JS 2020 - lekcia 12

By Milan Herda

Školenie JS 2020 - lekcia 12

  • 588

More from Milan Herda