Выражения и операторы в JavaScript

Выражения и операторы в JavaScript

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

Словарь терминов

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

Выражение — это комбинация значений, переменных и операторов, которая в результате даёт новое значение.

Операторы выполняют операции над значениями и переменными. Это специальный символ или слово, указывающее на определённую математическую, логическую или другую операцию над одним или несколькими операндами. Например, в выражении 4 + 5, + является оператором.

Операнд — это значение, на которое воздействует оператор. В нашем примере 4 и 5 являются операндами.

Арифметические операторы (+, -, *, /, %) 

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

Вот основные арифметические операторы и примеры их использования:

Сложение (+): используется для сложения чисел или строк (при сложении со строкой происходит конкатенация).

let result = 10 + 5;  // 15
let resultStr = "Hello" + " " + "World";  // "Hello World"

Вычитание (-): применяется для вычисления разности между числами.

let result = 10 - 5;  // 5

Умножение (*): используется для получения произведения чисел.

let result = 10 * 5;  // 50

Деление (/): применяется для деления одного числа на другое.

let result = 10 / 5;  // 2

Остаток от деления (%): используется для нахождения остатка после деления одного числа на другое.

let result = 10 % 3;  // 1

Инкремент (++): увеличивает число на единицу.

let counter = 0;
counter++;  // теперь counter равен 1

Декремент (--): уменьшает число на единицу.

let counter = 1;
counter--;  // counter теперь равен 0

Унарный минус (-): меняет знак числа на противоположный.

let result = -10;  // -10

Унарный плюс (+): преобразует операнд в число, если он ещё не является числом.

let result = +"5";  // 5 типа Number

Возведение в степень (**): возводит число в указанную степень.

let result = 2 ** 3;  // 8

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

Операторы присваивания (=, +=, -=, *=)

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

Основные операторы присваивания и для чего они нужны:

Простое присваивание (=): присваивает значение справа от оператора переменной слева.

let x = 5;

Добавление и присваивание (+=): добавляет значение справа к переменной слева и присваивает результат этой переменной.

let x = 10;
x += 5; // x теперь равен 15

Вычитание и присваивание (-=): отнимает значение справа от переменной слева и присваивает результат этой переменной.

let x = 10;
x -= 5; // x теперь равен 5

Умножение и присваивание (*=): умножает переменную слева на значение справа и присваивает результат этой переменной.

let x = 10;
x *= 5; // x теперь равен 50

Деление и присваивание (/=): делит переменную слева на значение справа и присваивает результат этой переменной.

let x = 10;
x /= 5; // x теперь равен 2

Остаток от деления и присваивание (%=): делит переменную слева на значение справа и присваивает остаток от этого деления переменной.

let x = 10;
x %= 3; // x теперь равен 1

Возведение в степень и присваивание (=)**: возводит переменную слева в степень, равную значению справа, и присваивает результат этой переменной.

let x = 2;
x **= 3; // x теперь равен 8

Побитовое И и присваивание (&=): применяет побитовую операцию И к двум операндам и присваивает результат переменной слева.

let x = 5; // (101)_2
x &= 3; // (011)_2; x теперь равен (001)_2, то есть 1

Побитовое ИЛИ и присваивание (|=): применяет побитовую операцию ИЛИ к двум операндам и присваивает результат переменной слева.

let x = 2; // (010)_2
x |= 1; // (001)_2; x теперь равен (011)_2, то есть 3

Побитовое исключающее ИЛИ и присваивание (^=): применяет побитовую операцию исключающее ИЛИ к двум операндам и присваивает результат переменной слева.

let x = 5; // (101)_2
x ^= 3; // (011)_2; x теперь равен (110)_2, то есть 6

Сдвиг влево и присваивание (<<=): сдвигает биты переменной слева влево на количество позиций, указанное справа, и присваивает результат переменной.

let x = 1;
x <<= 2; // x теперь равен (100)_2, то есть 4

Сдвиг вправо и присваивание (>>=): сдвигает биты переменной слева вправо на количество позиций, указанное справа, сохраняя знак, и присваивает результат переменной.

let x = 4;
x >>= 1; // x теперь равен 2

Сдвиг вправо с заполнением нулями и присваивание (>>>=): сдвигает биты переменной слева вправо на количество позиций, указанное справа, заполняя левые биты нулями, и присваивает результат переменной.

let x = -4;
x >>>= 1; // результат зависит от того, как числа представлены в памяти

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

Операторы сравнения (==, !=, ===, !==, &gt;, &lt;, &gt;=, &lt;=)

Операторы сравнения в JavaScript применяются для сравнения двух значений и возвращают логическое значение: true, если сравнение истинно, или false, если сравнение ложно. Эти операторы широко используются для принятия решений в управляющих конструкциях, таких как условные операторы if...else и циклы while или for.

Вот основные операторы сравнения:

Равно (==): Проверяет равенство значений двух операндов после приведения их к общему типу.

if (5 == '5') { // true, так как строка '5' приведётся к числу
// выполняется если true
}

Не равно (!=): Проверяет, не равны ли два операнда после приведения их к общему типу.

if (5 != '5') { // false
// не выполняется, так как 5 равно '5' после приведения типов
}

Строго равно (===): Проверяет равенство значений и типов двух операндов, без приведения типов.

if (5 === '5') { // false
// не выполняется, так как типы различаются
}

Строго не равно (!==): Проверяет, отличаются ли значения операндов или их типы, без приведения типов.

if (5 !== '5') { // true
// выполняется, так как типы различаются
}

Больше (>): Проверяет, больше ли значение левого операнда, чем значение правого операнда.

if (10 > 5) { // true
// выполняется, так как 10 больше 5
}

Меньше (<): Проверяет, меньше ли значение левого операнда, чем значение правого операнда.

if (10 < 20) { // true
// выполняется, так как 10 меньше 20
}

Больше или равно (>=): Проверяет, больше ли значение левого операнда или равно значению правого операнда.

if (10 >= 10) { // true
// выполняется, так как 10 равно 10
}

Меньше или равно (<=): Проверяет, меньше ли значение левого операнда или равно значению правого операнда.

if (5 <= 10) { // true
// выполняется, так как 5 меньше 10
}

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

Логические операторы (&amp;&amp;, ||, !)

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

В JavaScript есть несколько логических операторов:

Логическое И (&&): Возвращает true, если оба операнда истинны (выражение справа вычисляется только в том случае, если выражение слева вернуло true).

if (condition1 && condition2) {
// Код выполняется только если и condition1 и condition2 истинны
}

Логическое ИЛИ (||): Возвращает true, если хотя бы один из операндов истинен (выражение справа вычисляется только если выражение слева вернуло false).

if (condition1 || condition2) {
// Код выполняется если condition1 или condition2 (или оба) истинны
}

Логическое НЕ (!): Возвращает true, если операнд ложен, и false, если операнд истинен – инвертирует логическое значение операнда.

if (!condition) {
// Код выполняется если condition ложно
}

Nullish coalescing operator (??): Возвращает значение правого операнда, если значение левого операнда является null или undefined, иначе возвращает значение левого операнда.

const foo = null ?? 'default string';
console.log(foo); // "default string"

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

Побитовые операторы (&amp;, |, ^, ~, &lt;&lt;, &gt;&gt;, &gt;&gt;&gt;)

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

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

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

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

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

Эффективное хранение наборов логических значений: используя одно целое число для представления набора булевых значений.

Вот как они применяются:

Побитовое И (AND) (&): Используется для выполнения операции И над каждой парой битов двух операндов. Результат в каждом битовом месте будет 1, только если оба соответствующих бита операндов также равны 1.

let result = 5 & 3; // 5 = 101 и 3 = 011, результат будет 001 (1 в десятичной системе)

Побитовое ИЛИ (OR) (|): Выполняет операцию ИЛИ над каждой парой битов. Результат в каждом битовом месте будет 1, если хотя бы один из битов операндов равен 1.

let result = 5 | 3; // 5 = 101 и 3 = 011, результат будет 111 (7 в десятичной системе)

Побитовое исключающее ИЛИ (XOR) (^): Выполняет операцию XOR над каждой парой битов. Результат будет 1, если соответствующие биты различны.

let result = 5 ^ 3; // 5 = 101 и 3 = 011, результат будет 110 (6 в десятичной системе)

Побитовое НЕ (NOT) (~): Инвертирует биты операнда. Если бит был 0, он становится 1, и наоборот.

let result = ~5; // 5 = 101, результат будет 010 (в десятичной системе -6, из-за дополнительного кода)

Сдвиг влево (<<): Сдвигает первый операнд на количество битов, указанное во втором операнде, влево, добавляя справа нули.

let result = 5 << 1; // 5 = 101, результат 1010 (10 в десятичной системе)

Сдвиг вправо со знаком (>>): Сдвигает первый операнд на количество битов, указанное во втором операнде, вправо, сохраняя знак операнда.

let result = 5 >> 1; // 5 = 101, результат 010 (2 в десятичной системе)

Сдвиг вправо с заполнением нулями (>>>): Сдвигает первый операнд вправо, добавляя с левой стороны нули.

let result = 5 >>> 1; // 5 = 101, результат 010 (2 в десятичной системе)

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

Строковые операторы (+)

Строковые операторы в JavaScript предназначены для работы со строками, то есть для их соединения, сравнения и других подобных операций. Основной строковый оператор в JavaScript — это оператор конкатенации (+), который используется для склеивания двух и более строк в одну.

Пример конкатенации строк:
let greeting = 'Привет, ' + 'мой дорогой друг!';
console.log(greeting); // Выведет: Привет, мой дорогой друг!

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

Пример использования присваивания с конкатенацией:
let message = 'У меня есть ';
message += 'важное сообщение для тебя.';
console.log(message); // Выведет: У меня есть важное сообщение для тебя.

Строковые операторы отличаются от арифметических операторов тем, что они предназначены для манипуляции с текстовыми данными, а не числами. Арифметические операторы, такие как +, -, *, /, и % (плюс, минус, умножение, деление и остаток от деления соответственно), используются для выполнения математических вычислений.

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

Пример использования оператора + с числом и строкой:
let result = '3' + 4; // Результат будет строкой '34', а не числом 7.

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

Специальные операторы

Специальные операторы в JavaScript предназначены для выполнения различных задач, которые не ограничиваются простым сравнением или арифметикой. Они включают в себя целый ряд инструментов, каждый из которых решает специфическую проблему. Delete, typeof, new, this, in, instanceof и void, имеют уникальные функции, важные для различных аспектов языка.

Оператор распространения (Spread operator) ...: позволяет расширять массивы или другие итерируемые объекты в местах, где ожидается несколько элементов (например, при вызове функции или в литералах массивов).

let parts = ['плечи', 'колени'];
let lyrics = ['голова', ...parts, 'и', 'пальцы'];
// lyrics: ['голова', 'плечи', 'колени', 'и', 'пальцы']

Оператор rest ...: собирает индивидуальные элементы в массив. Это противоположность оператора распространения и часто используется в параметрах функции для получения "оставшихся" аргументов.

function collect(...args) {
   console.log(args);
}
collect(1, 2, 3); // [1, 2, 3]

Тернарный оператор ? :: является единственным оператором в JavaScript, который имеет три операнда. Он часто используется как короткая форма для if выражения. Тернарный оператор принимает условие и возвращает одно значение, если условие истинно, и другое значение, если условие ложно.

let price = 120;
let message = price > 100 ? 'Слишком дорого' : 'Это нормально';
console.log(message); // Слишком дорого

Оператор delete: удаляет свойство из объекта.

let obj = { name: 'Иван', age: 25 };
delete obj.age;
console.log(obj); // { name: 'Иван' }

Оператор typeof: возвращает строку, указывающую тип переданной переменной или выражения.

console.log(typeof 'Привет, мир!'); // 'string'

Оператор instanceof: проверяет, создан ли объект прототипом определенной функции-конструктора.

class Car {}
let myCar = new Car();
console.log(myCar instanceof Car); // true

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

class Car {};
let myCar = new Car();

Оператор in: проверяет, существует ли свойство в данном объекте.

let car = { model: 'Toyota' };
console.log('model' in car); // true

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

Приоритет операторов и ассоциативность

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

Приоритет операторов в JavaScript устанавливается по стандарту ECMAScript. Ниже приведена сокращенный список приоритетов от самых высоких к самым низким:

Ассоциативность операторов определяет направление, в котором два оператора с одинаковым приоритетом будут выполняться. Она бывает левоассоциативной (от левого к правому) и правоассоциативной (от правого к левому).

Левоассоциативные операторы: арифметические (+, -, *, /), операторы присваивания (=, +=, -= и т.д.), логические операторы (&&, ||).

let result = 20 - 5 - 3; // Вычисляется как (20 - 5) - 3 = 12

Правоассоциативные операторы: условный оператор (? :), оператор присваивания (=), операторы сравнения (>, <, >=, <=).

let result = a = b = 5; // Вычисляется как a = (b = 5)

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

let result = (20 - 5) - 3; // 12, скобки указывают на порядок выполнения

Зная приоритет и ассоциативность операторов, можно более эффективно читать и писать код, предсказывая поведение сложных выражений.

Как и где использовать выражения и операторы в JavaScript

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

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

Заключение

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