Command Palette

Search for a command to run...

Hectal
Phase 2Beginner3 of 16 in JavaScript

Operators and Control Flow

Operators and precedence, &&, || and ??, if/else and the ternary, switch, every kind of loop, break and continue, and for...of vs for...in.

Values on their own don't do much. Operators combine them: add numbers, join strings, compare two values, and pick between options with &&, || and ??. You'll learn exactly what each operator returns, the order JavaScript evaluates them in (precedence), and the traps where + joins instead of adds.

Then you'll take control of which code runs and how often. if, else and the ternary choose a path; switch picks one case out of many (and you'll see when a plain object or a Map is the better tool). Loops (for, while, do...while) repeat work, and break, continue and labels steer them. Finally, for...of and for...in walk over lists and object keys, and you'll learn which to use when.

This phase builds on Phase 1 (values, types, truthiness and ===). Every example is live: predict the output first, press Run, and check. Loops are where algorithms start, so this phase is also the bridge to Hectal's /dsa course.

0/7 · 0%
7 topics ~3 h 24 code blocks & diagrams
Start with the first topic
1
2.1

Operators

Operators are the symbols that combine values into new values: + - * / % ** for maths, = and += to store results, ++ and -- to count, < > <= >= to compare, and + again to join strings, all evaluated in a fixed order called precedence.

28 min 4 code practice

2
2.2

Logical Operators

&&, || and ! combine true/false conditions, but && and || really return one of their operands and stop early (short-circuit); ?? picks a fallback only for null or undefined, and ||=, &&= and ??= assign on the same rules.

25 min 4 code practice

3
2.3

Conditions: if, else and the Ternary

if runs a block of code only when a condition is truthy, else if and else add other paths, and the ternary condition ? a : b is the expression version that picks one of two values.

26 min 3 code practice

4
2.4

switch Statements

switch compares one value against a list of case values with === and jumps to the first match; execution then falls through into the next cases until a break, and default handles no match. For pure value-to-value mapping, an object or Map is often better.

20 min 3 code practice

5
2.5

Loops: for, while and do...while

Loops repeat a block of code: for when you know how to count the repeats, while when you repeat until a condition changes, and do...while when the body must run at least once. Most loop bugs are off-by-one errors and conditions that never become false.

27 min 4 code practice

6
2.6

break, continue and Labels

break leaves a loop (or switch) immediately, continue skips the rest of the current iteration and moves on to the next one, and a label lets either of them act on an outer loop instead of the innermost one.

21 min 3 code practice

7
2.7

for...of and for...in

for...of walks through the values of anything iterable (arrays, strings, Maps, Sets), while for...in walks through the property names (keys) of an object, including inherited ones. Use for...of for lists and Object.keys/entries with for...of for objects.

26 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Even or odd?

Finish the function evenOrOdd(n) so it returns the string "even" when the whole number n is even and "odd" when it is odd.

Beginner
2

Grade calculator

Finish grade(score). It returns "A" for 90 to 100, "B" for 75 up to (not including) 90, "C" for 50 up to 75, and "F" for 0 up to 50.

Beginner
3

Shipping zones

Write shippingCost(zone): "local" costs 40, "national" costs 80 and "international" costs 250. Any other zone returns null, including tricky names like "constructor" and "toString".

Beginner
4

FizzBuzz on the page

When Run is clicked, read the number n from the input and fill the list #out with one <li> for each number from 1 to n.

Beginner
5

Order summary

Write summarize(cart). cart is an array of items like { name: "Tea", price: 20, qty: 2 }. It returns an object { count, total }: the number of units and the total price.

Intermediate