This is part 3 of the tutorial series Learn JavaScript in Construct. This part continues on from part 2. So in case you missed it, see Learn JavaScript in Construct, part 2: language basics.
In this part we'll continue using the same project, working with a mix of code snippets entered in to Construct and in to the browser console.
If you've used Construct's event sheets, you may notice some similarities between how Construct expressions and JavaScript expressions work. However bear in mind that Construct's expressions are not JavaScript code - it's a different system that just happens to work similarly in some respects.
Operators
In part 2 we used mathematical calculations like 10 + 5. The + here is an operator for addition. We already covered a few operators like - for subtraction, * for multiply, and = for assignment. In this part we'll cover a range of other operators that are frequently used in programming.
Other mathematical operators
There are two more mathematical operators you can use in JavaScript:
- Remainder
%
- Exponentiation
**
Remainder
The remainder operator calculates the remainder of a division, i.e. a % b calculates the remainder of a divided by b. For example 13 % 5 returns 3, because 13 / 5 is 2 remainder 3. Another way to think about it is 13 is 3 above the next lowest multiple of 5 (which is 10). Note despite the use of the percent sign, this is not related to percentages.
// Try entering in to the console:
13 % 5 // 3
5 % 2 // 1
27 % 10 // 7
This also works with fractions in JavaScript:
// Try entering in to the console:
5.5 % 2 // 1.5
9 % 3.5 // 2
3.25 % 1.25 // 0.75
Exponentiation
The exponentiation operator a ** b calculates a raised to the power b. For example 5 ** 2 returns 25. This can also work with fractions - you may remember that raising to a power of a half is the same as taking the square root, so 25 ** (1/2) returns 5.
// Try entering in to the console:
6 ** 2 // 36
2 ** 3 // 8
100 ** (1/2) // 10
1.5 ** 2 // 2.25
6.25 ** 0.5 // 2.5
Assignment operators
Previously we used = to assign a value to a variable. When working with numbers, it's common to assign a variable to a calculation that includes itself, such as:
let number = 7;
number = number * 2;
console.log(number); // 14
See how the assignment number = number * 2 assigns number to a calculation involving itself. In this case, that line will double the value of number, as it assigns itself its own value multiplied by 2.
JavaScript provides several additional assignment operators as a shorthand for this, such as *=. In other words, number *= 2 is a shorthand for number = number * 2. The code snippet below does exactly the same thing as before.
let number = 7;
number *= 2;
console.log(number); // 14
There is a special assignment operator for every mathematical operator we've tried so far:
a += b is the same as a = a + ba -= b is the same as a = a - ba *= b is the same as a = a * ba /= b is the same as a = a / ba %= b is the same as a = a % ba **= b is the same as a = a ** b
Assignment returns a value
It's interesting to note that assignment actually returns a value. For example you can log the result of an assignment.
let a = 2;
console.log(a += 2); // logs 4
The assignment returns the value of the variable after the assignment was done. In this case since a had 2 added to it, the result of the assignment is the value of a after the addition, which is 4.
This doesn't matter if you use assignment on a line by itself, since the returned value is ignored. However it's relevant for the next section.
Increment and decrement
In programming it's very common to add or subtract 1. You could use a += 1 to increment a. However JavaScript provides a further shorthand for this: a++.
// These lines all do the same thing:
a = a + 1;
a += 1;
a++;
Similarly there is a-- to subtract 1.
You can also put ++ or -- before the variable name, such as ++a. This does almost the same thing, but returns a different value:
- The postfix form
a++ adds 1 to a, and returns the old value before the addition was done
- The prefix form
++a adds 1 to a, and returns the new value after the addition was done
Here is a code sample demonstrating the difference:
let a = 1;
console.log(a++);
console.log(a);
This will log 1 then 2. Logging a++ will display the initial value of a, and then afterwards add 1; the next line will then display the value again, which is then 2. In contrast, try changing the increment to the prefix form:
let a = 1;
console.log(++a);
console.log(a);
This will log 2 then 2. Logging ++a will first add 1, and then display the resulting value of 2. The next line will then display the value again, which is still 2.
So if you do use the return value of the assignment a += 1 and prefix form ++a are the same, as they both add 1 and return the new value. However a += 1 and postfix form a++ would not be exactly the same as a++ adds 1 but returns the old value. If you don't use the return value, such as if it's on a line by itself, then a += 1, ++a and a++ are all equivalent.