Operators

Arithmetic operators

operator	description	example	result
+	addition	x + y	sum of x and y
-	subtraction	x - y	difference of x and y
*	multiplication	x * y	product of x and y
/	division	x / y	quotient of x and y
%	modulus	x % y	remainder/rest of x divided by y
**	power	x ** y	x to the power y
++	post/pre increment	x++ ++x	post increment x pre increment x
--	post/pre decrement	x++ ++x	post decrement x pre decrement x

• Open es6/operators/arithmetic.html and es6/operators/arithmetic.js

<main class="container">
    ...
    <pre></pre>
    <pre></pre>
    <pre></pre>
    ...
</main>

let x = 10;
let y = 3;

const example = `Arithmetic operators:
**************************
x = ${x}
y = ${y}
x + y = ${x + y}
x - y = ${x - y}
x * y = ${x * y}
x / y = ${x / y}
x % y = ${x % y}
x ** y = ${x ** y}
`;

console.log(example);
document.querySelector('pre').innerHTML = example;

// post increment
const post = `Post increment (x++):
***************************************
x = ${x}       x starts at 10
x++ = ${x++}     x has not incremented yet!
x = ${x}
`;

console.log(post);
document.querySelector('pre:nth-of-type(2)').innerHTML = post;

// pre increment
const pre = `Pre increment (++y):
***************************************
y = ${y}       y starts at 3
++y = ${++y}     y has has already been incremented
y = ${y}
`;

console.log(pre);
document.querySelector('pre:nth-of-type(3)').innerHTML = pre;

REMARK

• The + operator can also be used to concatenate strings

const name = 'John';
const surName = 'Doe';
const fullName = name + ' ' + surName; // fullName = 'John Doe'

Assignment operators

operator	description	example	result
=	assign	x = y
+=	add and assign	x += y	x = x + y
-=	subtract and assign	x -= y	x = x - y
*=	multiply and assign	x *= y	x = x * y
/=	divide and assign quotient	x /= y	x = x / y
%=	divide and assign modulus	x %= y	x = x % y

• Open es6/operators/assignment.html and es6/operators/assignment.js

<main class="container">
    ...
    <pre></pre>
    ...
</main>

let x = 10;
const y = 2;
const z = 3;

let example = `Assignment operators:
----------------------------\n`;
x += y;
example += `x += y => (10 + 2) => x = ${x}\n`;
x -= z;
example += `x -= z => (12 - 3) => x = ${x}\n`;
x *= z;
example += `x *= z => (9 * 3)  => x = ${x}\n`;
x /= z;
example += `x /= z => (27 / 3) => x = ${x}\n`;
x %= y;
example += `x %= y => (9 % 2)  => x = ${x}`;

console.log(example);
document.querySelector('pre').innerHTML = example;

Comparison operators

operator	description	example	result
==	equal	x == y	true if x is equal to y
===	identical	x === y	true if x is equal to y AND they are of the same type
!=	not equal	x != y	true if x is not equal to y
!==	not identical	x !== y	true if x is not equal to y OR they are not of the same type
<	less than	x < y	true if x is less than y
<=	less than or equal to	x <= y	true if x is less than or equal to y
>	greater than	x > y	true if x is greater than y
>=	greater than or equal to	x >= y	true if x is greater than or equal to y

• Open es6/operators/comparison.html and es6/operators/comparison.js

<main class="container">
    ...
    <pre></pre>
    ...
</main>

const x1 = 10;
const x2 = '10';
const y = 5;

const example = `Comparison operators:
----------------------------
x1 == x2    => ${x1 == x2}
x1 === x2   => ${x1 === x2}
x1 !== y    => ${x1 !== y}
x1 < y      => ${x1 < y}
x1 > y      => ${x1 > y}`;

console.log(example);
document.querySelector('pre').innerHTML = example;

Logical operators

operator	example	result
&&	x && y	true if both x AND y are true
||	x || y	true if either x OR y is true
!	!x	true if x is false (NOT true)

• Open es6/operators/logical.html and es6/operators/logical.js

<main class="container">
    ...
    <pre></pre>
    ...
</main>

const x = 6;
const y = 4;

const example = `Logical operators:
*****************************
(x < 8 && y > 3)    => ${x < 8 && y > 3}
(x < 8 && y > 6)    => ${x < 8 && y > 6}
(x < 8 || y > 3)    => ${x < 8 || y > 3}
!(x < 8 || y > 6)   => ${!(x < 8 || y > 6)}
`;

console.log(example);
document.querySelector('pre').innerHTML = example;

Exercises

• Open exercises/index.html and make the exercises under the tab ES6 > Operators