Время чтения: Около 6 мин. Веб-разработка

Синтаксис JavaScript: основные концепции

Синтаксис JavaScript: основные концепции

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

JavaScript — это один из самых популярных и мощных языков программирования, который позволяет создавать интерактивные и динамические веб-сайты. Однако, чтобы успешно использовать JS, необходимо хорошо знать его синтаксис, то есть набор правил и соглашений, которые определяют, как писать и оформлять код.  После прочтения этой статьи вы сможете лучше понимать и анализировать код на JavaScript, а также избегать распространенных ошибок и проблем.

Константы

Константы — это именованные значения, которые не могут быть изменены во время выполнения программы. Константы используются для хранения постоянных данных, таких как числа Пи или скорости света. В JavaScript константы объявляются с помощью ключевого слова const:

const PI = Math.PI // это константа
const SPEED_OF_LIGHT = 299792458; // это константа

Константы должны быть инициализированы при объявлении и не могут быть повторно присвоены. Попытка сделать это приведет к ошибке.

Переменные

Переменные служат для хранения и управления данными в программе. В JavaScript переменные объявляются с помощью ключевых слов var, let или const:

var x = 10; // это переменная, объявленная с помощью var
let y = 20; // это переменная, объявленная с помощью let
const z = 30; // это переменная, объявленная с помощью const

В зависимости от ключевого слова определяется поведение переменной: var и let могут быть присвоены новым значениям в любой момент программы, например:

var x = 10; // переменная, объявленная с помощью var
x = 15; // это новое значение переменной x
let y = 20; // переменная, объявленная с помощью let
y = 25; // это новое значение переменной y
const z = 30; // переменная, объявленная с помощью const
z = 35; // приведет к ошибке: нельзя изменить значение константы

Переменные, объявленные с помощью var, имеют функциональный или глобальный область видимости (scope), то есть они доступны в пределах функции или всего скрипта. Переменные, объявленные с помощью let или const, имеют блочный область видимости (scope), то есть они доступны только в пределах блока кода, в котором они объявлены.

Операторы

Операторы — это символы или слова, которые выполняют определенные действия над значениями или переменными. Операторы могут быть унарными (применяются к одному значению), бинарными (применяются к двум значениям) или тернарными (применяются к трем значениям). В JavaScript есть следующие типы операторов:

  • Арифметические операторы — это операторы, которые выполняют математические операции, такие как сложение, вычитание, умножение и деление.
+ // сложение
- // вычитание
* // умножение
/ // деление
% // модуль числа
** // показатель степени
  • Операторы сравнения — это операторы, которые сравнивают два значения и возвращают логическое значение (true или false). 
>  // больше
<  // меньше
>= // больше или равно
<= // меньше или равно
== // равно
!= // не равно
|| // ИЛИ
&& // И
!  // НЕ
?? // оператор нулевого слияния
  • Побитовые операторы — это операторы, которые работают с битами (единицами и нулями) значений. 
&   // побитовое И
|   // побитовое ИЛИ 
^   // побитовое ИСКЛЮЧАЮЩЕЕ ИЛИ
~   // побитовое НЕ 
<<  // сдвиг битов влево с заполнением пустых слотов нулями
>>  // сдвиг битов вправо с заполнением пустых слотов значениями крайнего левого бита
>>> // сдвиг битов вправо с заполнением нулями
  • Операторы присваивания — это операторы, которые присваивают значение переменной или свойству объекта. 
=   // оператор присваивания	
+=  // сложение с присваиванием	
-=  // вычитание с присваиванием	
*=  // умножение с присваиванием	
/=  // деление с присваиванием	
%=  // присваивание с остатком	
**= // присваивание степени
  • Условный (тернарный) оператор — это оператор, который возвращают одно из двух значений в зависимости от условия. 
const x = 10;
const y = 20;
const z = x > y ? 'x больше y' : 'x меньше или равно y'; // это тернарный оператор условия ?
console.log(z); // выводит 'x меньше или равно y'
  • Оператор (...) — это оператор, который может назваться spread или rest в зависимости от того, где и как он используется. Он позволяют работать с итерируемыми объектами, такими как массивы или строки.

Операнды

Операнды — это значения или переменные, над которыми выполняются операторы. Операнды могут быть литералами (например, числами или строками), переменными (например, x или y), свойствами объектов (например, person.name или person.age) или результатами выражений (например, x + y или Math.sqrt(z)), например:

const x = 10; // значение х - это литерал
const y = x; // значение y - это переменная х
const z = x + y; // значение z - это выражение, состоящее из оператора + и двух операндов x и y
const person = {
  age:18,
};
const w = z + 10 + "20" + person.age + (20*2); // z,10,"20", person.age, (20*2) - операнды в этом случае
console.log(w) // выведет 30201840

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

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

  • Идентификаторы могут состоять из букв (латинских или не латинских), цифр, символов подчеркивания ( _ ) и знаков доллара ($)
  • Идентификаторы не могут начинаться с цифры
  • Идентификаторы не могут быть равны ключевым словам или зарезервированным словам JavaScript
  • Идентификаторы чувствительны к регистру, то есть различаются заглавные и строчные буквы.
const name = 'Alice'; // это допустимый идентификатор
const _age = 25; // это допустимый идентификатор
const $salary = 1000; // это допустимый идентификатор
const имя = 'Алиса'; // это допустимый идентификатор

const 1name = 'Alice'; // это недопустимый идентификатор, начинается с цифры
const for = 'loop'; // это недопустимый идентификатор, совпадает с ключевым словом
const Name = 'Alice'; // это другой идентификатор, отличный от name

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

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

  • Разделения идентификаторов, ключевых слов, операторов и литералов. 
let x=10; // это допустимый код, но плохо читаемый
let x = 10; // это допустимый код и хорошо читаемый
  • Cоздания отступов в блоках кода. Отступы показывают вложенность и иерархию блоков кода. Обычно используются четыре пробела или одна табуляция для каждого уровня отступа. Например:
function test() {
    if (true) {
        console.log('Hello');
    } else {
        console.log('Bye');
    }
} // этот код имеет правильные отступы 

function test() {
if (true) {
console.log('Hello');
} else {console.log('Bye');
}
} // этот код не имеет отступов и плохо читаемый
  • Создания переводов строк в строковых литералах. Перевод строки — это спецсимвол, который обозначает конец строки. В JavaScript перевод строки обозначается как \n. 
const str1 = 'Hello\nWorld'; // это строковый литерал с переводом строки
console.log(str1); // выводит Hello на одной строке и World на другой строке

const str2 = 'Hello World'; // это строковый литерал без перевода строки
console.log(str2); // выводит Hello World на одной строке

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

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

const x = 10; // это инструкция с точкой с запятой
const y = 20; // это инструкция с точкой с запятой
const z = x + y; // это инструкция с точкой с запятой
console.log(z); // это инструкция с точкой с запятой

В JavaScript точки с запятой не обязательны в большинстве случаев, так как интерпретатор может автоматически вставлять их в конце инструкций, если они отсутствуют. Это называется автоматической вставкой точек с запятой (automatic semicolon insertion, ASI). Однако, есть некоторые случаи, когда точки с запятой обязательны или рекомендуется использовать, например:

  • Когда две или более инструкции находятся на одной строке:
const x = 10; const y = 20; // это две инструкции на одной строке, разделенные точкой с запятой
  • Когда инструкция начинается с символов (, [ или `, которые могут быть интерпретированы как продолжение предыдущей инструкции:
let x = 10 // это инструкция без точки с запятой
(function() {console.log('Hello')})() // это инструкция, начинающаяся с (, которая может быть интерпретирована как вызов функции x

// Этот код приведет к ошибке SyntaxError: Unexpected token (
// Чтобы избежать этого, нужно поставить точку с запятой после первой инструкции

let x = 10; // это инструкция с точкой с запятой(function() {console.log('Hello')})() // это инструкция, начинающаяся с (, которая не будет интерпретирована как вызов функции x

// Этот код выполнится без ошибок и выведет Hello

Комментарии

Комментарии — это части кода, которые не выполняются интерпретатором, но служат для пояснения или документации кода. кроме того их используют для улучшения читаемости и понимания кода, а также для отладки или отключения частей кода. В JS есть два типа комментариев:

  • Однострочные комментарии — это пометки, которые начинаются с двух символов слеша // и занимают одну строку кода. Однострочные комментарии могут быть расположены в любом месте кода, но не могут переноситься на другую строку:
const x = 10; // это однострочный комментарий
// это еще один однострочный комментарий
  • Многострочные комментарии — это заметки, которые начинаются с символов /* и заканчиваются символами */. Многострочные комментарии могут занимать несколько строк кода и могут быть расположены в любом месте кода:
/* это многострочный комментарий
который занимает две строки кода */
const x = 10; // это инструкция
/* это еще один многострочный комментарий
который содержит инструкцию внутри
console.log(x); // эта инструкция не выполнится, 
так как она внутри комментария */

Шебанг комментарии

Шебанг комментарии — это специальные пометки, которые начинаются с символов #!, занимают первую строку скрипта и применяются для указания интерпретатора, который должен выполнить скрипт:

#!/usr/bin/env node // это шебанг комментарий, который указывает на интерпретатор Node.js
console.log('Hello'); // это инструкция
Шебанг комментарии игнорируются интерпретатором JavaScript, но могут быть полезными при запуске скриптов из командной строки или других сред.

Ключевые слова

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

Литералы

Литералы — это значения, которые записываются в коде непосредственно, без использования переменных или выражений. Литералы могут быть разных типов, таких как числа, строки, булевы значения, объекты и массивы. Чтобы почитать про них подробнее — нажмите сюда.

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

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

const name = 'Alice'; // это переменная с именем name в нижнем регистре
const Name = 'Bob'; // это другая переменная с именем Name в верхнем регистре

console.log(name); // выводит Alice
console.log(Name); // выводит Bob

const x = 10; // это переменная с именем x в нижнем регистре
const y = X + 5; // это ошибка, так как X не определен (должно быть x)
Софья Пирогова

Софья Пирогова

автор статей / копирайтер
Георгий Бабаян

Георгий Бабаян

Основатель и CEO Эльбрус Буткемп