LearnJS

Структура JavaScript-кода

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

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

Из чего состоит JavaScript-код

Посмотрим на небольшой пример:

console.log('Скрипт начал работу');

let message = 'Изучаем JavaScript';

console.log(message);

Здесь есть несколько отдельных действий:

  • вывести сообщение в консоль;
  • создать переменную message;
  • вывести значение переменной в консоль.

Каждое такое действие можно воспринимать как отдельную команду. JavaScript выполняет их по порядку, если в коде нет ошибок или специальных конструкций, которые меняют этот порядок.

Инструкции

Инструкция - это команда, которую JavaScript должен выполнить. Например, вывод сообщения:

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

Создание переменной тоже является инструкцией:

let userName = 'Алексей';

В одном файле может быть много инструкций:

let course = 'JavaScript';
let level = 'для начинающих';

console.log(course);
console.log(level);

В результате в консоли появятся два значения:

JavaScript
для начинающих

Инструкции обычно пишут с новой строки. Так код легче читать и проверять.

Точка с запятой

В JavaScript инструкции часто заканчивают точкой с запятой ;.

console.log('Первая строка');
console.log('Вторая строка');

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

console.log('Первая строка')
console.log('Вторая строка')

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

Особенно важно быть аккуратным, когда код становится длиннее и появляются функции, массивы, объекты и другие конструкции. Пока просто запомним: одна законченная команда - одна инструкция, обычно с точкой с запятой в конце.

Порядок выполнения кода

JavaScript выполняет обычный код сверху вниз.

console.log('Шаг 1');
console.log('Шаг 2');
console.log('Шаг 3');

В консоли увидим:

Шаг 1
Шаг 2
Шаг 3

Если поменять строки местами, изменится и порядок вывода.

console.log('Шаг 3');
console.log('Шаг 1');
console.log('Шаг 2');

Результат:

Шаг 3
Шаг 1
Шаг 2

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

Блоки кода

Блок кода - это несколько инструкций, объединенных фигурными скобками {}. Обычно блоки используются в условиях, циклах и функциях.

if (10 > 5) {
  console.log('Условие выполнено');
  console.log('Этот код находится внутри блока');
}

Пока не обязательно глубоко понимать if. В этом примере важно увидеть фигурные скобки. Все, что находится между { и }, относится к одному блоку.

Внутри блока код принято писать с отступом:

if (true) {
  console.log('Отступ помогает читать код');
}

Без отступа JavaScript тоже может выполнить код, но читать его будет сложнее:

if (true) {
console.log('Так хуже читается');
}

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

Пробелы и переносы строк

JavaScript в большинстве случаев не обращает внимания на лишние пробелы и переносы строк.

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

И такой вариант тоже будет работать:

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

Но второй пример читать неприятно. Поэтому код оформляют аккуратно: пробелы ставят там, где они помогают восприятию, а не где попало.

Обычно пишут так:

let price = 100;
let count = 3;

console.log(price * count);

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

Регистр символов

JavaScript чувствителен к регистру. Это значит, что заглавные и строчные буквы считаются разными символами.

let message = 'Привет';

console.log(message);

Такой код сработает. А здесь будет ошибка:

let message = 'Привет';

console.log(Message);

Для JavaScript message и Message - разные имена. Переменной Message в коде нет, поэтому в консоли появится ReferenceError.

То же самое относится к встроенным командам. Например, правильно писать console.log(), а не Console.log().

Что дальше

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

Дальше разберем строгий режим use strict. Он помогает писать более аккуратный код и раньше замечать некоторые ошибки.