console.log()

• Что такое console.log()
• Синтаксис
• Вывод текста и чисел
• Вывод переменных
• Несколько значений
• Выражения внутри console.log()
• Массивы и объекты
• Частые ошибки

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

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

Что такое console.log()

В браузере есть объект console. Он связан с консолью разработчика. У этого объекта есть метод log(), который выводит переданные данные во вкладку Console.

Запись выглядит так:

console.log('Привет');

Если открыть консоль браузера, там появится:

Привет

То есть console.log() не показывает всплывающее окно, как alert(), и не добавляет текст на страницу. Он выводит информацию только в консоль.

Синтаксис

Общая запись метода:

console.log(value);

value - это значение, которое мы хотим вывести. Это может быть текст, число, переменная, результат вычисления, массив, объект и другие данные.

Например:

console.log('JavaScript');

В скобках находится значение, а точка с запятой завершает инструкцию.

Вывод текста и чисел

Чтобы вывести текст, его нужно заключить в кавычки:

console.log('Изучаем JavaScript');

Результат в консоли:

Изучаем JavaScript

Числа можно выводить без кавычек:

console.log(100);
console.log(25.5);

Результат:

100
25.5

Если число записать в кавычках, оно станет строкой. Визуально в консоли это может выглядеть похоже, но для JavaScript это уже другой тип данных.

console.log(100);
console.log('100');

Вывод переменных

Чаще всего console.log() используют для проверки переменных.

let course = 'JavaScript';

console.log(course);

В консоли появится значение переменной:

JavaScript

Обратите внимание: имя переменной пишется без кавычек. Если добавить кавычки, в консоль попадет обычный текст.

let course = 'JavaScript';

console.log(course);   // JavaScript
console.log('course'); // course

В первом случае JavaScript берет значение переменной. Во втором просто выводит строку ‘course’.

Несколько значений

В console.log() можно передать несколько значений через запятую.

let name = 'Ирина';
let age = 25;

console.log(name, age);

В консоли увидим оба значения:

Ирина 25

Так удобно подписывать вывод:

let age = 25;

console.log('Возраст пользователя:', age);

Результат:

Возраст пользователя: 25

Такая запись помогает не запутаться, если в коде много проверок.

Выражения внутри console.log()

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

console.log(10 + 5);
console.log(20 * 3);

Результат:

15
60

Можно использовать переменные:

let price = 500;
let count = 3;

console.log(price * count);

В консоли будет:

1500

Так можно быстро проверить расчет, не выводя результат на страницу.

Массивы и объекты

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

let skills = ['HTML', 'CSS', 'JavaScript'];

console.log(skills);

В консоли можно будет увидеть массив и его элементы.

Пример с объектом:

let student = {
  name: 'Антон',
  level: 'beginner'
};

console.log(student);

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

Частые ошибки

1. Неправильно написано имя console

Console.log('Привет');

JavaScript чувствителен к регистру, поэтому Console и console - разные имена. Правильно:

console.log('Привет');

2. Текст написан без кавычек

console.log(Привет);

Так JavaScript будет искать переменную Привет. Если такой переменной нет, появится ошибка. Правильно:

console.log('Привет');

3. Пропущена закрывающая скобка

console.log('Привет';

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

console.log('Привет');

4. Ожидание увидеть результат на странице

console.log() выводит данные только в консоль разработчика. Если на странице ничего не изменилось, это нормально. Нужно открыть вкладку Console и смотреть результат там.

Что дальше

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

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