1 The Ternary Operator

Jest to skrócona operacja warunkowa. Zamiast

const x = 10;
let odpowiedz;

if (x > 10) {
    odpowiedz = "wieksze od 10";
} else {
    odpowiedz =  "mniejsze od 10";
}

Skrót:

const odpowiedz = x > 10 ? "wieksze od 10" : "mniejsze od 10";

Powyższy skrót można również zagnieżdżać:

const odpowiedz = x > 10 ? "wieksze od 10" : x < 5 ? "mniejsze od 5" : "od 5 do 10";

2 Skrócenie warunków

Dzięki skróceniu warunków nie porównujemy zmiennej tylko do jednej rzeczy, ale sprawdzamy, czy zmienna logicznie nie jest fałszywe, czyli gdy obiekt istnieje i nie jest nullem, undefined, 0 itd. Zamiast:

if (zmienna !== null) {
  ...
}

Skrót:

if (zmienna) {
  ...
}

Możemy tego użyć również wtedy, kiedy chcemy coś zrobić, a podana wartość nie istnieje:

if (!zmienna) {
  ...
}

3 Wartość domyślna zmiennej

Przypisując wartość do zmiennej, możemy nadać jej wartość domyślną. Przypisanie działa, kiedy wartość logiczna zmiennej przedstawia ‘false’, czyli np. jest nullem, undefined, 0 itd. Zamiast:

let zmienna2;

if (!zmienna) {
  zmienna2 = 'wartosc domyslna';
} else {
  zmienna2 = zmienna;
}

Skrót

const zmienna2 = zmienna  || 'wartosc domyslna';

4 Skrócenie pętli for

Możemy iterować po tablicy w prosty sposób. Zamiast:

for (let i = 0; i < tablica.length; i++) {
  ...
}

Skrót:

for (let element of tablica) {
  ...
}

Możemy też iterować po indeksach tablicy:

for (let index in tablica) {
  ...
}

Działa to też dla obiektów. Wtedy iterujemy po kluczach w danym obiekcie:

const obiekt = {a: '1', b: '2', c: '3'}
for (let key in obj) {
  console.log(key) // a, b, c
}

5 Krótsze przypisanie do obiektu

Jeżeli do klucza obiektu przypisujemy zmienną o tej samej  nazwie, możemy to zrobić szybciej. Zamiast:

const x = 'a', y = 'b';
const obj = {
  x:x,
  y:y
};

Skrót:

const x = 'a', y = 'b';
const obj = {
  x,
  y
};

6. Template Literals

Ten skrót pozwoli nam szybciej łączyć stringi z dynamicznymi danymi. Zamiast:

const world = 'World!';
const text = 'Hello ' + world;

Skrót:

const world = 'World!';
const text = `Hello ${world}`;

7 Przypisanie destrukcyjne

Kiedy mamy obiekt z wieloma kluczami, możemy przypisać je do zmiennych o tej samej nazwie w o wiele szybszy sposób. Zamiast:

const obiekt = {
  a: 'a',
  b: 'b',
  c: 'c',
}

const a = obiekt.a;
const b = obiekt.b;
const c = obiekt.c;

Skrót:

const obiekt = {
  a: 'a',
  b: 'b',
  c: 'c',
}

const { a, b, c } = obiekt;

8 Wieloliniowy string

Kiedy chcesz zrobić tekst, który ma wiele linii, nie musisz już wstawiać specjalnych znaków. Zamiast:

const tekst = 'Lorem ipsum dolor sit amet, consectetur\n\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
    + 'ut labore et dolore magna aliqua.';

Skrót:

const tekst = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua.`

9 Spread operator

Spread operator pozwala nam przykładowo zastąpić dwie funkcje na tablicach. Lączenie tablic:

const tablica1 = [1, 2, 3, 4, 5];
const tablica2 = [6, 7, 8];

const polaczoneTablice = tablica1.concat(tablica2);

Skrót:

const tablica1 = [1, 2, 3, 4, 5];
const tablica2 = [6, 7, 8];

const polaczoneTablice = [
  ...tablica1,
  ...tablica2
];

Kopiowanie tablice:

const tablica3 = tablica1.slice();

Skrót:

const tablica3 = [ ...tablica1];

10 Wyszukiwanie w tablicy

Kiedy chcemy znaleźć coś w tablicy obiektów, zamiast iterować przez wszystkie obiekty możemy użyć funkcji .find(). Przykład:

const tablicaObiektow = [
  { typ: 1, nazwa: 'nazwa1'},
  { typ: 2, nazwa: 'nazwa2'},
  { typ: 1, nazwa: 'nazwa3'},
]

function znajdzObiekt(name) {
  for(let i = 0; i<tablicaObiektow .length; ++i) {
    if(tablicaObiektow [i].typ === 1 && tablicaObiektow [i].nazwa=== 'nazwa3') {
      return tablicaObiektow [i];
    }
  }
}

Skrót:

const tablicaObiektow = [
  { typ: 1, nazwa: 'nazwa1'},
  { typ: 2, nazwa: 'nazwa2'},
  { typ: 1, nazwa: 'nazwa3'},
];

const szukanyObiekt = tablicaObiektow .find(obiekt => obiekt.typ ===1 && obiekt.nazwa=== 'nazwa3');