JavaScript | console.log()

Введение

Изучая JavaScript, в самом начале, в чужом коде или примерах можно часто видеть выражение console.log(). Что оно означает и зачем нужно?

Если говорить простыми словами, то console.log() — это способ увидеть правильность работы программы (или алгоритма).

Выражение console.log() нужно только для разработчиков и оно не представляет никакой ценности для конечного пользователя, который пользуется приложением.

Выражение console.log() записывается в исполняемых файлах приложения, в тех местах, где нужно отследить правильность работы программы.

Выражение console.log() можно запихнуть в любое место программы безболезненно. Ничего страшного при этом не произойдёт.

Что нужно знать до console.log()?

Прежде всего вам нужно понимать, что такое ОБЪЕКТ в JavaScript. То есть что является объектом в JS.

После этого нужно знать, что такое ПРИКЛАДНЫЕ ИНТЕРФЕЙСЫ ПРОГРАММИРОВАНИЯ в браузере — API.

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

Этот объект называется console.

У объектов в JavaScript могут быть свои собственные методы, которые знают всю информацию о самом объекте и которые могут вносить определённые изменения в работу. Таким образом, объект console является одним из свойств Глобального Объекта в JavaScript. Если мы говорим про клиентскую сторону, то это объект window. Если мы говорим про серверную сторону, то это объект global.

Пример из жизни

Если проводить аналогию с реальной жизнью, то работа с console.log() очень похожа на процесс документирования приготовления супа. Когда мы впервые в жизни пишем алгоритм приготовления супа, то мы для себя записываем на листочек последовательность этапов варки, обжарки, закупки и подготовки продуктов и тому подобного.

Первый раз мы даже будем записывать необходимую посуду для этого процесса. В первый раз нам будут непонятны многие вещи в кулинарии.

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

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

В чём проблема? Простой пример необходимости использования console.log()

Давайте напишем (объявим) простую функцию, которая из одного числа вычитает другое число и не возвращает значение:

function ab1 (a,b){
  a-b
}

Если мы оставим нашу функцию в таком виде, то при вызове этой функции с параметрами она не будет возвращать нам готовый ответ.

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

ab1(20, 10)

Вызов функции не вернул результат в JavaScript

Вызов функции вернёт нам undefined.

И вот сейчас получается такая ситуация, когда мы точно не знаем, а работает наша функция как надо или нет. Мы передали два числа 20 и 10. И по идее должны были где-то увидеть 10, но так и не увидели.

У нас простой пример, но представьте, что логика функции может быть куда сложнее. Как быть в этой ситуации?

Как сказать программе на JavaScript выдавать нам разработчикам промежуточные результаты своей работы?

Для этих целей нужно использовать выражение console.log().

Нам нужно немного переписать тело функции и добавить в него это выражение:

function ab2 (a,b){
  a-b;
  console.log(a-b);
}

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

Мы добавляем вторую строчку в тело функции, чтобы иметь возможность УВИДЕТЬ промежуточный результат работы функции.

Теперь если мы сделаем вызов обновлённой функции с параметрами:

ab2(40, 5)

То получим:

Вызов функции не вернул результат в JavaScript, но показал промежуточное значение

Наша функция по-прежнему умеет вычитать из одного числа другое. Только в этот раз мы можем отловить промежуточный результат и отобразить его на специальной вкладке браузера. Для удобства восприятия эта вкладка так и называется — «Console«.

Наша функция также ничего не возвращает, поэтому мы снова получаем undefined после вызова функции.

И теперь мы точно можем сказать, что наша функция работает как надо.

В настоящем коде для реальных приложений не все функции возвращают результаты. Некоторые функции могут просто менять содержимое каких-то глобальных переменных по определённой логике. Выражение console.log() как раз и нужно для того, чтобы отловить эту логику и вручную проанализировать правильность её работы.

Выражение console.log() не нужно пользователям приложения, оно нужно только разработчикам (программистам).

Другой пример использования console.log()

Кроме математических операций, часто можно встретить в коде «операции ветвления» логики. За это отвечает оператор IF.

Давайте представим, что нам нужно передавать в функцию значение температуры воздуха, а в ответ получать логическое значение — замёрзнет вода при такой температуре или нет.

Мы можем написать удобную функцию для разработки:

function is_ice (temp){
  if(temp <= 0){
    console.log('Температура воздуха ниже или равно 0');
    return true
  }
  else{
    console.log('Температура воздуха больше 0');
    return false
  }
}

Примеры вызовов:

is_ice(10)
false

is_ice(0)
true

is_ice(-20)
true

Скриншот из браузера:

Использование console.log в ветвлении в JavaScript

Каждый вызов функции is_ice() будет возвращать true или false. Но на вкладке «Console» в браузере кроме нужных для программы данных мы будем видеть промежуточные результаты логики работы программы.

Официальная документация по объекту console

Объект console является прикладным интерфейсом программирования в браузере и он расширяет функционал «глобального объекта«.

Ознакомиться с документацией по объекту console можно по адресу — https://console.spec.whatwg.org

В этой публикации мы рассмотрели всего один метод у объекта console, который называется log(). Слово «LOG» можно перевести с английского как «ЖУРНАЛ«.

Важно знать, что существуют и другие методы, при помощи которых можно:

Логгировать
Подсчитывать
Группировать
Замерять тайминги

… операций.