Webbo3 Level 2 · JavaScript Development · Day 2 of 20

Decisions and Functions

Teaching your code to choose, and packaging that choice into something you can use again without copying it.

Yesterday your code ran straight down the page, doing the same thing every time. That is a calculator, not an application. An application looks at what it has been given and decides what to do about it, and it does that by asking questions whose answer is only ever true or false.

1. if, else if, else

The shape is always the same: a question in brackets, and a block that runs only when the answer is true.

const score = 72;

if (score >= 70) {
  console.log('A');
} else if (score >= 60) {
  console.log('B');
} else if (score >= 50) {
  console.log('C');
} else {
  console.log('Fail');
}

const score = 95;

if (score >= 50) { console.log('C'); }
else if (score >= 70) { console.log('B'); }
else if (score >= 90) { console.log('A'); }

2. Comparison and logic

const score = 78;
const attendance = 0.6;

const passedTest = score >= 50;
const attendedEnough = attendance >= 0.75;

console.log('passed test:', passedTest);
console.log('attended enough:', attendedEnough);
console.log('eligible:', passedTest && attendedEnough);
console.log('needs review:', passedTest && !attendedEnough);

Notice what that code does with names. passedTest and attendedEnough are not necessary: the whole thing would fit on one line. But the one-line version says if (score >= 50 && attendance >= 0.75), and the named version says what those numbers mean. Naming a condition is the cheapest readability win in programming, and it is the habit that separates code a team can maintain from code only its author can read.

3. Truthy, falsy, and the empty-field trap

JavaScript will accept any value where a condition is expected, and quietly decide whether it counts as true. A short list of values are falsy. Everything else in the language is truthy, including some things that look empty.

// the falsy values you will actually meet
const falsy = [false, 0, '', null, undefined, NaN];
for (const value of falsy) {
  console.log(String(value).padEnd(10), '->', Boolean(value));
}

console.log('--- but these are TRUE ---');
console.log('"0"     ->', Boolean('0'));    // a string, not the number zero
console.log('"false" ->', Boolean('false'));
console.log('[]      ->', Boolean([]));     // an empty array still exists

4. switch, when there are many exact matches

switch is not a different kind of logic, it is a tidier shape for one specific case: one value compared against several exact possibilities.

const day = 'saturday';

switch (day) {
  case 'saturday':
  case 'sunday':
    console.log('Weekend rate');
    break;
  case 'friday':
    console.log('Friday rate');
    break;
  default:
    console.log('Weekday rate');
}

5. Functions: the real unit of work

A function is a named, reusable block that takes values in and hands a value back. Once you can write one, you stop copying code and start calling it.

function gradeFor(score) {
  if (score >= 70) return 'A';
  if (score >= 60) return 'B';
  if (score >= 50) return 'C';
  return 'F';
}

console.log(gradeFor(95), gradeFor(64), gradeFor(31));

Look at what return did to the shape. Because return exits the function on the spot, the else branches disappeared entirely. That pattern, called an early return, flattens nested code and is worth reaching for deliberately.

Arrow functions

The same thing, written shorter. You will see both everywhere, so you need to read both.

const double = function (n) { return n * 2; };   // function expression
const triple = (n) => n * 3;                     // arrow, implicit return
const areaOf = (w, h) => w * h;

console.log(double(4), triple(4), areaOf(3, 5));

An arrow with no braces returns its single expression automatically. Add braces and you must write return yourself. That is the trap:

const withBraces = (n) => { n * 2; };   // no return written
console.log(withBraces(4));

It prints undefined, because the function ran and returned nothing. A function with no return returns undefined, which then travels quietly through the rest of your program until it breaks something far away from the real cause.

6. Parameters, arguments and defaults

// vat defaults to 7.5 when the caller does not supply it
function totalWithVat(amount, vat = 7.5) {
  return amount + (amount * vat / 100);
}

console.log(totalWithVat(1000));
console.log(totalWithVat(1000, 0));

That second call matters. Because the default only fills in for undefined, passing 0 genuinely means zero rather than falling back to 7.5. If you had written the fallback as vat = vat || 7.5 instead, passing 0 would have given you 7.5, because 0 is falsy. Default parameters are the safe way to do this.

7. Scope: why your variable disappeared

A variable declared with let or const inside { } exists only inside those braces. Outside them it does not exist at all.

function checkIn(name) {
  const greeting = `Welcome, ${name}`;
  if (name.length > 3) {
    const note = 'long name';
    console.log(greeting, '-', note);
  }
  // `note` does not exist out here
  return greeting;
}

console.log(checkIn('Adewale'));

if (true) {
  const inside = 'only here';
}
console.log(inside);

That error message is one you will meet often, and it almost always means the same thing: you declared the variable inside a block and tried to use it outside. Declare it one level up, before the block, and assign inside.

Do this now: the Student Result Analyzer

This is your first piece of real business logic: rules a school actually has, expressed in code. Build it as functions, not as one long script.

1. A function average(scores) that takes an array of three scores and returns the average.
2. A function gradeFor(average) that returns A, B, C or F on the boundaries above.
3. A function verdict(average, attendance) that returns Pass only when the average is 50 or more and attendance is 0.75 or more, Withheld when the average passes but attendance does not, and Fail otherwise.
4. A function report(student) that puts it together and returns a formatted multi-line string using a template literal.

const average = (scores) => scores.reduce((sum, n) => sum + n, 0) / scores.length;

function gradeFor(avg) {
  if (avg >= 70) return 'A';
  if (avg >= 60) return 'B';
  if (avg >= 50) return 'C';
  return 'F';
}

function verdict(avg, attendance) {
  const passed = avg >= 50;
  const attended = attendance >= 0.75;
  if (passed && attended) return 'Pass';
  if (passed && !attended) return 'Withheld: attendance below 75%';
  return 'Fail';
}

function report(student) {
  const avg = average(student.scores);
  return `${student.name} | avg ${avg.toFixed(1)} | ${gradeFor(avg)} | ${verdict(avg, student.attendance)}`;
}

console.log(report({ name: 'Chidinma', scores: [72, 65, 88], attendance: 0.9 }));
console.log(report({ name: 'Musa', scores: [55, 61, 58], attendance: 0.5 }));
console.log(report({ name: 'Tunde', scores: [30, 44, 39], attendance: 0.95 }));

Checkpoint

Tomorrow, Day 3: arrays and objects. Real applications are mostly data being reshaped, and tomorrow is the day you learn to reshape it.