Modifying an existing JavaScript program

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

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

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

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) { ... }

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1// Prediction: prints 10		AChanging many things at once makes it hard to tell which change caused a bug. Change one thing at a time and re-test.
2function area(w, h = 1) {		Bfunction greet(name, greeting) {
3After each small change, re-run your tests to check nothing else broke		CPredict the output first by reading the code, before you run it or change anything
4Add a new parameter to an existing function so it can do more		Dconsole.assert(area(2, 3) === 6);
5// Changed 5 functions at once, then ran it		EAdds a parameter to an existing function, with a default so old calls still work
6function total(a, b, c) { return a + b; } total(1, 2);		FA 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.

Definitions

modify code

Fill in the Blanks

Complete each line of code by filling in the missing parts.

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

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

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

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

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

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A function total(price, qty) {

B let sum = price * qty;

C return Sum;

D }

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

Question 2

A let score = 10;

B score = score - 5;

C console.log(score);

D // predict: 15

Question 3

A function add(a, b) {

B return a + b + c;

C }

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

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);

Question 5

A function twice(n) {

B return n * 2;

C }

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

E console.log("Tests done");

Answer Key

Modifying an existing JavaScript program

Section A: Quick Questions

A — Read the code and predict what it will output

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

A — You know that change is the likely cause of the bug

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

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

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

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

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

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

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

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

Section E: Spot the Error

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;

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;

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) {

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;

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);