Базовые операторы, математика
Многие операторы знакомы нам ещё со школы: сложение + , умножение * , вычитание — и так далее.
В этой главе мы начнём с простых операторов, а потом сконцентрируемся на специфических для JavaScript аспектах, которые не проходят в школьном курсе арифметики.
Термины: «унарный», «бинарный», «операнд»
Прежде, чем мы двинемся дальше, давайте разберёмся с терминологией.
- Операнд – то, к чему применяется оператор. Например, в умножении 5 * 2 есть два операнда: левый операнд равен 5 , а правый операнд равен 2 . Иногда их называют «аргументами» вместо «операндов».
- Унарным называется оператор, который применяется к одному операнду. Например, оператор унарный минус «-» меняет знак числа на противоположный:
let x = 1; x = -x; alert( x ); // -1, применили унарный минус
let x = 1, y = 3; alert( y - x ); // 2, бинарный минус вычитает значения
Математика
Поддерживаются следующие математические операторы:
- Сложение + ,
- Вычитание — ,
- Умножение * ,
- Деление / ,
- Взятие остатка от деления % ,
- Возведение в степень ** .
Первые четыре оператора очевидны, а про % и ** стоит сказать несколько слов.
Взятие остатка %
Оператор взятия остатка % , несмотря на обозначение, никакого отношения к процентам не имеет.
Результат a % b – это остаток от целочисленного деления a на b .
alert( 5 % 2 ); // 1, остаток от деления 5 на 2 alert( 8 % 3 ); // 2, остаток от деления 8 на 3 alert( 8 % 4 ); // 0, остаток от деления 8 на 4
Возведение в степень **
Оператор возведения в степень a ** b возводит a в степень b .
В школьной математике мы записываем это как a b .
alert( 2 ** 2 ); // 2² = 4 alert( 2 ** 3 ); // 2³ = 8 alert( 2 ** 4 ); // 2⁴ = 16
Математически, оператор работает и для нецелых чисел. Например, квадратный корень является возведением в степень ½:
alert( 4 ** (1/2) ); // 2 (степень 1/2 эквивалентна взятию квадратного корня)
Сложение строк при помощи бинарного +
Давайте рассмотрим специальные возможности операторов JavaScript, которые выходят за рамки школьной арифметики.
Обычно при помощи плюса ‘+’ складывают числа.
Но если бинарный оператор ‘+’ применить к строкам, то он их объединяет в одну:
let s = "моя" + "строка"; alert(s); // моястрока
Обратите внимание, если хотя бы один операнд является строкой, то второй будет также преобразован в строку.
alert( '1' + 2 ); // "12" alert( 2 + '1' ); // "21"
Как видите, не важно, первый или второй операнд является строкой.
Вот пример посложнее:
alert(2 + 2 + '1' ); // будет "41", а не "221"
Здесь операторы работают один за другим. Первый + складывает два числа и возвращает 4 , затем следующий + объединяет результат со строкой, производя действие 4 + ‘1’ = ’41’ .
Сложение и преобразование строк — это особенность бинарного плюса + . Другие арифметические операторы работают только с числами и всегда преобразуют операнды в числа.
Например, вычитание и деление:
alert( 6 - '2' ); // 4, '2' приводится к числу alert( '6' / '2' ); // 3, оба операнда приводятся к числам
Приведение к числу, унарный +
Плюс + существует в двух формах: бинарной, которую мы использовали выше, и унарной.
Унарный, то есть применённый к одному значению, плюс + ничего не делает с числами. Но если операнд не число, унарный плюс преобразует его в число.
// Не влияет на числа let x = 1; alert( +x ); // 1 let y = -2; alert( +y ); // -2 // Преобразует не числа в числа alert( +true ); // 1 alert( +"" ); // 0
На самом деле это то же самое, что и Number(. ) , только короче.
Необходимость преобразовывать строки в числа возникает очень часто. Например, обычно значения полей HTML-формы — это строки. А что, если их нужно, к примеру, сложить?
Бинарный плюс сложит их как строки:
let apples = "2"; let oranges = "3"; alert( apples + oranges ); // "23", так как бинарный плюс объединяет строки
Поэтому используем унарный плюс, чтобы преобразовать к числу:
let apples = "2"; let oranges = "3"; // оба операнда предварительно преобразованы в числа alert( +apples + +oranges ); // 5 // более длинный вариант // alert( Number(apples) + Number(oranges) ); // 5
С точки зрения математика, такое изобилие плюсов выглядит странным. Но с точки зрения программиста тут нет ничего особенного: сначала выполнятся унарные плюсы, которые приведут строки к числам, а затем бинарный ‘+’ их сложит.
Почему унарные плюсы выполнились до бинарного сложения? Как мы сейчас увидим, дело в их приоритете.
Приоритет операторов
В том случае, если в выражении есть несколько операторов – порядок их выполнения определяется приоритетом, или, другими словами, существует определённый порядок выполнения операторов.
Из школы мы знаем, что умножение в выражении 1 + 2 * 2 выполнится раньше сложения. Это как раз и есть «приоритет». Говорят, что умножение имеет более высокий приоритет, чем сложение.
Скобки важнее, чем приоритет, так что, если мы не удовлетворены порядком по умолчанию, мы можем использовать их, чтобы изменить приоритет. Например, написать (1 + 2) * 2 .
В JavaScript много операторов. Каждый оператор имеет соответствующий номер приоритета. Тот, у кого это число больше, – выполнится раньше. Если приоритет одинаковый, то порядок выполнения – слева направо.
Отрывок из таблицы приоритетов (нет необходимости всё запоминать, обратите внимание, что приоритет унарных операторов выше, чем соответствующих бинарных):
| Приоритет | Название | Обозначение |
|---|---|---|
| … | … | … |
| 15 | унарный плюс | + |
| 15 | унарный минус | — |
| 14 | возведение в степень | ** |
| 13 | умножение | * |
| 13 | деление | / |
| 12 | сложение | + |
| 12 | вычитание | — |
| … | … | … |
| 2 | присваивание | = |
| … | … | … |
Так как «унарный плюс» имеет приоритет 15 , который выше, чем 12 у «сложения» (бинарный плюс), то в выражении «+apples + +oranges» сначала выполнятся унарные плюсы, а затем сложение.
Присваивание
Давайте отметим, что в таблице приоритетов также есть оператор присваивания = . У него один из самых низких приоритетов: 2 .
Именно поэтому, когда переменной что-либо присваивают, например, x = 2 * 2 + 1 , то сначала выполнится арифметика, а уже затем произойдёт присваивание = с сохранением результата в x .
let x = 2 * 2 + 1; alert( x ); // 5
Присваивание = возвращает значение
Тот факт, что = является оператором, а не «магической» конструкцией языка, имеет интересные последствия.
Большинство операторов в JavaScript возвращают значение. Для некоторых это очевидно, например сложение + или умножение * . Но и оператор присваивания не является исключением.
Вызов x = value записывает value в x и возвращает его.
Благодаря этому присваивание можно использовать как часть более сложного выражения:
let a = 1; let b = 2; let c = 3 - (a = b + 1); alert( a ); // 3 alert( c ); // 0
В примере выше результатом (a = b + 1) будет значение, которое присваивается переменной a (то есть 3 ). Потом оно используется для дальнейших вычислений.
Забавное применение присваивания, не так ли? Нам нужно понимать, как это работает, потому что иногда это можно увидеть в JavaScript-библиотеках.
Однако писать самим в таком стиле не рекомендуется. Такие трюки не сделают ваш код более понятным или читабельным.
Присваивание по цепочке
Рассмотрим ещё одну интересную возможность: цепочку присваиваний.
let a, b, c; a = b = c = 2 + 2; alert( a ); // 4 alert( b ); // 4 alert( c ); // 4
Такое присваивание работает справа налево. Сначала вычисляется самое правое выражение 2 + 2 , и затем результат присваивается переменным слева: c , b и a . В конце у всех переменных будет одно значение.
Опять-таки, чтобы код читался легче, лучше разделять подобные конструкции на несколько строчек:
c = 2 + 2; b = c; a = c;
Польза от такого стиля особенно ощущается при быстром просмотре кода.
Сокращённая арифметика с присваиванием
Часто нужно применить оператор к переменной и сохранить результат в ней же.
let n = 2; n = n + 5; n = n * 2;
Эту запись можно укоротить при помощи совмещённых операторов += и *= :
let n = 2; n += 5; // теперь n = 7 (работает как n = n + 5) n *= 2; // теперь n = 14 (работает как n = n * 2) alert( n ); // 14
Подобные краткие формы записи существуют для всех арифметических и побитовых операторов: /= , -= , **= и так далее.
Вызов с присваиванием имеет в точности такой же приоритет, как обычное присваивание, то есть выполнится после большинства других операций:
let n = 2; n *= 3 + 5; alert( n ); // 16 (сначала выполнится правая часть, выражение идентично n *= 8)
Инкремент/декремент
Одной из наиболее частых числовых операций является увеличение или уменьшение на единицу.
Для этого существуют даже специальные операторы:
-
Инкремент ++ увеличивает переменную на 1:
let counter = 2; counter++; // работает как counter = counter + 1, просто запись короче alert( counter ); // 3
let counter = 2; counter--; // работает как counter = counter - 1, просто запись короче alert( counter ); // 1
Инкремент/декремент можно применить только к переменной. Попытка использовать его на значении, типа 5++, приведёт к ошибке.
Операторы ++ и — могут быть расположены не только после, но и до переменной.
- Когда оператор идёт после переменной — это «постфиксная форма»: counter++ .
- «Префиксная форма» — это когда оператор идёт перед переменной: ++counter .
Обе эти инструкции делают одно и то же: увеличивают counter на 1 .
Есть ли разница между ними? Да, но увидеть её мы сможем, только если будем использовать значение, которое возвращают ++/— .
Давайте проясним этот момент. Как мы знаем, все операторы возвращают значение. Операторы инкремента/декремента не исключение. Префиксная форма возвращает новое значение, в то время как постфиксная форма возвращает старое (до увеличения/уменьшения числа).
Чтобы увидеть разницу, вот небольшой пример:
let counter = 1; let a = ++counter; // (*) alert(a); // 2
В строке (*) префиксная форма ++counter увеличивает counter и возвращает новое значение 2 . Так что alert покажет 2 .
Теперь посмотрим на постфиксную форму:
let counter = 1; let a = counter++; // (*) меняем ++counter на counter++ alert(a); // 1
В строке (*) постфиксная форма counter++ также увеличивает counter , но возвращает старое значение (которое было до увеличения). Так что alert покажет 1 .
-
Если результат оператора не используется, а нужно только увеличить/уменьшить переменную, тогда без разницы, какую форму использовать:
let counter = 0; counter++; ++counter; alert( counter ); // 2, обе строки сделали одно и то же
Инкремент и декремент — Основы JavaScript
Из языка Си в JavaScript перекочевали две операции: инкремент ++ и декремент — , которые очень часто встречаются вместе с циклами. Эти унарные операции увеличивают и уменьшают на единицу число, записанное в переменную:
let i = 0; i++; // 0 i++; // 1 i--; // 2 i--; // 1
Кроме постфиксной формы, у них есть и префиксная:
let i = 0; ++i; // 1 ++i; // 2 --i; // 1 --i; // 0
Кажется, что нет никакой разницы между постфиксной и префиксной формами. Но тут начинаются сложности.
В отличие от всех остальных операций, которые не имеют побочных эффектов и просто возвращают новое значение, инкремент и декремент не только возвращают значение, но и изменяют значение переменной.
При использовании префиксной нотации сначала происходит изменение переменной, а потом возврат. При использовании постфиксной нотации — наоборот: можно считать, что сначала происходит возврат, а потом изменение переменной. Правило работает одинаково для инкремента и декремента. Для простоты рассмотрим только инкремент:
let x = 5; console.log(++x); // => 6 console.log(x); // => 6 console.log(x++); // => 6 console.log(x); // => 7
- Вывели на экран ++x . Это префиксный инкремент, поэтому сначала значение переменной увеличилось на 1, потом результат вернулся и вывелся на экран.
- Так как значение изменилось, console.log(x) вывел 6.
- Теперь выводим на экран x++ . Это постфиксный инкремент, поэтому возвращено значение, содержавшееся в переменной до ее увеличения на 1.
- Так как значение изменилось, console.log(x) вывел 7.
Особенно страшным это становится тогда, когда инкремент вставляют внутрь других операций: x = i++ — 7 + —h . Понять такой код почти невозможно, и его написание должно рассматриваться как тяжкое преступление.
Например, в языке JavaScript линтер (программа, проверяющая код) сразу начинает ругаться, когда встречает использование инкремента или декремента.
Рекомендации по использованию:
- Никогда не мешайте в рамках одного выражения операции/функции без побочных эффектов с операциями/функциями, обладающими побочными эффектами.
- Используйте инкремент и декремент только там, где нет разницы между префиксным и постфиксным вариантом: отдельно от всего, на своей собственной строчке кода.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
JavaScript: Инкремент и декремент
Из языка Си в JavaScript перекочевали две операции: инкремент ++ и декремент — , которые очень часто встречаются вместе с циклами. Эти унарные операции увеличивают и уменьшают на единицу число, записанное в переменную:
let i = 0; i++; // 0 i++; // 1 i--; // 2 i--; // 1
Кроме постфиксной формы, у них есть и префиксная:
let i = 0; ++i; // 1 ++i; // 2 --i; // 1 --i; // 0
Кажется, что нет никакой разницы между постфиксной и префиксной формами. Но тут начинаются сложности.
В отличие от всех остальных операций, которые не имеют побочных эффектов и просто возвращают новое значение, инкремент и декремент не только возвращают значение, но и изменяют значение переменной.
При использовании префиксной нотации сначала происходит изменение переменной, а потом возврат.
При использовании постфиксной нотации — наоборот: можно считать, что сначала происходит возврат, а потом изменение переменной.
Правило работает одинаково для инкремента и декремента. Для простоты рассмотрим только инкремент:
let x = 5; console.log(++x); // => 6 console.log(x); // => 6 console.log(x++); // => 6 console.log(x); // => 7
- Вывели на экран ++x . Это префиксный инкремент, поэтому сначала значение переменной увеличилось на 1, потом результат вернулся и вывелся на экран.
- Так как значение изменилось, console.log(x) вывел 6.
- Теперь выводим на экран x++ . Это постфиксный инкремент, поэтому возвращено значение, содержавшееся в переменной до её увеличения на 1.
- Так как значение изменилось, console.log(x) вывел 7.
Особенно страшным это становится тогда, когда инкремент вставляют внутрь других операций: x = i++ — 7 + —h . Понять такой код почти невозможно, и его написание должно рассматриваться как тяжкое преступление.
Например, в языке JavaScript линтер (программа, проверяющая код) сразу начинает ругаться, когда встречает использование инкремента или декремента.
Рекомендации по использованию:
- Никогда не мешайте в рамках одного выражения операции/функции без побочных эффектов с операциями/функциями, обладающими побочными эффектами.
- Используйте инкремент и декремент только там, где нет разницы между префиксным и постфиксным вариантом: отдельно от всего, на своей собственной строчке кода.
Задание
Напишите функцию makeItFunny() , которая принимает на вход строку и возвращает её копию, у которой каждый n-ный элемент переведен в верхний регистр. n – задается на входе в функцию.
Для определения каждого n-ного элемента понадобится остаток от деления % . Подумайте, как его можно использовать.
const text = 'I never look back'; // Каждый третий элемент makeItFunny(text, 3); // 'I NevEr LooK bAck'
Упражнение не проходит проверку — что делать?
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя
Это нормально , в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
Определения
- Побочный эффект — действие, которое изменяет внешнее окружение (среду выполнения). Например, вывод на экран или отправка письма.
Декремент (—)
Оператор декремента ( — ) уменьшает (вычитает единицу) свой операнд и возвращает значение.
Интерактивный пример
Синтаксис
Operator: x-- or --x
Описание
Если используется постфикс, с оператором после операнда (например, x—), оператор декремента уменьшает и возвращает значение перед уменьшением.
Если используется префикс, с оператором перед операндом (например, —x), оператор декремента уменьшает и возвращает значение после уменьшения.
Примеры
Постфиксный декремент
let x = 3; y = x--; // y = 3 // x = 2
