TOC

Понимание синтаксиса и структуры кода в JavaScript

Вступление

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

  • Предложение начинается с заглавной буквы.

  • Предложение заканчивается в период.

  • Новый абзац с отступом.

  • Разговорный диалог находится внутри двойных кавычек.

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

В этом руководстве мы рассмотрим многие правила и соглашения синтаксиса JavaScript и структуры кода.

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

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

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

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

broken.js

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

В этом примере кода отсутствует закрывающая скобка, и вместо вывода ожидаемого «Hello, World!» На консоль появится следующая ошибка:

OutputUncaught 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

Хотя все три приведенных выше примера будут работать одинаково в выходных данных, третий параметр reeting =" Hello ", безусловно, является наиболее часто используемым и наиболее читаемым способом написания кода, особенно при рассмотрении это в контексте более крупной программы.

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

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

Пробелы

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

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

+ userLocation + будет представлять «Нью-Йорк, штат Нью-Йорк» независимо от того, какой из этих стилей написан в сценарии, и не будет иметь никакого значения для JavaScript, если пробельные символы записываются с помощью табуляции или пробелов.

Хорошее эмпирическое правило, позволяющее следовать наиболее распространенным соглашениям о пробелах, - это следовать тем же правилам, которые вы привыкли применять в математике и грамматике языка.

Например, + let x = 5 * y + более читабельно, чем + let x = 5 * y +.

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

const companyName         = "DigitalOcean";
const companyHeadquarters = "New York City";
const companyHandle       = "digitalocean";

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

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

Скобки

Для таких ключевых слов, как + if,` + switch` и + four, пробелы обычно добавляются до и после скобок. Обратите внимание на следующие примеры сравнения и циклы.

// 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 и цикл` + for` имеют пробелы с каждой стороны скобок (но не внутри скобок).

Когда код относится к функции, методу или классу, круглые скобки будут касаться соответствующего имени.

// 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 () + является функцией, а пара скобок + () + будет содержать параметры или аргументы. В этом случае параметрами являются «+ число » или « 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 i. Эти операторы блока содержатся в фигурных скобках + {} +. Обратите внимание на примеры ниже.

// 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;
   }
}

Правильный отступ в вашем коде необходим для обеспечения читабельности и уменьшения путаницы. Единственное исключение из этого правила, которое следует иметь в виду, заключается в том, что в сжатых библиотеках будут удалены ненужные символы, поэтому размеры файлов будут уменьшены, чтобы ускорить загрузку страниц (как в +jquery.min. js + ` и https://d3js.org/ [

Related