← ACARA Digital Technologies Years 9–10

Modifying an existing JavaScript program

Read the code and predict its output, change one small part at a time, then re-run your tests after each change to check that nothing else broke.

Part of: ACARA Digital Technologies Years 9–10 — Modular and Object-Oriented Programming (JavaScript) — Module 46

Understanding Modifying an existing JavaScript program in ACARA Digital Technologies Years 9–10

What it does: A console.assert test can be run again after every change to confirm the function still gives the expected result. Adding a parameter such as greeting changes the function in one small, clear way. Reading the code and predicting its output first helps you understand what it does before you change anything. If you change one thing at a time, you know which change caused a bug if something breaks. Small steps make bugs easier to find because only one thing has changed since the tests last passed. Extra parameters go inside the brackets, separated by commas. A change in one place can break something somewhere else, so re-run the earlier tests after each change.

Common mistakes: JavaScript is case-sensitive. The variable is called sum, so Sum causes a ReferenceError. After a change, re-run the code to catch slips like this. It should be return sum;. The prediction says the output should be 15. Subtracting 5 would print 5. When you change code, check it against your prediction. It should be score = score + 5;.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Modifying an existing JavaScript program to a class →

This module's key terms are also in a printable crossword (Modules 728–742) and word search (Modules 710–742).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

You are asked to change an existing function. What should you do FIRST?

Read the code and predict what it will outputDelete it and write a new one from scratch

Matches

// Changed 5 functions at once, then ran it

↓

Changing many things at once makes it hard to tell which change caused a bug. Change one thing at a time and re-test.

Applying

Meanings

Term

modify code

Meaning

Read the code and predict its output, change one small part at a time, then re-run your tests after each change to check that nothing else broke.

Practice

function finalPrice(price, discount) {

Testing

Gaps

function greet(name, ) {

Check Answer

Spots

2 let sum = price * qty;

3 return Sum;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. You are asked to change an existing function. What should you do FIRST?

A. Read the code and predict what it will output ✓

B. Delete it and write a new one from scratch

Reading the code and predicting its output first helps you understand what it does before you change anything.

2. Which approach to modifying a program is better?

A. Change one small part, then re-run your tests ✓

B. Change five things at once, then test at the end

If you change one thing at a time, you know which change caused a bug if something breaks.

3. You changed a function and the tests now fail. Why is it helpful that you only made one change?

A. You know that change is the likely cause of the bug ✓

B. The tests will fix themselves on the next run

Small steps make bugs easier to find because only one thing has changed since the tests last passed.

4. You add a new parameter to a function that is already used in other places. What should you do afterwards?

A. Assume the old calls are fine without checking

B. Re-run your tests to check the old calls still work ✓

Changing a function can break code that already calls it, so always re-test after the change.

5. Which function change adds a parameter to an existing function? Before: function greet(name) { ... }

A. function greet = name, greeting { ... }

B. function greet(name, greeting) { ... } ✓

Extra parameters go inside the brackets, separated by commas.

Match the Pairs

// Prediction: prints 10 → Predict the output first by reading the code, before you run it or change anything

function area(w, h = 1) { → Adds a parameter to an existing function, with a default so old calls still work

After each small change, re-run your tests to check nothing else broke → console.assert(area(2, 3) === 6);

Add a new parameter to an existing function so it can do more → function greet(name, greeting) {

// Changed 5 functions at once, then ran it → Changing many things at once makes it hard to tell which change caused a bug. Change one thing at a time and re-test.

function total(a, b, c) { return a + b; } total(1, 2); → A parameter was added but the existing call was not updated, so c is undefined. Update the calls or give c a default and re-run the tests.

Key Term

modify code

Read the code and predict its output, change one small part at a time, then re-run your tests after each change to check that nothing else broke.

Fill in the Blanks

1. function greet(name, greeting) { return greeting + ", " + name; }

Hint: Type the name of the new parameter that the return line already uses

2. function double(n) { return n * 2; } console.assert(double(4) === 8, "failed");

Hint: Type the console method that re-tests a claim after you change code

3. // area = width times height function area(w, h) { return w * h; } console.log(area(3, 4)); // 12

Hint: Type the operator that makes the function match the comment and the predicted output

4. // old calls total(5) must still give 5 function total(price, qty = 1) { return price * qty; }

Hint: Type the default value so old calls without the new argument give the same result

5. // fix: 18 counts as an adult function isAdult(age) { return age >= 18; } console.assert(isAdult(18) === true);

Hint: Type the comparison operator that makes the boundary value pass the re-test

Spot the Error

Question 1

A function total(price, qty) {

B let sum = price * qty;

C return Sum;

D }

E console.log(total(5, 2));

Line C — JavaScript is case-sensitive. The variable is called sum, so Sum causes a ReferenceError. After a change, re-run the code to catch slips like this. It should be return sum;

Question 2

A let score = 10;

B score = score - 5;

C console.log(score);

D // predict: 15

Line B — The prediction says the output should be 15. Subtracting 5 would print 5. When you change code, check it against your prediction. It should be score = score + 5;

Question 3

A function add(a, b) {

B return a + b + c;

C }

D console.log(add(1, 2, 3));

Line A — The body was changed to use c, but the parameter c was never added to the function line. This causes a ReferenceError. When adding a parameter, update the declaration too. It should be function add(a, b, c) {

Question 4

A const prices = [4, 8, 6];

B let total = 0;

C for (const p of prices) {

D total = p;

E }

F console.log(total);

Line D — Using = replaces total each time round the loop, so the output is 6 instead of 18. Predicting the output first would reveal this. It should be total += p;

Question 5

A function twice(n) {

B return n * 2;

C }

D console.assert(twice(3)=6);

E console.log("Tests done");

Line D — A single = is assignment, not comparison, so this test is a SyntaxError. Re-run your tests after each change using === to compare. It should be console.assert(twice(3)===6);

Student with a class code? Join your class →