if, for, and giving a job a name
← Back to Web CodingA condition in round brackets, the work in curly ones:
const age = 12;
if (age >= 13) {
console.log("Teenager");
} else {
console.log("Not yet");
}
Try it — this is live
The tests you can put in the brackets:
| Test | Means | Test | Means |
|---|---|---|---|
=== | is exactly equal to | > | bigger than |
!== | is not equal to | < | smaller than |
>= | at least | <= | at most |
&& | and — both must hold | || | or — either will do |
= puts a value in a box. === asks whether two things are the same. Writing if (x = 5) quietly sets x to 5 and is always true — a bug that has cost the world a great deal of time.
const score = 72;
if (score >= 90) {
console.log("A");
} else if (score >= 80) {
console.log("B");
} else if (score >= 70) {
console.log("C");
} else {
console.log("Keep going");
}
Try it — this is live
JavaScript takes the first branch that fits and skips the rest. Put score >= 70 at the top and every score above 70 gets a C — including 95.
A for loop says three things in one line: where to start, when to stop, and how to step.
for (let i = 1; i <= 5; i++) {
console.log(i);
}
Try it — this is live
let i = 1start herei <= 5keep going while this is truei++add one each time roundi++ is shorthand for i = i + 1. You will see it everywhere.
let total = 0;
for (let n = 1; n <= 10; n++) {
total = total + n;
}
console.log(`1 to 10 adds up to ${total}`);
Try it — this is live
If the middle test never becomes false — say you forget the i++ — the loop runs for ever and the page freezes. If that happens, close the tab and look at your three parts.
JavaScript calls them arrays. Square brackets, commas between:
const pets = ["cat", "dog", "newt"];
console.log(pets.length);
console.log(pets[0]);
console.log(pets[2]);
for (const pet of pets) {
console.log(`I have a ${pet}`);
}
Try it — this is live
for (const x of list) is the easy loop: it hands you each item in turn and you never have to think about counting. Use it whenever you do not actually need the position.
A function is a chunk of work with a name, so you can do it again without writing it again:
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Maya"));
console.log(greet("Sam"));
console.log(greet("the dragon"));
Try it — this is live
function then a name, then what it needs in brackets.return hands an answer back to whoever asked.greet("Maya").function double(n) {
return n * 2;
}
function biggest(a, b) {
if (a > b) {
return a;
}
return b;
}
console.log(double(21));
console.log(biggest(3, 9));
Try it — this is live
If your code has a confusing lump in the middle, pull it out into a function and name it after what it does. if (isWeekend(day)) reads better than the six lines it replaces.
if / else if / else — the first match wins.=== compares, = assigns. Never muddle them.for (let i = 0; i < n; i++) when you need the number; for (const x of list) when you do not.[ ], count from 0, and know their own .length.function names a job; return hands the answer back.