JS Operators

JavaScript Operators

We know many operators from school. They are things like addition +, multiplication *, subtraction -, and so on. In this chapter, we’ll start with simple operators, then concentrate on JavaScript-specific aspects, not covered by school arithmetic.

Terms: “unary”, “binary”, “operand”

Before we move on, let’s grasp some common terminology.

• An operand is what operators are applied to. For instance, in the multiplication of 5 * 2 there are two operands: the left operand is 5 and the right operand is 2.
• An operator is unary if it has a single operand. For example, the unary negation - reverses the sign of a number.
• An operator is binary if it has two operands. The same minus exists in binary form as well.

// Unary operator
let x = 1;
x = -x;
console.log(x); // -1

// Binary operator
let y = 3;
console.log(y - x); // 4 (which is 3 - (-1))

Maths

The following math operations are supported:

• Addition +
• Subtraction -
• Multiplication *
• Division /
• Remainder %
• Exponentiation **

Remainder %

The remainder operator %, despite its appearance, is not related to percents. The result of a % b is the remainder of the integer division of a by b.

console.log( 5 % 2 ); // 1, the remainder of 5 divided by 2
console.log( 8 % 3 ); // 2, the remainder of 8 divided by 3

Exponentiation **

The exponentiation operator a ** b raises a to the power of b.

console.log( 2 ** 3 ); // 8 (2 * 2 * 2)
console.log( 4 ** (1/2) ); // 2 (power of 1/2 is the same as a square root)

String Concatenation with Binary +

If the binary + is applied to strings, it merges (concatenates) them. If any of the operands is a string, then the other one is converted to a string too.

console.log('1' + 2); // "12"
console.log(2 + '1'); // "21"

console.log(2 + 2 + '1' ); // "41", not "221"
console.log('1' + 2 + 2); // "122", not "14"

The binary + is the only operator that supports strings in such a way. Other arithmetic operators work only with numbers and always convert their operands to numbers.

Numeric Conversion, Unary +

The unary plus + applied to a single value doesn’t do anything to numbers. But if the operand is not a number, the unary plus converts it into a number.

// Converts non-numbers
console.log( +true ); // 1
console.log( +"" );   // 0

let apples = "2";
let oranges = "3";
// both values converted to numbers before the binary plus
console.log( +apples + +oranges ); // 5

Operator Precedence

If an expression has more than one operator, the execution order is defined by their precedence. The one with the larger number executes first. If the precedence is the same, the execution order is from left to right.

Assignment Operators

The assignment operator = has a very low precedence. This is why, when we assign a variable like x = 2 * 2 + 1, the calculations on the right are done first.

Chaining Assignments

Assignments can be chained. In the example below, all variables share a single value.

let a, b, c;
a = b = c = 2 + 2;

console.log( a ); // 4
console.log( b ); // 4
console.log( c ); // 4

Modify-in-place

We often need to apply an operator to a variable and store the new result in that same variable. This can be shortened using operators like += and *=.

let n = 2;
n += 5; // now n = 7 (same as n = n + 5)
n *= 2; // now n = 14 (same as n = n * 2)

console.log( n ); // 14

3. Assignment result

What are the values of a and x after the code below?

let a = 2;
let x = 1 + (a *= 2);
let a = 2;
let x = 1 + (a *= 2);
console.log(`a = ${a}`); // 4
console.log(`x = ${x}`); // 5

Increment/Decrement

Increasing or decreasing a number by one is among the most common numerical operations.

• Increment ++ increases a variable by 1.
• Decrement -- decreases a variable by 1.

The operators can be placed either before a variable (prefix form) or after (postfix form).

• The prefix form (++counter) returns the new value.
• The postfix form (counter++) returns the old value (prior to the increment/decrement).

let counter1 = 1;
let a = ++counter1; // prefix form
console.log(a); // 2

let counter2 = 1;
let b = counter2++; // postfix form
console.log(b); // 1

Tasks

1. The postfix and prefix forms

What are the final values of all variables a, b, c and d after the code below?

let a = 1, b = 1;

let c = ++a; // ?
let d = b++; // ?

2. Fix the addition

The code below asks the user for two numbers and shows their sum. It works incorrectly. The output in the example below is "12". Why? Fix it. The result should be 3.

// The prompt function returns strings.
let a = "1";
let b = "2";

// The binary + concatenates strings.
console.log(a + b); // "12"
// Fix: Convert strings to numbers before adding.
console.log(+a + +b); // 3