Level 2 · Web Development Basics · Course 2.3 Introduction to JavaScript

Module 18: Decisions and Functions

Goal: make programs that choose what to do with conditions, repeat work with loops, and organise code into reusable functions.

You'll need: VS Code, the browser console and your js/main.js from Module 17.

Lessons

  1. 1Conditions15–25 minutes✓
  2. 2Loops15–25 minutes✓
  3. 3Functions15–25 minutes✓
  4. 4Parameters and return values15–25 minutes✓
  5. 5Scope and reading code15–25 minutes✓

🛠️Module practice: course helper functions

In js/main.js, write and test (in the console):

  1. findLevel(modulesDone): returns the level as text.
  2. calculateFee(perMonth, months, hasDiscount): returns the total, 10% less when hasDiscount is true.
  3. listCourses(courses): takes an array of names and returns a single numbered string.
  4. Test each with at least three inputs, including edge cases (0 modules, 0 months, an empty array).

Commit your work.

✅Module check

Explain in a few sentences, in your own words:

What are conditions, loops and functions, and how would you read an unfamiliar function?

Show a good answer

A good answer mentions: conditions (if/else) choose which code runs; loops repeat code, for example for every item in an array; functions are named, reusable blocks that take parameters and return results. To read one: its name and parameters (input), its return statements (output), the conditions inside, anything it changes outside, then try it with simple values.

📝Module quiz

10 questions · 10 marks each · 100 marks in all · pass mark 70% · retry as often as you like ·

1. In an if / else if / else chain, a value matches two conditions. Which code runs?

Why each option is right or wrong

  • “The last matching branch, which overrides the first” (Incorrect): Nothing after the first match is even checked.
  • “Both matching branches, one after the other” (Incorrect): An else-if chain runs at most one branch. Separate if statements would run both.
  • “None, because the conditions conflict” (Incorrect): Overlapping conditions are allowed; the first match wins.
  • “Only the first matching branch” is correct.

    JavaScript checks conditions from top to bottom and runs the first one that's true. It then skips the rest of the chain, even if later conditions would also be true.

    • Order matters: put the most specific conditions first.
    • Example: check score >= 90 before score >= 50, or everyone gets the lower grade.

📖 Revise: Lesson 1: Conditions

Question ID module-18-q1 · Report a mistake in this question
2. What does if (email) check?

Why each option is right or wrong

  • “Whether the email address really exists” (Incorrect): JavaScript can't know whether an address exists.
  • “Whether the email has a valid format with @” (Incorrect): Any non-empty text passes, valid or not.
  • “Whether the email was sent successfully” (Incorrect): Nothing is sent by an if statement.
  • “Whether email is truthy: not empty, null or undefined” is correct.

    In a condition, JavaScript treats some values as false: an empty string, 0, null, undefined, NaN and false. Anything else counts as true. So if (email) checks that something was entered.

    • It doesn't check format: 'abc' passes. Use proper validation for that.

📖 Revise: Lesson 1: Conditions

Question ID module-18-q2 · Report a mistake in this question
3. A page freezes after you add a while loop. What's the likely cause?

Why each option is right or wrong

  • “The loop runs too few times to finish” (Incorrect): A short loop finishes quickly. Freezing means it keeps going without end.
  • “Browsers block loops that touch the page” (Incorrect): Loops can update the page; an endless one doesn't give the browser a turn.
  • “The loop's variable should have used const” (Incorrect): With const you couldn't change the counter at all, which would also loop forever or error.
  • “The condition never becomes false, so the loop never ends” is correct.

    A while loop repeats as long as its condition is true. If nothing inside the loop changes the condition, it runs forever and the page can't respond to anything else.

    • Check: what changes each time round the loop?
    • Prefer for...of or array methods when looping over a list.

📖 Revise: Lesson 2: Loops

Question ID module-18-q3 · Report a mistake in this question
4. What does .filter give you?

Why each option is right or wrong

  • “The first matching item only” (Incorrect): That's .find.
  • “The same array, with failing items removed” (Incorrect): filter creates a new array; the original isn't changed.
  • “The number of items that pass the test” (Incorrect): filter returns the items; add .length to count them.
  • “A new array with only the items that pass the test” is correct.

    .filter checks each item with your function and keeps those where it returns true. The original array is unchanged.

    • Example: prices.filter(p => p > 500).
    • Related: .find returns only the first match; .map transforms every item.

📖 Revise: Lesson 2: Loops

Question ID module-18-q4 · Report a mistake in this question
5. You write a function but nothing happens. What did you probably forget?

Why each option is right or wrong

  • “To give it a return value” (Incorrect): A function without return still runs when called; it just gives back undefined.
  • “To declare it with const instead of function” (Incorrect): Both styles create working functions.
  • “To add a comment explaining what it does” (Incorrect): Comments help people; they don't make code run.
  • “To call it: its name followed by ()” is correct.

    Defining a function only describes what it would do. Code runs when you call it, as in showMessage(), or when an event calls it for you.

    • In event listeners: pass the function itself (showMessage), and the browser calls it later.

📖 Revise: Lesson 3: Functions

Question ID module-18-q5 · Report a mistake in this question
6. What's the difference between a parameter and an argument?

Why each option is right or wrong

  • “Arguments are errors raised inside a function” (Incorrect): Errors are errors. Arguments are the values you pass.
  • “Parameters are used in CSS and arguments in JavaScript” (Incorrect): Both are JavaScript function concepts.
  • “There's no difference; they're two words for one thing” (Incorrect): People often mix them up, but one is the name and one is the value.
  • “A parameter is the name in the definition; an argument is the value passed in” is correct.

    In function greet(name), name is the parameter, a placeholder. In greet("Asha"), "Asha" is the argument, the actual value used for this call.

    • Memory hook: parameters are placeholders; arguments are actual values.

📖 Revise: Lesson 4: Parameters and return values

Question ID module-18-q6 · Report a mistake in this question
7. const x = greet(); and greet has no return. What is x?

Why each option is right or wrong

  • “The text "greet"” (Incorrect): The function's name isn't returned.
  • “An error saying return is missing” (Incorrect): JavaScript doesn't require return, so there's no error.
  • “null, meaning nothing was returned” (Incorrect): Functions with no return give undefined, not null.
  • “undefined” is correct.

    A function without a return statement still runs, but gives back undefined. Any work it did, like logging, happens, but there's no value to store.

    • Common bug: calculating a result inside a function and forgetting to return it.

📖 Revise: Lesson 4: Parameters and return values

Question ID module-18-q7 · Report a mistake in this question
8. A variable is made inside a function. Can code outside the function use it?

Why each option is right or wrong

  • “Yes, once the function has run at least once” (Incorrect): Even after it runs, the variable stays private to the function.
  • “Yes, if it was declared with let” (Incorrect): let is also local to its block or function.
  • “Only from other functions in the same file” (Incorrect): Other functions can't see it either.
  • “No, it exists only inside that function's scope” is correct.

    Variables declared inside a function are local to it. Code outside can't see them, which stops different parts of a program from accidentally changing each other's values.

    • To share a result: return it from the function.

📖 Revise: Lesson 5: Scope and reading code

Question ID module-18-q8 · Report a mistake in this question
9. Why is calculateTotal a better function name than doStuff?

Why each option is right or wrong

  • “Longer names make code run faster” (Incorrect): Name length doesn't affect speed.
  • “JavaScript requires names to start with a verb” (Incorrect): There's no such rule; it's a helpful convention.
  • “Short names are not allowed for functions” (Incorrect): Short names are allowed, just less clear.
  • “It says what the function does” is correct.

    A clear name lets you understand code without reading every line. calculateTotal() tells you what you'll get back; doStuff() tells you nothing.

    • Pattern: verb + thing, like sendReminder, formatDate.

📖 Revise: Lesson 5: Scope and reading code

Question ID module-18-q9 · Report a mistake in this question
10. An AI gives you a 40-line function. What's the first thing to read?

Why each option is right or wrong

  • “Nothing, because AI code is usually correct” (Incorrect): AI code can be confidently wrong. You should understand what you use.
  • “Only the comments, which explain everything” (Incorrect): Comments can be wrong or out of date. The code is the truth.
  • “The longest line, where the main logic is” (Incorrect): Length doesn't mark importance; start with the outline.
  • “Its name, parameters and return statements” is correct.

    These three tell you what the function takes in, what it gives back and what it claims to do. With that outline, the details inside make sense, and you can spot if it doesn't do what you asked.

    • Then test it with a few inputs, including odd ones.

📖 Revise: Lesson 5: Scope and reading code

Question ID module-18-q10 · Report a mistake in this question

ProLearners Assist