JavaScript Simplified · One concept, one day, one project · Day 4 of 32

Operators and Expressions

Doing things with values: calculating, comparing and combining. You build a small calculator that adds, subtracts, multiplies and divides.

By the end of today you can

Use arithmetic operators to calculate with numbers
Use comparison operators to ask true/false questions
Combine conditions with logical operators
Explain what an expression is and read one correctly

You can store values. Now you make them work. An operator is a symbol that does something with values: add them, compare them, combine them. A line that produces a value is an expression.

1. Arithmetic Operators

Definition

Arithmetic operators do maths with numbers.

Operator	Does	Example	Result
`+`	Add	`10 + 5`	15
`-`	Subtract	`10 - 5`	5
`*`	Multiply	`10 * 5`	50
`/`	Divide	`10 / 5`	2
`%`	Remainder	`10 % 3`	1

What this code doesThe % (remainder) is new: it gives what is left over after dividing. 10 divided by 3 is 3 with 1 left over, so 10 % 3 is 1. It is surprisingly useful.

app.js

const a = 10;
const b = 3;
console.log(a + b);  // add
console.log(a - b);  // subtract
console.log(a * b);  // multiply
console.log(a % b);  // remainder of 10 divided by 3

OUTPUT   TERMINAL

➜ webbo3 node app.js
13
7
30
1

2. Assignment Operators

You know = stores a value. There are shortcuts for changing a value based on itself. += means "add to what is already there".

What this code doestotal += 50 adds 50 to total (150). total -= 30 takes 30 off (120). A tidy way to update a running value.

app.js

let total = 100;
total += 50;  // the same as total = total + 50
console.log(total);
total -= 30;  // the same as total = total - 30
console.log(total);

OUTPUT   TERMINAL

➜ webbo3 node app.js
150
120

3. Comparison Operators

Definition

Comparison operators ask a question and answer with a boolean: true or false. This is how a program decides things, which is the whole of next week.

Operator	Asks	Example	Answer
`===`	Equal to?	`5 === 5`	true
`!==`	Not equal to?	`5 !== 3`	true
`>`	Greater than?	`5 > 3`	true
`<`	Less than?	`5 < 3`	false
`>=`	Greater or equal?	`5 >= 5`	true
`<=`	Less or equal?	`3 <= 5`	true

What this code doesEach line is a question about score, answered true or false. === checks "exactly equal". Always use three equals, not two; you will see why later.

app.js

const score = 72;
console.log(score >= 50);  // did they pass?
console.log(score === 100); // a perfect score?
console.log(score < 40);    // did they fail?

OUTPUT   TERMINAL

➜ webbo3 node app.js
true
false
false

4. Logical Operators

Definition

Logical operators combine true/false values, so you can ask about more than one thing at once. && means AND, || means OR, ! means NOT.

What this code does&& is true only when both sides are true. || is true when either side is true. ! flips a boolean. These power every real decision.

app.js

const age = 20;
const hasID = true;
// AND: both must be true
console.log(age >= 18 && hasID);
// OR: at least one must be true
console.log(age < 13 || age > 65);
// NOT: flips true to false
console.log(!hasID);

OUTPUT   TERMINAL

➜ webbo3 node app.js
true
false
false

What is an expression?

An expression is any piece of code that produces a value. 10 + 5 is an expression (it produces 15). score >= 50 is an expression (it produces true). You can store the result in a variable.

Today’s Mini Project

🧮 Simple Calculator

Store two numbers, then print their sum, difference, product and quotient. A real calculator is just these four expressions.

What this code doesFour expressions, four results. The brackets around (x + y) matter: they tell JavaScript to add first, then join the result to the text.

app.js

const x = 24;
const y = 6;

console.log("Sum: " + (x + y));
console.log("Difference: " + (x - y));
console.log("Product: " + (x * y));
console.log("Quotient: " + (x / y));

OUTPUT   TERMINAL

➜ webbo3 node app.js
Sum: 30
Difference: 18
Product: 144
Quotient: 4

Watch the brackets when mixing numbers and text "Sum: " + x + y would join everything as text and give "Sum: 246", not 30. The brackets in "Sum: " + (x + y) force the addition to happen first.

Challenge (15 minutes)

Add one more line that shows the remainder when x is divided by y, using %. Then change x to 25 and see the remainder change. Expected: a remainder line that updates when you change the numbers.

Try This

Store your age in a variable and print whether you are old enough to vote with age >= 18.

Expected: true or false, depending on your age. That one line is the seed of every "if this, then that" you will write.

Picture This

Numbers that add, questions that answer true or false, conditions that combine. This is the raw material of thinking. Next week you hand these true/false answers to JavaScript and let it make real decisions.

Checkpoint

What does 10 % 3 give, and why?

It gives 1: the remainder after dividing 10 by 3. 3 goes into 10 three times (9) with 1 left over. The % operator is the remainder.

What type of value does a comparison like 5 > 3 produce?

A boolean: true or false. Comparisons ask a question and answer yes or no, which is how programs make decisions.

What does && mean, and when is it true?

It means AND. It is true only when both sides are true. If either side is false, the whole thing is false.

Tick Before You Move On

☐ I can calculate with +, -, *, / and %
☐ I can compare values and get true or false
☐ I can combine conditions with &&, || and !
☐ I built the Simple Calculator

Quick Recap

Operators do things with values; an expression is code that produces a value. Arithmetic operators calculate; % gives the remainder. Comparison operators ask questions and answer true or false. Logical operators (&&, ||, !) combine true/false values.

Next: Day 5, and a new layer. You have true/false answers; now you give them to JavaScript so it can make decisions with if and else.

Operators and Expressions

1. Arithmetic Operators

Definition

2. Assignment Operators

3. Comparison Operators

Definition

4. Logical Operators

Definition

What is an expression?

Today’s Mini Project

Checkpoint

Learn this with a real instructor