Далее на странице...
Здесь продолжается тема операторов в JavaScript и речь пойдет о приоритете операторов.
Будут рассмотрены ситуации, когда в выражении одновременно используются логические и математические операторы, несколько присваиваний. Как в JavaScript определяется очередность выполнения операций?
Вы узнаете, что такое инкремент и декремент. Сокращенные арифметические операции. Как пользоваться таблицей приоритета операторов?
И это заключительная статья, подводящая итог в изучении темы о переменных, типах данных и операторах.
Рассмотрим ситуацию, когда в выражении используется несколько операторов.
Допустим нужно узнать, является ли Джон совершеннолетним на основании года, в котором он был рожден.
var now = 2020; // Текущий год
var yearJohn = 1991; // Год рождения Джона
var fullAge = 18; // Возраст совершеннолетия
На основании имеющихся данных легко вычислить возраст Джона и сравнить его с числом 18.
var isFullAge = now - yearJohn >= fullAge;
Стоит разобраться, как работает это выражение. Здесь мы имеем дело с двумя операторами: математический минус и логический больше или равно. И все это в одной строке.
Но как JavaScript узнает - какое действие выполнить в первую очередь?
Если предположить, что сначала выполняется логический оператор сравнения: yearJohn >= fullAge, в результате чего возвращается true или false (истина или ложь). А потом из текущего года вычитается одно из этих значений: now - yearJohn >= fullAge. То такой порядок действий ничего существенного не дает. Мы не получим того, что хотели бы видеть.
Ожидается (так и происходит в действительности), что сначала выполняется первый оператор «минус», то есть выражение now- yearJohn. В результате мы получим возраст Джона, то есть какое-то число, которое потом будет сравниваться с другим числом - 18. И этот вариант работает.
console.log(isFullAge);
true
В результате выражение возвращает true. Это значит, что возраст Джона больше 18 лет, то есть он совершеннолетний. И это действительно так, потому что исходя из имеющихся данных - ему 29 лет.
Стоит уделить немного внимания приоритету операторов, и выяснить: почему и какой оператор выполняется первым?
Таблица приоритета операторов
По ссылкам далее можно перейти к таблице приоритета операторов, которая упорядочена с самого высокого приоритета до самого низкого - от 20 до 1. Эта ссылка ведет на страницу автора англоязычного курса. И вот ссылка на русскоязычный источник.
Из таблицы приоритета операторов видно, что операторы «+» и «-» (плюс и минус - позиция №13) находятся в приоритете перед оператором сравнения >= (больше или равно - позиция №11), который использовался в примере выше.
Оператор присваивания или оператор равенства «=» (знак равно) имеет позицию №3 - это почти самый низкий приоритет. И это имеет смысл, так как, конечно же, в большинстве случаев мы ожидаем, что присваивание происходит на последнем этапе, что фактически и происходит.
Итак, нужно понимать, что знак равно или оператор присваивания тоже участвует в работе. Учитывая это, следует отметить, что в выражении из примера выше мы имеем дело с тремя операторами: минус №13, оператор сравнения №11 и оператор присваивания №3.
Оператор группировки - Скобки ( )
Рассмотрим еще один пример с использованием оператора группировки - это скобки (). Вычислим средний возраст Джона и Марка.
var now = 2020; // Текущий год
var yearJohn = 1991; // Год рождения Джона
var ageJohn = now - yearJohn; // Возраст Джона
var ageMark = 35; // Возраст Марка
var average = ageJohn + ageMark / 2; // Средний возраст - Неверное выражение
console.log(average);
46.5
В данном случае выражение для вычисления среднего возраста составлено НЕ верное.
Еще из школьного курса должно быть известно, что деление имеет приоритет перед сложением и выполняется в первую очередь.
В JavaScript это правило работает аналогично, что видно из таблицы приоритета операторов: деление (позиция №14) имеет приоритет перед сложением (позиция №13).
Итак, чтобы выражение var average = ageJohn + ageMark / 2 для вычисления среднего возраста работало правильно, нужно использовать скобки, чтобы объединить в группу операцию сложения двух переменных. Это опять же должно быть известно из школьного курса.
И в JavaScript это тоже так. Из таблицы приоритета операторов видно, что оператор группировки (скобки) имеет самый высокий приоритет (позиция №20).
var average = (ageJohn + ageMark) / 2; // Средний возраст - Верное выражение
console.log(average);
32
Одновременное присваивание
Теперь представим: есть некое значение, которое мы собираемся присвоить нескольким переменным одновременно. В JavaScript это вполне возможно.
Создаем две переменные для работы с простыми математическими операциями.
var x, y;
x = (3 + 5) * 4 - 6;
console.log(x)
26
Учитывая приоритет выполнения операторов не сложно вычислить результат, который равен 26. При этом следует учитывать и это нужно помнить и понимать, что только после выполнения всех вычислений, в последнюю очередь происходит присваивание (знак равно). В данном случае переменной x присваивается значение 26.
Теперь, если мы захотим значение переменной x присвоить и переменной y, то сделать это очень просто.
x = y = (3 + 5) * 4 - 6;
console.log(x, y);
26 26
Здесь выводятся в консоль 2 переменные одновременно, чего ранее не делалось. И соответственно в консоли мы видим два результата одновременно.
Ассоциативность
Теперь предлагается взглянуть на последний пример с двойным присваиванием немного иначе. Слева - направо. Что мы видим?
x = y - на этом этапе переменная y еще не определена - Undefined, так как ранее var x, y, переменные x и y были объявлены, но для них не было определено какое-либо значение. Из этого можно сделать логическое заключение, что переменная x тоже не определена - Undefined. Но это не так. Что и было продемонстрировано выводом в консоль обеих переменных x и y, значением которых является одно и то же число 26.
Чтобы окончательно разобраться, как работает выражение в примере выше, предлагается снова обратиться к таблице приоритета операторов. В этой таблице помимо столбца «Приоритет», по которому операторы упорядочены с самого высокого приоритета до самого низкого под номерами от 20 до 1, существует столбец Ассоциативность - он означает направление, в котором оператор выполняется. И если для примера посмотреть на строку Умножение или Сложение, то мы увидим, что эти операторы выполняются слева направо.
То есть если взять для примера выражение: 2 + 3 + 8 , то в нем сначала суммируются числа 2 и 3. Затем результат первого сложения, то есть число 5 суммируется с числом 8. Сложение происходит слева направо.
Но не все операторы работаю так: некоторые выполняются справа налево. Одним из них является оператор «Присваивание» - он выполняется справа налево. И это является ответом на вопрос: почему это выражение x = y = (3 + 5) * 4 - 6 работает именно так? В действительности сначала выполняется второй оператор присваивания, то есть y = (3 + 5) * 4 - 6 или y = 26. Затем первый оператор присваивания: x = y - это значит, что значением переменной x также является число 26.
Так работает Ассоциативность согласно таблице приоритета операторов. Поэтому следует помнить не только о приоритете операторов, но и об ассоциативности.
Сокращенные арифметические операции
Рассмотрим еще несколько операторов.
Допустим переменную x нужно увеличить в 2 раза. Можно сделать так:
x = x * 2;
console.log(x);
52
При этом x повторяется два раза.
В JavaScript есть возможность сделать то же самое, но немного проще.
x *= 2; //сокращенное умножение
console.log(x);
52
Итак, здесь продемонстрирована сокращенная форма записи умножения.
Помимо умножения, сокращенные формы записи работают и для других математических операций: деление, сложение и вычитание. Рассмотрим пример со сложением:
var z = 4;
z += 10; //сокращенное сложение
console.log(z);
14
О сокращенных арифметических операциях также читайте здесь.
Сокращенные арифметические операции тоже есть в таблице приоритета операторов и относятся к типу «Присваивание».
Инкремент и Декремент
И последнее о чем речь пойдет в этой статье - Инкремент и Декремент - это соответственно увеличение и уменьшение значения переменной на единицу. Как это выглядит в JavaScript?
x = x + 1; //к переменной x прибавляется единица
x += 1; //сокращенное сложение
x++; //Инкремент - Увеличение переменной x на единицу
Итак, Инкремент - это простейшая и самая удобная форма записи, которая используется, если значение переменной нужно увеличить на единицу.
var x = 26;
x++; //Инкремент
console.log(x);
27
Аналогичная ситуация обстоит с вычитанием, для которого существует термин Декремент.
var y = 26;
y--; //Декремент
console.log(y);
25
Декремент - это простейшая и самая удобная форма записи, которая используется, если значение переменной нужно уменьшить на единицу.
Этой информации достаточно, чтобы можно было сказать, что вы узнали все о переменных, типах данных и об операторах.
Хорошо, если пройденный материал принес пользу и вообще имел смысл для Вас. И тем более, хорошо, если вы получили немного удовольствия при его изучении.
Следующим шаг - решение практической задачи "Coding Challenge". Это первая задача кодирования, где нужно будет применить все полученные знания на практике.
