Recently, a friend asked me to explain a piece of code I use to loop a slider.
i = ++i % slides.length;
I’ve been using this piece of code more than once lately, but to understand it you must know about expressions.
false (logical expressions), an object or special values like
Two types of expressions
Some expressions assign a value to a variable, some don’t. The code
i + 1 is an expression that doesn’t assign a value to a variable, but the following almost equivalent expressions
i = i + 1,
i += 1 and
i++ do. They are almost equivalent because while they all increment the variable
i by one, the values of the expressions themselves are different. You can see this for yourself if you run the following code.
var i = 0; console.log(i = i + 1); // 1 console.log(i); // 1 var i = 0; console.log(i += 1); // 1 console.log(i); // 1 var i = 0; console.log(i++); // 0 console.log(i); // 1
This is where
i++ is different from
++i. They are both expressions that increment
i by one, but the former expression evaluates to the value of
i before incrementing while the latter evaluates to the value of
i after incrementing. You can easily remember this by reading the former as “give me
i, then increment
i” and the latter as “increment
i, then give me
var i = 0; console.log(++i); // 1 console.log(i); // 1
An expression that assigns a value to a variable, doesn’t necessarily need to evaluate to this value itself.
Something about operators
In the examples above we’ve already seen different operators like
+=, which are binary operators, and
++, which is an unary operator. Binary operators require two operands, one before and one after the operator, and unary operators require one operand, either before or after the operator. There is one ternary operator, that requires three operands, the conditional operator
Operators can be grouped by type. For example
+= are assignment operators, and
% for that matter) are arithmetic operators. There is one other operator I’d like to mention, the member operator
. (dot). Other operators and operator types are outside the scope of this article, but if you want you can read more on Mozilla Developer Network.
Operands are expressions, which can be as simple as a constant or variable, or complex with different operators and sub-expressions. For example
i = (i + 1) instead of
(i = i) + 1? The latter is actually valid code, but it doesn’t make much sense.
For a full list see MDN, but for now this short list (in order of precedence) of just arithmetic and arithmetic assignment operators will do:
|Operator type||Individual operators|
So assignment comes last, which makes sense because that’s why
i = i + 1 is read as
i = (i + 1).
Putting it all together
Back to the original code:
i = ++i % slides.length;
We have four operators of which we now know the order of precedence:
=. Let’s assume we have 4 slides and we are on the last one, so
i = 3. Resolving operators one by one:
|step||expression||value of i|
This does exactly what we want it to do, loop back to the first slide. Note that while
++i changes the value of
i, we aren’t using this new value. We are using the value of the expression so
(i + 1) (between parenthesis to force precedence) would have given the same result,
++i is just shorter. Now follow the same steps to see what happens if we are not yet on the last slide.