Какие фрагменты кода javascript содержат синтаксические ошибки

Время на прочтение
7 мин

Количество просмотров 10K

Автоматически генерируемые ошибки JavaScript – почему они происходят

Первый шаг к пониманию ошибок JavaScript – разобраться, откуда они берутся. Большинство ошибок JavaScript, встречающихся в природе, автоматически генерируются самим движком JavaScript. Существует множество типов ошибок, но, как правило, все они относятся к одному из трех классов.

TypeError

Один из наиболее распространенных классов ошибок. Такая ошибка возникает, когда некоторое значение относится не к тому типу, к которому должно относиться. Часто это возникает, когда код вызывает как функцию некоторую сущность, функцией не являющуюся. Это может быть неопределенное (“undefined”) или какое-нибудь другое значение.

window.foo()
  // => TypeError: window.foo это не функция
[].length
  // => 0
[].length()
  // => TypeError: array.length это не функция

Еще один распространенный случай, в котором возникает TypeError – при попытке обратиться к свойству неопределенного значения.

window.foo.bar
  // => TypeError: Невозможно прочитать свойство 'bar' у undefined

SyntaxError

Эти ошибки возникают, когда движок JavaScript разбирает скрипт и встречает синтаксически неверный код. Если в файле JavaScript содержится синтаксическая ошибка, то никакой код из него не выполнится.

 console.log('hello')
    notValid(

Мало того, что этот код выдаст ошибку, но и console.log перед неверным кодом даже не запустится.

ReferenceError

Такие ошибки возникают, когда код ссылается на значение, отсутствующее в актуальной области видимости. Например:

console.log(somethingMadeUp)
  // => ReferenceError: somethingMadeUp не определено

Выбрасывание ошибок вручную

Не все ошибки случайны. Их можно спровоцировать и намеренно. Когда приложение работает неправильно, предпочтительно сделать так, чтобы оно рушилось громко, явно и четко. В противном случае причина проблемы может оставаться невыясненной, либо, хуже того, даже незамеченной для разработчика.

Простейший способ вручную спровоцировать ошибку – при помощи оператора throw:

throw 'Invalid input';

В таком случае автоматически создается экземпляр объекта Error с сообщением “Invalid input”, но экземпляр ошибки также можно создать вручную и передавать его в коде.

let error = new Error('Invalid input')
  // позже
throw error;

Вручную выбрасывать ошибки JS особенно удобно авторам библиотек, поскольку так можно подсказать разработчику, пользующемуся их библиотекой, как именно совершается ошибка. Например, при вызове функции с недействительным аргументом.

function sayName(name) {
  if(typeof name !== 'string') {
    throw new Error('name must be a string, received:' + typeof name);
  }
}

Перехват ошибок в блоке try/catch

Если вы знаете, что конкретный блок кода устроен рискованно и может выбрасывать ошибку, то эту ошибку можно обернуть в блок try/catch.

try {
  someCrashyFunction()
} catch(error) {
  //  может быть, отобразить это пользователю
  // и сообщить об ошибке разработчику
  Bugsnag.notify(error);
}

Блоки try/catch также можно вкладывать друг в друга. Как только ошибка будет обработана, желательно передать ее выше по стеку вызовов, чтобы там она могла быть выброшена повторно.

try {
  someCrashyFunction()
} catch(error) {
  // Обработать ошибку здесь:
  // ...
  // а затем передать вверх по цепочке
  throw error;
}

Давайте включим глобальную обработку ошибок и выловим их все

Даже в самый аккуратно написанный код иногда могут вкрадываться ошибки. Это нормально. Ошибки случаются. Но, когда они случаются, о них важно быстро узнавать. Именно для такой цели пригодится инструмент для отчетов об ошибках, например, Bugsnag.

Как устроена глобальная обработка ошибок

Чтобы выловить и обработать все ошибки JavaScript, которые могут возникнуть в браузерном сеансе, можно прибегнуть к обработчику событий window.onerror. Так можно задать глобальный обработчик для всех необработанных ошибок, которые могли бы всплыть в коде. Именно такое событие применяется в библиотеке Bugsnag для сообщения о неотловленных ошибках в браузерных JavaScript-приложениях.

В среде Node нет объекта window, поэтому аналогичный функционал связан с использованием process.on(‘unhandledException, callback).

Глобальная обработка ошибок не может заменить детализированного контроля, который достигается при помощи операторов try/catch. Глобальная обработка ошибок применяется только для подстраховки в качестве средства от тех исключений, которые проскользнут через передовые линии защиты. Устраивая обработку ошибок ближе к источнику потенциальной проблемы, мы, пожалуй, будем лучше представлять, как справиться с ошибкой и как восстановиться после нее еще до того, как пользователь заметит проблему. А если ошибка и проползет через какую-нибудь щель, то мы можем спокойно рассчитывать на то, что глобальный обработчик ошибок все равно предъявит нам возникшие проблемы.

Неисправные промисы

С появлением ES2015 промисы в JavaScript получили поддержку на уровне сущностей первого класса, и это позволило значительно повысить ясность асинхронного кода. Один недостаток промисов заключается в том, что они часто проглатывают ошибки, возникающие у них в методе.then(). Если в этом методе будет сгенерирована ошибка, то она никогда не всплывет на уровень глобального обработчика ошибок.

fetch('https://my-api.endpoint')
.then((response) => {
  response.thisMethodDoesNotExist() // эта ошибка будет поглощена

  doSomethingElse() // этот код никогда не будет выполнен
})

Вот почему рекомендуется всегда добавлять оператор catch во все цепочки промисов, так, чтобы могли быть обработаны любые ошибки.

fetch('https://my-api.endpoint')
  .then((response) => {
      response.thisMethodDoesNotExist()
    doSomethingElse() // этот код никогда не будет выполнен
  })
  .catch((error) => {
    console.error(error)
    // # => response.thisMethodDoesNotExist это не функция
    Bugsnag.notify(error)
    // показать ошибку пользователю
  });

Так решается проблема с невидимыми ошибками. Но и у этого подхода есть некоторые недостатки. Во-первых, довольно обременительно писать такой код обработки ошибок для каждого используемого нами промиса. Во-вторых, если ошибка возникнет в операторе catch, она также будет поглощена, и мы вернемся к проблеме, с которой начинали. Чтобы обойти эту проблему, можно воспользоваться глобальным обработчиком, включающимся в случае отклонения необработанных промисов.

window.addEventListener("unhandledrejection", (event) => {
  console.error(event.reason);
  // здесь сообщаем об ошибке
});

Теперь любой отказавший промис, у которого нет явного обработчика catch, спровоцирует событие unhandledrejection.

Свойства ошибки

Как только ошибка схвачена, ее можно проинспектировать, чтобы извлечь из нее полезную информацию. В данном случае наиболее важны свойства name, message и stack.
Первые фрагменты полезной информации об ошибке – это name и message. Именно эти поля отображаются в сообщениях об ошибках и выводятся в консоль браузера.
Сообщение об ошибке устанавливается при ее инициализации.

   let error = new Error('This is my message')
    console.log(error.message)
    // => это мое сообщение

По умолчанию ошибка имеет то же имя, что и функция конструктора. Поэтому, когда ошибка создается при помощи новой Error(‘oh no!’) или throw(‘oh no!’), она называется “Error”. Если создать ошибку при помощи новой TypeError(‘oh no!’), то она будет называться “TypeError”. Имя ошибки можно переопределить, просто установив другое имя.

   let myError = new Error('some message');
    myError.name = 'ValidationError';
    throw myError;

Здесь мы переименовали ошибку в ValidationError, и, например, в дашборде Bugsnag это будет отражено. Но некоторые браузеры (напр., Chrome), все равно будут выводить в консоль просто “Error”. Чтобы справиться с этой проблемой, можно применять пользовательские классы ошибок, о которых мы поговорим ниже в этой статье.

Стектрейсы

Свойство Error.prototype.stack содержит стектрейс ошибки. Стректрейс хранится вместе с ошибкой в виде обычной последовательности символов, где разделителем между всеми функциями в стеке служат символы перехода на новую строку.

Важно отметить, что структура стектрейса зависит от того, где была инициализирована ошибка, а не где она выброшена. Таким образом, если ошибка создается в functionA и возвращается от нее, а затем выбрасывается в functionB, то на вершине стектрейса будет functionA.
Вполне вероятно, что вы минифицируете ваш код JavaScript. В таком случае строки в стектрейсе не будут совпадать со строками в оригинальном файле с исходным кодом. Чтобы найти оригинальный исходный код, используются специальные карты исходников, по которым стектрейс можно отыскать и «перевести». Об этом рассказано в статье the Anatomy of source maps.

Создание пользовательских типов ошибок

Иногда бывает полезно создавать пользовательские типы ошибок в дополнение к тем, которые уже встроены в язык JavaScript. Применить их можно, например, для того, чтобы ошибки различных типов обрабатывались в приложении по-разному.

Например, в приложении Node нам стоило бы предусмотреть специальный класс ошибок, возникающих при валидации запросов к API. Если отловлена такая ошибка валидации, то приложению будет известно, что реагировать на нее нужно кодом состояния HTTP 400.

При пользовательских ошибках также можно отловить дополнительные данные об ошибке, специфичные именно для данного класса ошибок.

Благодаря классам ES6, работа по определению пользовательских типов ошибок крайне упростилась. Например, если бы мы хотели выбрасывать ошибку конкретного типа для недействительных полей, то могли бы определить эту ситуацию вот так.

class ValidationError extends Error {
  constructor(field, reason) {
    super(reason);
    this.field = field;
    this.reason = reason;
    // следующая строка важна, так как сообщает, что конструктор ValidationError
    // не входит в состав результирующего стектрейса
    Error.captureStackTrace(this, ValidationError);
  }

 // также в этом классе можно определить пользовательские методы
  prettyMessage() {
     return `ValidationError: [${this.fields}] reason: ${this.reason}`;
     // исключение: "ValidationError: [age] причина: должно быть числом"
  }
}

Затем код ошибки может воспользоваться instanceof, чтобы определить, ошибка какого типа была выброшена, и отреагировать соответствующим образом. Например, в приложении на Express.js это достижимо при помощи специализированного промежуточного ПО.

app.use(function errorHandler (error, req, res, next) {
 if (error instance of ValidationError) {
   // выдать в ответ код 400 и включить важные детали об ошибке 
   return res.status(400).json({
      type: error.name,
      message: error.prettyMessage(),
      field: error.field,
    });
  } else {
    // Это ошибка другого рода, пусть с ней разберется обработчик ошибок, заданный по умолчанию 
    next(error)
  }
})

Хотя в этом примере и используется промежуточное ПО из Express.js, подобный подход применим и в других разновидностях приложений JavaScript, с использованием обычного try/catch.

try {
  submitForm();
} catch (error) {
  if (error instanceof ValidationError) {
    // показать ошибку пользователю
    displayErrorMessage(error.prettyMessage());
  } else {
    // передать ее обработчику ошибок, заданному по умолчанию
    throw error;
  }
}

Без пользовательских классов ошибок специализированная обработка ошибок в таком стиле была бы гораздо сложнее. Требовалось бы идти на уловки, например, сравнивать сообщение об ошибке с каким-нибудь собственноручно написанным свойством. К счастью, такое сравнение с применением классов ошибок протекает гораздо более явно.

Заключение

При отказе приложения идеально сделать так, чтобы пользователь завершил работу с ним как можно более гладко. Но для разработчика приложение должно рушиться громко, так, чтобы было явно видно, какая проблема привела к отказу, и эту проблему можно было быстро проанализировать. Грамотно пользуясь предоставляемыми в JavaScript инструментами обработки ошибок, легче обрабатывать любые туманные аномалии, возникающие в приложении.

P.S.

На сайте издательства продолжается осенняя распродажа.

console.log('Hodor'

console.log(8/2+5 - -3 / 2); // => 10.5

console.log(((8 / 2) + 5) - (-3 / 2)); // => 10.5

console.log(70 * (3 + 4) / (8 + 2));

Открыть доступ

Наши выпускники работают в компаниях:

Если программа на JavaScript написана синтаксически некорректно, то интерпретатор выводит на экран соответствующее сообщение, а также указание на файл и строчку в нём, где, по его мнению, произошла ошибка. Синтаксическая ошибка возникает в том случае, когда код был записан с нарушением грамматических правил. В человеческих языках грамматика важна, но текст с ошибками чаще всего можно понять и прочитать. В программировании всё строго. Любое мельчайшее нарушение, и программа даже не запустится. Примером может быть забытая ;, неправильно расставленные скобки и другие детали.

Вот пример кода с синтаксической ошибкой:

console.log('Hodor'

Если запустить код выше, то мы увидим следующее сообщение: SyntaxError: missing ) after argument list, а также указание на строку и файл, где возникла эта ошибка. Подобные синтаксические ошибки в JavaScript относятся к разряду SyntaxError.

По техническим причинам, такой код, запущенный на https://code-basics.com не укажет на строку и файл. Проверить этот вывод можно на https://repl.it

С одной стороны, ошибки SyntaxError — самые простые, потому что они связаны исключительно с грамматическими правилами написания кода, а не с самим смыслом кода. Их легко исправить: нужно лишь найти нарушение в записи.

С другой стороны, интерпретатор не всегда может чётко указать на это нарушение. Поэтому бывает, что забытую скобку нужно поставить не туда, куда указывает сообщение об ошибке.

Задание

Это задание не связано с уроком напрямую. Но будет полезным потренироваться с выводом на экран.

Выведите на экран What Is Dead May Never Die

Полезное

• Ошибки в JavaScript

Определения

• Синтаксическая ошибка — нарушение грамматических правил языка программирования.

• SyntaxError (ошибка парсинга) — тип ошибок в JavaScript, возникающих при наличии синтаксических ошибок в коде.

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Случайное число из диапазона

Допустим, вам зачем-то нужно целое случайное число от min до max. Вот сниппет, который поможет:

function getRandomInRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

1. Math.random () генерирует случайное число между 0 и 1. Например, нам выпало число 0.54.
2. (max — min + 1): определяет количество возможных значений в заданном диапазоне. 10 - 0 + 1 = 11. Это значит, что у нас есть 11 возможных значений (0, 1, 2, … 10).
3. Math.random () * (max — min + 1): умножает случайное число на количество возможных значений: 0.54 * 11 = 5.94.
4. Math.floor (): округляет число вниз до ближайшего целого. Так, Math.floor(5.94) = 5.
5. … + min: смещает диапазон так, чтобы минимальное значение соответствовало min. Но в нашем примере, так как min = 0, это не изменит результат. Пример: 5 + 0 = 5.
6. Итак, в нашем примере получилось случайное число 5 из диапазона от 0 до 10.

Чтобы протестировать, запустите:

console.log(getRandomInRange(1, 10)); // Тест

В чём разница между var и let

Если вы недавно пишете на JavaScript, то наверняка задавались вопросом, чем отличаются var и let, и что выбрать в каждом случае. Объясняем.

var и let — это просто два способа объявить переменную. Вот так:

var x = 10;
let y = 20;

Переменная, объявленная через var, доступна только внутри «своей» функции, или глобально, если она была объявлена вне функции.

function myFunction() {
  var z = 30;
  console.log(z); // 30
}
myFunction();
console.log(z); // ReferenceError

Это может создавать неожиданные ситуации. Допустим, вы создаёте цикл в функции и хотите, чтобы переменная i осталась в этой функции. Если вы используете var, эта переменная «утечёт» за пределы цикла и будет доступна во всей функции.

Переменные, объявленные с помощью let доступны только в пределах блока кода, в котором они были объявлены.

if (true) {
  let a = 40;
  console.log(a); // 40
}
console.log(a); // ReferenceError

В JavaScript блок кода — это участок кода, заключённый в фигурные скобки {}. Это может быть цикл, код в условном операторе или что-нибудь ещё.

if (true) {
  let blockScoped = "Я виден только здесь";
  console.log(blockScoped); // "Я виден только здесь"
}

// здесь переменная blockScoped недоступна
console.log(blockScoped); // ReferenceError

Если переменная j объявлена в цикле с let, она останется только в этом цикле, и попытка обратиться к ней за его пределами вызовет ошибку.

Читать дальше

Быстрый гайд по if, else, else if в JavaScript

Допустим, вы собираетесь идти на прогулку. Если на улице солнечно, вы возьмёте с собой солнечные очки.

Это можно описать с помощью оператора if.

let weather = "sunny";

if (weather === "sunny") {
  console.log("Возьму солнечные очки");
}

А если погода не солнечная, а, скажем, дождливая, вы возьмете зонт.

Этот сценарий можно описать с помощью if-else.

let weather = "rainy";

if (weather === "sunny") {
  console.log("Возьму солнечные очки");
} else {
  console.log("Возьму зонт");
}

Условный оператор if-else if-else

Теперь представим, что у вас есть несколько вариантов транспорта для дороги на работу: машина, велосипед, общественный транспорт. Выбор будет зависеть от различных условий, например, погоды и времени суток. Логично, что в дождь безопаснее ехать на автобусе, а в хорошую погоду можно прокатиться на машине или велосипеде, если утро и пробки. То есть схема такая:

И всё это очень легко описывается кодом:

let weather = "sunny";
let time = "morning";

if (weather === "rainy") { // если дождь, то только так
  console.log("Еду на автобусе");
} else if (time === "morning") { // если не дождь и утро
  console.log("Еду на велике мимо пробок");
} else { // если второе не дождь и не утро
  console.log("Еду на машине");
}

Ветвление только может показаться сложным, но вообще оно очень логичное, если понять, какие действия после каких условий выполняются. Разберитесь один раз и поймёте на всю жизнь, 100%.

🐈

Ошибка TypeError: что это и как её исправить

Ошибки TypeError появляются, когда разработчики пытаются выполнить операцию с неправильным типом данных. Давайте разберём несколько примеров: почему появилась ошибка и как её исправить.

Читать дальше

3 способа объявить функцию в JavaScript

Функции в JavaScript можно объявить тремя способами: через декларативное объявление, функциональное выражение или с помощью стрелок. Звучит сложно, но на самом деле всё совсем не так.

Читать дальше

Как сделать простой слайдер на HTML и JavaScript

Вы сверстали сайт и сделали его красивым с помощью CSS. Осталось добавить интерактива, и можно добавлять проект в портфолио.

«Оживить» на сайте можно что угодно: меню, модальные окна, корзину, пагинацию… В этой статье мы разберём слайдер — посмотрим, как его сделать на чистом JavaScript. Слайдер пригодится для раздела с отзывами, фотографиями сотрудников, изображениями товаров или чего-нибудь ещё — всё зависит только от вашей фантазии и проекта.

☝ Мы покажем лишь один из возможных вариантов. Это не эталонное решение, да в разработке и не бывает единственно верного способа решить задачу. Но код точно работает, поэтому можете скопировать его в свой проект.

Читать дальше

Полезные команды для работы с Node.js

Перед тем как рассматривать полезные команды при работе с Node.js, её необходимо установить.

Команды помогают узнать версию Node.js,

node -h — показывает список всех доступных команд Node.js.

node -v, node --version — показывает установленную версию Node.js.

npm -h — показывает список всех доступных команд пакетного менеджера npm.

npm -v, npm --version — показывает установленную версию npm.

Команда npm update npm -g позволяет обновить версию npm.

npm list --depth=0 показывает список установленных пакетов.

Команда npm outdated --depth=0 покажет список установленных пакетов, которые требуют обновления. Если все пакеты обновлены, список будет пустым.

npm install package — позволяет установить любой пакет по его имени. Если при этом к команде добавить префикс -g пакет будет установлен глобально на весь компьютер.

Команда npm i package является укороченной альтернативой предыдущей команды.

Если вы хотите установить конкретную версию пакета, воспользуйтесь префиксом @ с номером версии. Например, npm install package@1.0.1.

npm uninstall package — удаляет установленный пакет по имени.

Команда npm list package — покажет версию установленного пакета, а команда npm view package version — последнюю версию пакета, которая существует.

Для работы с пакетным менеджером также пригодится файл package.json, который должен лежать в директории, с которой происходит работа в консоли.

Он содержит различные мета-данные, например, имя проекта, версия, описания и автор. Также он содержит список зависимостей, которые будут установлены, если вызвать из этой папки команду npm install.

Кроме этого он ещё имеет скрипты, которые вызывают другие команды консоли. Например, для этого файла вызов команды npm start вызовет запуск задачи Grunt с именем dev. А команда npm run build вызовет скрипт build, который запустит задачу в Grunt с именем build.

Во время работы часто возникает необходимость установить некоторые пакеты. Если установить пакет с префиксом --save, то он автоматически запишется в package.json в раздел dependencies. Такая же команда с префиксом --save-dev запишет пакет в раздел devDependencies.

Что такое nvm

nvm (илиNode Version Manager) — утилита, которая позволяет быстро менять версии Node.js.

Чтобы её установить, достаточно запустить скрипт

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash

Теперь можно установить последнюю версию Node.js, например,5.0 с помощью команды nvm install 5.0. Чтобы начать использовать её, введите команду nvm use 5.0. Таким образом, можно быстро переключаться между версиями, например, для тестирования.

Как составлять регулярные выражения

Регулярное выражение — это последовательность символов (селекторов). Оно используется для поиска и обработки строк, слов, чисел и других текстовых данных.

Регулярные выражения выручают при решении разных задач. Например, с их помощью легко искать и менять строки в коде. Но чаще всего регулярные выражения используют для валидации форм. Давайте посмотрим, как это делать.

Зачем нужны регулярные выражения

Читать дальше

Проверка типа интерфейса в TypeScript

Проверка типов интерфейса — одна из ключевых возможностей TypeScript. Она помогает убедиться, что объект или класс содержат необходимый набор свойств и методов, указанных в интерфейсе. Благодаря проверке типов вы можете писать более надёжный код, ведь часть ошибок будет найдена ещё на этапе компиляции.

В чём разница между интерфейсами и типами

Читать дальше

9 книг по JavaScript для начинающих в 2023

Все вокруг говорят, что книги — прошлый век. Но вовремя прочитанная хорошая книжка может здорово помочь в изучении нового языка или технологии, а то и вообще целиком объяснить какую-нибудь важную штуку. Например, какие бывают алгоритмы, или зачем нужен рефакторинг. К тому же, хоть фреймворки меняются каждый год, основы обычно долго не меняются.

Мы опросили знакомых разработчиков, узнали, что читают они сами, и предлагаем вам подборку хороших книг по JavaScript.

Читать дальше