JavaScript cheatsheet

Шпаргалка по JavaScript с наиболее важными концепциями, функциями, методами и другим. Полное краткое справочное пособие для новичков.

#Начало работы

#Введение

JavaScript — это легковесный, интерпретируемый язык программирования.

Шпаргалка по JSON (devsheet)
Регулярные выражения в JavaScript (devsheet)

#Консоль

// => Привет, мир!
console.log('Привет, мир!');

// => Привет devsheet
console.warn('привет %s', 'devsheet');

// Выводит сообщение об ошибке в stderr
console.error(new Error('Упс!'));

#Числа

let amount = 6;
let price = 4.99;

#Переменные

let x = null;
let name = 'Тамми';
const found = false;

// => Тамми, false, null
console.log(name, found, x);

var a;
console.log(a); // => неопределено

#Строки

let single = 'Где моя бандитская шляпа?';
let double = 'Где моя бандитская шляпа?';

// => 21
console.log(single.length);

#Арифметические операторы

5 + 5 = 10     // Сложение
10 - 5 = 5     // Вычитание
5 * 10 = 50    // Умножение
10 / 5 = 2     // Деление
10 % 5 = 0     // Остаток от деления

#Комментарии

// Эта строка обозначает комментарий

/*
Следующую конфигурацию нужно
изменить перед деплоем.
*/

#Операторы присваивания

let number = 100;

// Оба выражения добавят 10
number = number + 10;
number += 10;

console.log(number);
// => 120

#Интерполяция строк

let age = 7;

// Конкатенация строк
'Томми ' + age + ' лет.';

// Интерполяция строк
`Томми ${age} лет.`;

#Ключевое слово let

let count;
console.log(count); // => неопределено
count = 10;
console.log(count); // => 10

#Ключевое слово const

const numberOfColumns = 4;

// TypeError: Присваивание константе...
numberOfColumns = 8;

#Условные операторы JavaScript

#Оператор if

const isMailSent = true;

if (isMailSent) {
  console.log('Письмо отправлено получателю');
}

#Тернарный оператор

var x = 1;

// => true
result = x == 1 ? true : false;

#Операторы

true || false; // true
10 > 5 || 10 > 20; // true
false || false; // false
10 > 100 || 10 > 20; // false

#Логический оператор &&

true && true; // true
1 > 2 && 2 > 1; // false
true && false; // false
4 === 4 && 3 > 1; // true

#Операторы сравнения

1 > 3; // false
3 > 1; // true
250 >= 250; // true
1 === 1; // true
1 === 2; // false
1 === '1'; // false

#Логический оператор !

let lateToWork = true;
let oppositeValue = !lateToWork;

// => false
console.log(oppositeValue);

#Оператор объединения с null ??

null ?? 'Я победил'; //  'Я победил'
undefined ?? 'Я тоже'; //  'Я тоже'

false ?? 'Я проиграл'; //  false

#else if

const size = 10;

if (size > 100) {
  console.log('Большой');
} else if (size > 20) {
  console.log('Средний');
} else if (size > 4) {
  console.log('Маленький');
} else {
  console.log('Крошечный');
}
// Выведет: Маленький

#Оператор switch

const food = 'салат';

switch (food) {
  case 'oyster':
    console.log('Вкус моря');
    break;
  case 'pizza':
    console.log('Вкусная пицца');
    break;
  default:
    console.log('Приятного аппетита');
}

#== против ===

0 == false; // true
0 === false; // false, different type
1 == '1'; // true,  automatic type conversion
1 === '1'; // false, different type
null == undefined; // true
null === undefined; // false
'0' == false; // true
'0' === false; // false

Оператор == сравнивает только значения, а === сравнивает и значения, и типы.

#Функции JavaScript

#Функции

// Определение функции:
function sum(num1, num2) {
  return num1 + num2;
}

// Вызов функции:
sum(3, 6); // 9

#Анонимные функции

// Именованная функция
function rocketToMars() {
  return 'БУМ!';
}

// Анонимная функция
const rocketToMars = function () {
  return 'БУМ!';
};

#Стрелочные функции (ES6)

#С двумя аргументами

const sum = (param1, param2) => {
  return param1 + param2;
};
console.log(sum(2, 5)); // => 7

#Без аргументов

const printHello = () => {
  console.log('привет');
};
printHello(); // => привет

#С одним аргументом

const checkWeight = (weight) => {
  console.log(`Вес: ${weight}`);
};
checkWeight(25); // => Вес: 25

#Краткая запись стрелочных функций

const multiply = (a, b) => a * b;
// => 60
console.log(multiply(2, 30));

Arrow function available starting ES2015

#Ключевое слово return

// С return
function sum(num1, num2) {
  return num1 + num2;
}

// Функция не возвращает сумму
function sum(num1, num2) {
  num1 + num2;
}

#Вызов функций

// Определение функции
function sum(num1, num2) {
  return num1 + num2;
}

// Вызов функции
sum(2, 4); // 6

#Функциональные выражения

const dog = function () {
  return 'Гав!';
};

#Параметры функции

// Параметр — name
function sayHello(name) {
  return `Привет, ${name}!`;
}

#Объявление функции

function add(num1, num2) {
  return num1 + num2;
}

#Область видимости JavaScript

#Область видимости

function myFunction() {
  var pizzaName = 'Маргарита';
  // Здесь можно использовать pizzaName
}

// Здесь нельзя использовать pizzaName

#Переменные с блочной областью видимости

const isLoggedIn = true;

if (isLoggedIn == true) {
  const statusMessage = 'Вход выполнен.';
}

// Uncaught ReferenceError...
console.log(statusMessage);

#Глобальные переменные

// Переменная объявлена глобально
const color = 'blue';

function printColor() {
  console.log(color);
}

printColor(); // => синий

#let против var

for (let i = 0; i < 3; i++) {
  // Это максимальная область видимости для 'let'
  // i доступна ✔️
}
// i недоступна ❌

for (var i = 0; i < 3; i++) {
  // i доступна ✔️
}
// i доступна ✔️

var ограничен ближайшей функцией, а let — ближайшим блоком кода.

#Циклы с замыканиями

// Три раза выведет 3, не то, что мы хотели.
for (var i = 0; i < 3; i++) {
  setTimeout(_ => console.log(i), 10);
}

// Выведет 0, 1 и 2, как ожидалось.
for (let j = 0; j < 3; j++) {
  setTimeout(_ => console.log(j), 10);
}

При использовании let каждая итерация получает свою копию переменной, а при использовании var переменная общая для всех итераций.

#Массивы JavaScript

#Массивы

const fruits = ['яблоко', 'апельсин', 'банан'];

// Разные типы данных
const data = [1, 'курица', false];

#Свойство .length

const numbers = [1, 2, 3, 4];

numbers.length; // 4

#Индекс

// Доступ к элементу массива
const myArray = [100, 200, 300];

console.log(myArray[0]); // 100
console.log(myArray[1]); // 200

#Таблица мутаций

	add	remove	start	end
`push`	✔			✔
`pop`		✔		✔
`unshift`	✔		✔
`shift`		✔	✔

#Array.push()

// Добавление одного элемента:
const cart = ['яблоко', 'апельсин'];
cart.push('груша');

// Добавление нескольких элементов:
const numbers = [1, 2];
numbers.push(3, 4, 5);

Добавляет элементы в конец массива и возвращает новую длину массива.

#Array.pop()

const fruits = ['яблоко', 'апельсин', 'банан'];

const fruit = fruits.pop(); // 'банан'
console.log(fruits); // ["яблоко", "апельсин"]

Удаляет элемент с конца массива и возвращает этот элемент.

#Array.shift()

let cats = ['Боб', 'Вилли', 'Мини'];

cats.shift(); // ['Вилли', 'Мини']

Удаляет элемент с начала массива и возвращает этот элемент.

#Array.unshift()

let cats = ['Боб'];

// => ['Вилли', 'Боб']
cats.unshift('Вилли');

// => ['Паф', 'Джордж', 'Вилли', 'Боб']
cats.unshift('Паф', 'Джордж');

Добавляет элементы в начало массива и возвращает новую длину массива.

#Array.concat()

const numbers = [3, 2, 1];
const newFirstNumber = 4;

// => [ 4, 3, 2, 1 ]
[newFirstNumber].concat(numbers);

// => [ 3, 2, 1, 4 ]
numbers.concat(newFirstNumber);

Если вы хотите избежать изменения исходного массива, используйте concat.

#Множество JavaScript (Set)

#Создание Set

// Пустой объект Set
const emptySet = new Set();

// Объект Set со значениями
const setObj = new Set([1, true, 'привет']);

#Добавление

const emptySet = new Set();

// добавление значений
emptySet.add('a'); // 'a'
emptySet.add(1); // 'a', 1
emptySet.add(true); // 'a', 1, true
emptySet.add('a'); // 'a', 1, true

#Удаление

const emptySet = new Set([1, true, 'a']);

// удаление значений
emptySet.delete('a'); // 1, true
emptySet.delete(true); // 1
emptySet.delete(1); //

#Проверка наличия

const setObj = new Set([1, true, 'a']);

// возвращает true или false
setObj.has('a'); // true
setObj.has(1); // true
setObj.has(false); // false

#Очистка

const setObj = new Set([1, true, 'a']);

// очищает set
console.log(setObj); // 1, true, 'a'
setObj.clear(); //

#Размер

const setObj = new Set([1, true, 'a']);

consoloe.log(setObj.size); // 3

#ForEach

const setObj = new Set([1, true, 'a']);

setObj.forEach(function (value) {
  console.log(value);
});

// 1
// true
// 'a'

#Циклы JavaScript

#Цикл while

while (condition) {
  // code block to be executed
}

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

#Обратный цикл

const fruits = ['яблоко', 'апельсин', 'банан'];

for (let i = fruits.length - 1; i >= 0; i--) {
  console.log(`${i}. ${fruits[i]}`);
}

// => 2. банан
// => 1. апельсин
// => 0. яблоко

#Цикл do…while

x = 0;
i = 0;

do {
  x = x + i;
  console.log(x);
  i++;
} while (i < 5);
// => 0 1 3 6 10

#Цикл for

for (let i = 0; i < 4; i += 1) {
  console.log(i);
}

// => 0, 1, 2, 3

#Перебор массива

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

// => Каждый элемент массива

#Break

for (let i = 0; i < 99; i += 1) {
  if (i > 5) {
    break;
  }
  console.log(i);
}
// => 0 1 2 3 4 5

#Continue

for (i = 0; i < 10; i++) {
  if (i === 3) {
    continue;
  }
  text += 'Число: ' + i + '<br>';
}

#Вложенные циклы

for (let i = 0; i < 2; i += 1) {
  for (let j = 0; j < 3; j += 1) {
    console.log(`${i}-${j}`);
  }
}

#Цикл for...in

const fruits = ['яблоко', 'апельсин', 'банан'];

for (let index in fruits) {
  console.log(index);
}
// => 0
// => 1
// => 2

#Цикл for...of

const fruits = ['яблоко', 'апельсин', 'банан'];

for (let fruit of fruits) {
  console.log(fruit);
}
// => яблоко
// => апельсин
// => банан

#Итераторы JavaScript

#Функции, присвоенные переменным

let plusFive = (number) => {
  return number + 5;
};
// f присваивается значение plusFive
let f = plusFive;

plusFive(3); // 8
// Так как f — функция, её можно вызвать.
f(9); // 14

#Функции обратного вызова (Callback)

const isEven = (n) => {
  return n % 2 == 0;
};

let printMsg = (evenFunc, num) => {
  const isNumEven = evenFunc(num);
  console.log(`${num} — чётное число: ${isNumEven}.`);
};

// Передаём isEven как callback-функцию
printMsg(isEven, 4);
// => 4 — чётное число: True.

#Array.reduce()

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((accumulator, curVal) => {
  return accumulator + curVal;
});

console.log(sum); // 10

#Array.map()

const members = ['Тейлор', 'Дональд', 'Дон', 'Наташа', 'Бобби'];

const announcements = members.map((member) => {
  return member + ' присоединился к конкурсу.';
});

console.log(announcements);

#Array.forEach()

const numbers = [28, 77, 45, 99, 27];

numbers.forEach((number) => {
  console.log(number);
});

#Array.filter()

const randomNumbers = [4, 11, 42, 14, 39];
const filteredArray = randomNumbers.filter((n) => {
  return n > 5;
});

#Объекты JavaScript

#Доступ к свойствам

const apple = {
  color: 'Зелёный',
  price: { bulk: '3$/кг', smallQty: '4$/кг' }
};
console.log(apple.color); // => Зелёный
console.log(apple.price.bulk); // => 3$/кг

#Именование свойств

// Example of invalid key names
const trainSchedule = {
  // Invalid because of the space between words.
  platform num: 10,
  // Expressions cannot be keys.
  40 - 10 + 2: 30,
  // A + sign is invalid unless it is enclosed in quotations.
  +compartment: 'C'
}

#Несуществующие свойства

const classElection = {
  date: '12 января'
};

console.log(classElection.place); // undefined

#Мутация

const student = {
  name: 'Шелдон',
  score: 100,
  grade: 'A'
};

console.log(student);
// { name: 'Шелдон', score: 100, grade: 'A' }

delete student.score;
student.grade = 'F';
console.log(student);
// { name: 'Шелдон', grade: 'F' }

student = {};
// TypeError: Присваивание константе.

#Сокращённая запись присваивания

const person = {
  name: 'Том',
  age: '22'
};
const { name, age } = person;
console.log(name); // 'Том'
console.log(age); // '22'

#Оператор delete

const person = {
  firstName: 'Матильда',
  age: 27,
  hobby: 'вязание',
  goal: 'изучить JavaScript'
};

delete person.hobby; // или delete person[hobby];

console.log(person);
/*
{
  firstName: "Матильда"
  age: 27
  goal: "изучить JavaScript"
}
*/

#Объекты как аргументы

const origNum = 8;
const origObj = { color: 'синий' };

const changeItUp = (num, obj) => {
  num = 7;
  obj.color = 'красный';
};

changeItUp(origNum, origObj);

// Выведет 8, так как числа передаются по значению.
console.log(origNum);

// Выведет 'красный', так как объекты передаются
// по ссылке и являются изменяемыми.
console.log(origObj.color);

#Сокращённое создание объекта

const activity = 'Сёрфинг';
const beach = { activity };
console.log(beach); // { activity: 'Сёрфинг' }

#Ключевое слово this

const cat = {
  name: 'Пайпи',
  age: 8,
  whatName() {
    return this.name;
  }
};
console.log(cat.whatName()); // => Пайпи

#Фабричные функции

// Фабричная функция, принимающая параметры 'name',
// 'age' и 'breed' и возвращающая объект собаки.
const dogFactory = (name, age, breed) => {
  return {
    name: name,
    age: age,
    breed: breed,
    bark() {
      console.log('Гав!');
    }
  };
};

#Методы объекта

const engine = {
  // сокращённая запись метода, с одним аргументом
  start(adverb) {
    console.log(`Двигатель запускается ${adverb}...`);
  },
  // анонимная стрелочная функция без аргументов
  sputter: () => {
    console.log('Двигатель тарахтит...');
  }
};

engine.start('громко');
engine.sputter();

#Геттеры и сеттеры

const myCat = {
  _name: 'Дотти',
  get name() {
    return this._name;
  },
  set name(newName) {
    this._name = newName;
  }
};

// Обращение вызывает геттер
console.log(myCat.name);

// Присваивание вызывает сеттер
myCat.name = 'Янки';

#Классы JavaScript

#Статические методы

class Dog {
  constructor(name) {
    this._name = name;
  }

  introduce() {
    console.log('Это ' + this._name + ' !');
  }

  // Статический метод
  static bark() {
    console.log('Гав!');
  }
}

const myDog = new Dog('Бастер');
myDog.introduce();

// Вызов статического метода
Dog.bark();

#Класс

class Song {
  constructor() {
    this.title;
    this.author;
  }

  play() {
    console.log('Воспроизведение песни!');
  }
}

const mySong = new Song();
mySong.play();

#Конструктор класса

class Song {
  constructor(title, artist) {
    this.title = title;
    this.artist = artist;
  }
}

const mySong = new Song('Богемская рапсодия', 'Queen');
console.log(mySong.title);

#Методы класса

class Song {
  play() {
    console.log('Воспроизведение!');
  }

  stop() {
    console.log('Остановлено!');
  }
}

#extends

// Родительский класс
class Media {
  constructor(info) {
    this.publishDate = info.publishDate;
    this.name = info.name;
  }
}

// Дочерний класс
class Song extends Media {
  constructor(songData) {
    super(songData);
    this.artist = songData.artist;
  }
}

const mySong = new Song({
  artist: 'Queen',
  name: 'Богемская рапсодия',
  publishDate: 1975
});

#Модули JavaScript

#Экспорт

// myMath.js

// Default export
export default function add(x, y) {
  return x + y;
}

// Normal export
export function subtract(x, y) {
  return x - y;
}

// Multiple exports
function multiply(x, y) {
  return x * y;
}
function duplicate(x) {
  return x * 2;
}
export { multiply, duplicate };

#Импорт

// main.js
import add, { subtract, multiply, duplicate } from './myMath.js';

console.log(add(6, 2)); // 8
console.log(subtract(6, 2)) // 4
console.log(multiply(6, 2)); // 12
console.log(duplicate(5)) // 10

// index.html
<script type="module" src="main.js"></script>

#Экспорт модуля

// myMath.js

function add(x, y) {
  return x + y;
}
function subtract(x, y) {
  return x - y;
}
function multiply(x, y) {
  return x * y;
}
function duplicate(x) {
  return x * 2;
}

// Multiple exports in node.js
module.exports = {
  add,
  subtract,
  multiply,
  duplicate
};

#Импорт модуля (require)

// main.js
const myMath = require('./myMath.js');

console.log(myMath.add(6, 2)); // 8
console.log(myMath.subtract(6, 2)); // 4
console.log(myMath.multiply(6, 2)); // 12
console.log(myMath.duplicate(5)); // 10

#Промисы JavaScript

#Состояния Promise

const promise = new Promise((resolve, reject) => {
  const res = true;
  // Асинхронная операция.
  if (res) {
    resolve('Выполнено!');
  } else {
    reject(Error('Ошибка'));
  }
});

promise.then(
  (res) => console.log(res),
  (err) => console.error(err)
);

#Функция-исполнитель

const executorFn = (resolve, reject) => {
  resolve('Выполнено!');
};

const promise = new Promise(executorFn);

#setTimeout()

const loginAlert = () => {
  console.log('Вход');
};

setTimeout(loginAlert, 6000);

#Метод .then()

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Результат');
  }, 200);
});

promise.then(
  (res) => {
    console.log(res);
  },
  (err) => {
    console.error(err);
  }
);

#Метод .catch()

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(Error('Промис отклонён безусловно.'));
  }, 1000);
});

promise.then((res) => {
  console.log(value);
});

promise.catch((err) => {
  console.error(err);
});

#Promise.all()

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(3);
  }, 300);
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2);
  }, 200);
});

Promise.all([promise1, promise2]).then((res) => {
  console.log(res[0]);
  console.log(res[1]);
});

#Promise.allSettled()

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(2);
  }, 100);
});

Promise.allSettled([promise1, promise2]).then((res) => {
  console.log(res[0].status);
  console.log(res[1].status);
});

#Избегание вложенных Promise и .then()

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('*');
  }, 1000);
});

const twoStars = (star) => {
  return star + star;
};

const oneDot = (star) => {
  return star + '.';
};

const print = (val) => {
  console.log(val);
};

// Chaining them all together
promise.then(twoStars).then(oneDot).then(print);

#Создание

const executorFn = (resolve, reject) => {
  console.log('The executor function of the promise!');
};

const promise = new Promise(executorFn);

#Цепочка нескольких .then()

const promise = new Promise((resolve) =>
  setTimeout(() => resolve('dAlan'), 100)
);

promise
  .then((res) => {
    return res === 'Alan'
      ? Promise.resolve('Hey Alan!')
      : Promise.reject('Who are you?');
  })
  .then(
    (res) => {
      console.log(res);
    },
    (err) => {
      console.error(err);
    }
  );

#Фейковый HTTP-запрос с Promise

const mock = (success, timeout = 1000) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (success) {
        resolve({ status: 200, data: {} });
      } else {
        reject({ message: 'Error' });
      }
    }, timeout);
  });
};
const someEvent = async () => {
  try {
    await mock(true, 1000);
  } catch (e) {
    console.log(e.message);
  }
};

#Async-Await JavaScript

#Асинхронность

function helloWorld() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Hello World!');
    }, 2000);
  });
}

const msg = async function () {
  // Асинхронное функциональное выражение
  const msg = await helloWorld();
  console.log('Сообщение:', msg);
};

const msg1 = async () => {
  // Асинхронная стрелочная функция
  const msg = await helloWorld();
  console.log('Сообщение:', msg);
};

msg(); // Сообщение: Hello World! <-- через 2 секунды
msg1(); // Сообщение: Hello World! <-- через 2 секунды

#Разрешение промисов

let pro1 = Promise.resolve(5);
let pro2 = 44;
let pro3 = new Promise(function (resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([pro1, pro2, pro3]).then(function (values) {
  console.log(values);
});
// ожидается => Массив [5, 44, "foo"]

#Async Await Promises

function helloWorld() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Hello World!');
    }, 2000);
  });
}

async function msg() {
  const msg = await helloWorld();
  console.log('Сообщение:', msg);
}

msg(); // Сообщение: Hello World! <-- через 2 секунды

#Обработка ошибок

let json = '{ "age": 30 }'; // неполные данные

try {
  let user = JSON.parse(json); // <-- без ошибок
  console.log(user.name); // нет имени!
} catch (e) {
  console.error('Некорректные JSON-данные!');
}

#Оператор async await

function helloWorld() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Hello World!');
    }, 2000);
  });
}

async function msg() {
  const msg = await helloWorld();
  console.log('Сообщение:', msg);
}

msg(); // Сообщение: Hello World! <-- через 2 секунды

#Запросы JavaScript

#JSON

const jsonObj = {
  "name": "Rick",
  "id": "11A",
  "level": 4
};

Also see: JSON cheatsheet

#XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open('GET', 'mysite.com/getjson');

XMLHttpRequest is a browser-level API that enables the client to script data transfers via JavaScript, NOT part of the JavaScript language.

#GET

const req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', '/getdata?id=65');
req.onload = () => {
  console.log(xhr.response);
};

req.send();

#POST

const data = {
  fish: 'Salmon',
  weight: '1.5 KG',
  units: 5
};
const xhr = new XMLHttpRequest();
xhr.open('POST', '/inventory/add');
xhr.responseType = 'json';
xhr.send(JSON.stringify(data));

xhr.onload = () => {
  console.log(xhr.response);
};

#fetch api

fetch(url, {
    method: 'POST',
    headers: {
      'Content-type': 'application/json',
      'apikey': apiKey
    },
    body: data
  }).then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Request failed!');
  }, networkError => {
    console.log(networkError.message)
  })
}

#Форматированный JSON

fetch('url-that-returns-JSON')
  .then((response) => response.json())
  .then((jsonResponse) => {
    console.log(jsonResponse);
  });

#promise url parameter fetch api

fetch('url').then(
  (response) => {
    console.log(response);
  },
  (rejection) => {
    console.error(rejection.message);
  }
);

#Функция Fetch API

fetch('https://api-xxx.com/endpoint', {
  method: 'POST',
  body: JSON.stringify({ id: '200' })
})
  .then(
    (response) => {
      if (response.ok) {
        return response.json();
      }
      throw new Error('Request failed!');
    },
    (networkError) => {
      console.log(networkError.message);
    }
  )
  .then((jsonResponse) => {
    console.log(jsonResponse);
  });

#Синтаксис async await

const getSuggestions = async () => {
  const wordQuery = inputField.value;
  const endpoint = `${url}${queryParams}${wordQuery}`;
  try {
    const response = await fetch(endpoint, { cache: 'no-cache' });
    if (response.ok) {
      const jsonResponse = await response.json();
    }
  } catch (error) {
    console.log(error);
  }
};