Синтаксис и структура кода JavaScript

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

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

Данный мануал ознакомит вас с основами синтаксиса и структурирования кода в JavaScript.

Функциональность и удобочитаемость

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

Некоторые правила синтаксиса являются обязательными для кода JavaScript. Если они не соблюдаются, консоль выдаст ошибку, и сценарий прекратит работу.

Рассмотрим такую ошибку в программе «Hello, World!».

// Example of a broken JavaScript program
console.log("Hello, World!"

В конце не хватает закрывающей скобки, потому вместо строки «Hello, World!» программа вернет ошибку:

Uncaught SyntaxError: missing ) after argument list

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

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

Рассмотрим следующие три варианта присвоения значения переменной:

const greeting="Hello";         // no whitespace between variable & string
const greeting =       "Hello"; // excessive whitespace after assignment
const greeting = "Hello";       // single whitespace between variable & string

Все три приведенные выше строки будут работать одинаково. Но третий вариант (greeting = «Hello») на сегодняшний день является наиболее часто используемым и удобочитаемым способом написания кода, особенно при рассмотрении его в контексте более объемной программы.

Очень важно следить за целостностью и последовательностью всего кода программы.

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

Пробельные символы

Пробельные символы JavaScript – это пробелы, табы и перевод строки (это действие выполняет клавиша Enter). Как было показано ранее, избыточные пробелы вне строки, пробелы между операторами и другими символами игнорируются интерпретатором JavaScript. Это означает, что следующие три примера присвоения переменной будут иметь одинаковый результат:

const userLocation      =    "New York City, "     +  "NY";
const userLocation="New York City, "+"NY";
const userLocation = "New York City, " + "NY";

Переменная userLocation будет иметь значение «New York City, NY» вне зависимости от стиля присвоения этого значения. Для JavaScript не имеет никакого значения, какие пробельные символы используются.

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

let x = 5 * y

читается проще, чем:

let x=5*y

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

const companyName         = "MyCompany";
const companyHeadquarters = "New York City";
const companyHandle       = "mycompany";

Все операторы присваивания (=) выравниваются в одну линию с помощью пробелов. Этот тип структуры не используется всеми базами кода, но может повысить удобочитаемость.

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

Круглые скобки

В ключевых словах, таких как if, switch и for, до и после круглых скобок обычно добавляются пробелы. Рассмотрите следующий пример:

// An example of if statement syntax
if () { }
// Check math equation and print a string to the console
if (4 < 5) {
console.log("4 is less than 5.");
}
// An example of for loop syntax
for () { }
// Iterate 10 times, printing out each iteration number to the console
for (let i = 0; i <= 10; i++) {
console.log(i);
}

Как видите, круглые скобки оператора if и цикла выделены пробелами с двух сторон.

Когда код относится к функции, методу или классу, скобки пишутся рядом с именем без пробела.

// An example function
function functionName() {}
// Initialize a function to calculate the volume of a cube
function cube(number) {
return Math.pow(number, 3);
}
// Invoke the function
cube(5);

В приведенном выше примере cube() является функцией, а скобки () будут содержать параметры или аргументы. В этом случае параметры выражены с помощью number или 5. Написание cube () с пробелом тоже будет работать, но оно почти никогда не используется. Слитное написание функции и скобок помогает легко связать функцию с ее аргументами.

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

Так же, как абзацы текста состоят из предложений, программы JavaScript состоят из ряда инструкций, которые называются выражениями. В конце предложения ставится точка, а в конце выражения JavaScript – точка с запятой (;).

// A single JavaScript statement
const now = new Date();

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

// Get the current timestamp and print it to the console
const now = new Date(); console.log(now);

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

// Two statements separated by newlines
const now = new Date()
console.log(now)

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

// Two statements separated by newlines and semicolons
const now = new Date();
console.log(now);

Точку с запятой также ставят между инициализацией и условием в циклах for:

for (initialization; condition; increment) {
// run the loop
}

Точка с запятой не ставится после операторов if, for, do, while, class, switch и function. Эти операторы берутся в фигурные скобки {}. Рассмотрите следующий код:

// Initialize a function to calculate the area of a square
function square(number) {
return Math.pow(number, 2);
}
// Calculate the area of a number greater than 0
if (number > 0) {
square(number);
}

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

// An example object
const objectName = {};
// Initialize triangle object
const triangle = {
type: "right",
angle: 90,
sides: 3,
};

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

Структурирование кода

Технически весь код программы JavaScript можно поместить в одну строку. Но такой код очень сложно читать и поддерживать. Потому программа делится на строки.

К примеру, оператор if/else можно написать в одну строку, а можно разделить:

// Conditional statement written on one line
if (x === 1) { /* execute code if true */ } else { /* execute code if false */ }
// Conditional statement with indentation
if (x === 1) {
// execute code if true
} else {
// execute code if false
}

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

Открытая скобка в конце первой строки – обычный способ структурирования операторов и объектов JavaScript. Иногда скобки выносятся в отдельные строки:

// Conditional statement with braces on newlines
if (x === 1)
{
// execute code if true
}
else
{
// execute code if false
}

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

Вложенные операторы должны отделяться:

// Initialize a function
function isEqualToOne(x) {
// Check if x is equal to one
if (x === 1) {
// on success, return true
return true;
} else {
return false;
}
}

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

Идентификаторы

Имена переменных, функций или свойств в JavaScript называются идентификаторами. Идентификаторы состоят из букв и цифр, но они не могут содержать символы за пределами $ и _ и не могут начинаться с числа.

Чувствительность к регистру

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

var myVariable = 1;
var myvariable = 2;

По общему соглашению имена пишутся в верблюжьем регистре (camelCase): первое слово пишется со строчной буквы, но каждое последующее слово начинается с заглавной буквы. Глобальные переменные или константы пишутся в верхнем регистре и разделяются символами подчеркивания.

const INSURANCE_RATE = 0.4;

Исключением из этого правила являются имена классов, в которых обычно каждое слово начинается с заглавной буквы (PascalCase).

// Initialize a class
class ExampleClass {
constructor() { }
}

Чтобы обеспечить читаемость кода, нужно последовательно использовать идентификаторы во всех файлах программы.

Зарезервированные ключевые слова

Идентификаторы также не должны содержать никаких зарезервированных ключевых слов. Ключевые слова – это слова JavaScript, которые имеют встроенную функциональность. К ним относятся var, if, for и this.

К примеру, вы не сможете присвоить значение переменной с именем var.

var var = "Some value";

JavaScript знает ключевое слово var, потому выдаст ошибку:

SyntaxError: Unexpected token (1:4)

Читайте также: Полный список зарезервированных ключевых слов JavaScript

Заключение

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

Самое важное правило, которое нужно помнить при написании программ JavaScript, — код должен быть гибким и последовательным.

Tags: