1.5 Program Design Tools and Environments

Learning Objectives

After this section, you will be able to:

1.5.1 Think Before You Type

There is a strong temptation, when given a programming problem, to start typing immediately. It feels productive. It is usually the slow way.

The reason is that a program has two separate difficulties, and typing solves only one of them:

1. Working out what the steps are. This is thinking, and the language you use is irrelevant to it.
2. Writing those steps in JavaScript. This is syntax, and it is much easier once step 1 is settled.

Doing both at once means every time you get confused you cannot tell which difficulty you are stuck on — the plan or the punctuation. Separating them is why this section exists. Most of the tools here are for step 1, and none of those are JavaScript.

The name for the thinking half is computational thinking.

Where the idea came from

Al Aho, of the Columbia University Computer Science Department, describes computational thinking as "the thought processes involved in formulating problems so their solutions can be represented as computational steps and algorithms." Jeannette Wing, also of Columbia, brought the idea to prominence in a 2006 paper written while she was at Carnegie Mellon University. Her view is that computational thinking describes the mental acts needed to compute a solution to a problem, whether a person or a machine carries it out.

Computational thinking gathers a collection of methods for solving hard problems — and for learning how to solve them. It sits close to mathematical thinking, because it uses abstraction, generalization, modeling, and measurement. It differs in being explicitly concerned with computation: what a machine can actually carry out, and what that buys you. Figure 1.5.1 collects the main components.

Figure 1.5.1 — This diagram illustrates the main components of computational thinking.

Critical thinking helps here more than technical skill does. It means understanding concepts rather than memorizing which menu a button lives in — comprehension over rote learning. It is a core skill rather than an extra item on a curriculum checklist, and it is uniquely human: it works on ideas rather than on things, and computers do not do it. It belongs beside reading, writing, and arithmetic.

The concepts, as ISTE lists them

The International Society for Technology in Education (ISTE) sets out the key components and dispositions of computational thinking:

• Decomposition. Breaking down complex concepts or problems into smaller parts. This makes them easier to analyze and solve.
• Pattern recognition (logically organizing and analyzing data). Structuring information so that it can actually be worked with.
• Representing data through abstractions. An abstraction is a simplified representation of a complex system — a simulation, for instance, uses a model as a stand-in for a real system.
• Automation through algorithmic thinking. Using a program to perform repetitive tasks or calculations.
• Identification, analysis, and implementation of solutions. Finding candidate solutions and combining steps and resources to get the most efficient, effective one.
• Generalization and transferability. Carrying the same problem-solving process across a wide variety of problems.

Those abilities rest on some habits of mind: confidence when facing complexity, persistence with hard problems, tolerance for ambiguity, comfort with open-ended questions, and the ability to work with other people toward a shared solution.

A shorter framing is the three As, shown in Figure 1.5.2:

1. Abstraction — formulating the problem.
2. Automation — expressing the solution.
3. Analysis — executing and evaluating the solution.

Figure 1.5.2 — The three As — abstraction, automation, analysis — illustrate the power of computational thinking.

The four techniques

In practice, computational thinking is usually taught as four techniques, sometimes called its cornerstones (Figure 1.5.3). They give you a systematic way to attack a problem using tools such as data structures — containers that organize and store data efficiently in a computer, defining how data is arranged and manipulated so algorithms and programs can get at it.

• Decomposition — systematically breaking a complex problem or system into smaller, more manageable subproblems. Breaking complexity into simpler elements makes the whole approach more organized.
• Logical thinking and pattern recognition — identifying similarities among and within problems, and recognizing recurring structures, relationships, or sequences.
• Abstraction — focusing on the important information while ignoring irrelevant detail, so the core issue becomes clear.
• Algorithms — detailed sets of instructions for solving a problem step by step, breaking a complex task into manageable actions.

Figure 1.5.3 — Users can explore the essence of computational thinking through decomposition, logical thinking, abstraction, and algorithms.

Two more steps belong alongside the four: testing, which uncovers errors in the instructions, and debugging, which finds and fixes problems in the code. Section 1.5.9 takes both up in detail.

BBC Bitesize's KS3 guide What is computational thinking? covers the same four techniques under the name cornerstones — with one difference worth noting: it splits pattern recognition out as its own cornerstone, where this book folds it into logical thinking. Its own image for the four is a table: each cornerstone is a leg, and losing any one collapses the rest.

A programmer is someone who writes instructions for a computer to follow. The standard illustration is a programmer instructing a robot to make a jam sandwich. It sounds trivial until you try it — the robot knows nothing, so every assumption you would normally skip has to be written down. The next few subsections follow that one example through all four techniques.

1.5.2 Decomposition and Pattern Recognition

Decomposition means solving a complex problem by breaking it into smaller, more manageable tasks. It lets you consider each component a seemingly hard task needs, until the hard task has been redefined as a set of easy ones.

In the jam sandwich example, decomposition means identifying every ingredient required and every step the robot must take to end up with a sandwich.

Pattern recognition then groups all those separate features into categories. For the sandwich, the things decomposition turned up sort naturally into ingredients, equipment, and actions. Applying both techniques together pushes you to think of as many things as possible — and the more you think of, the clearer the final instructions will be. A first attempt is collected in Table 1.5.1.

Definition 1.5.2 — Decomposition breaks one whole problem into smaller, self-contained parts.

Reasoning your way to a pattern

Finding patterns usually takes one of two kinds of logical thinking.

Inductive reasoning goes from specific examples to a general principle. Notice that dividing any number by 1 gives you the original number back, and you have a rule that holds for every number. Notice that the sum of two odd numbers is even, and you have another. Induction turns an observation into a pattern, which becomes a tentative hypothesis, which can become a theory.

Deductive reasoning goes the other way: drawing a valid conclusion from premises, where it is impossible for the premises to be true and the conclusion false. The traditional example is that "all men are mortal" and "Socrates is a man" force the conclusion "Socrates is mortal."

Programmers use both constantly. You use induction when three separate bugs turn out to share a cause. You use deduction when you know the input was 4, you know the function multiplies by 5, and you conclude the output should be 20 — which is exactly how you catch it printing 9.

Technology in Everyday Life: Traffic accident data

Analyzing data means collecting and cleaning information, exploring patterns with visual and statistical methods, and forming hypotheses. Statistical analysis and visualization draw the conclusions, and the findings get interpreted and communicated in a report or presentation so someone can act on them.

Take the patterns and trends in traffic accident data: how common road injuries and fatalities are, and how incidents have changed over time. Computational thinking is what identifies the recurring patterns and abstracts the most important information out of the raw data. Extracting those insights is how the analysis turns into strategies that actually improve road safety.

Technology in Everyday Life: Computational thinking in your own life

Computational thinking is not confined to technical fields. Imagine managing your monthly expenses on a tight budget:

1. Decomposition — break the financial problem into categories: rent, groceries, utilities, entertainment.
2. Pattern recognition — look at past spending and find the patterns.
3. Abstraction — focus on the few areas where costs can actually be cut.
4. Algorithmic thinking — build a repeatable rule for allocating each month's income.

The same four steps that get a robot to make a sandwich will also get your essential costs covered while leaving something to save.

1.5.3 Abstraction

Abstraction means pulling out the important details and identifying the principles that carry over to other problems or situations. When you apply it, it often helps to write notes or draw a diagram to work out how to resolve the problem.

Layers of abstraction

Real systems stack abstractions on top of each other so that each layer only has to worry about its own job. Data in technology is represented at different levels of abstraction to keep the user's side simple while complicated operations happen out of sight.

Think about asking a generative AI tool for help. You interact through a plain interface and see none of the underlying complexity. Your prompt is then handled by the application's logic, which validates it and routes it appropriately — invisibly to you. At the back end the prompt is processed and a response is generated and returned. Each layer serves a separate role, which is what makes the whole process efficient for both you and the system (Figure 1.5.5).

Figure 1.5.5 — When using GenAI, a user interacts with the interface while the application processes the prompt with layers of abstraction on the back end.

1.5.4 Pseudocode

An algorithm is a sequence of steps or instructions that must be followed in a specific order to solve a problem. Algorithms let you describe a solution by writing down what has to be done, and computer programs typically execute algorithms to carry out a task.

set total to 0
set i to 1
while i is 5 or less
    add i to total
    add 1 to i
print total

Anyone who can read English can follow that, including someone who has never written a line of code. It is also close enough to a program that turning it into JavaScript later is nearly mechanical.

Definition 1.5.5 — Pseudocode: indentation shows containment, so the indented lines live inside the while and the unindented one runs once.

ask the user for their age
if age is 18 or more
    print "You may vote"
otherwise
    print "Too young to vote"

Handling a choice: butter or no butter

Writing algorithms takes practice, and the practice is mostly in noticing the cases you skipped. Not everyone wants butter in a jam sandwich, so the robot needs a way to add it or not depending on the answer. Three steps cover it:

1. Ask whether there should be butter on the bread.
2. Either spread butter on the bread,
3. Or do not use butter.

Those become new actions in Table 1.5.1 and new steps in the pseudocode, written with keywords such as INPUT, OUTPUT, IF, THEN, ELSE, and START:

START
INPUT "Do you want butter?" as answer
IF answer is yes THEN
    spread butter on the bread
ELSE
    do nothing
spread jam on the bread
OUTPUT the sandwich

The same instructions can then be turned into a flowchart, which Section 1.5.5 takes up.

set count to 1
while count is less than 10
    print count

set largest to the first number
if the second number is bigger than largest
    set largest to the second number
if the third number is bigger than largest
    set largest to the third number
print largest

1.5.5 Flowcharts

A flowchart shows the same kind of plan as a picture: boxes for steps, arrows for the order they happen in. Where pseudocode is easier to write, a flowchart is easier to see — especially when a program branches.

Three shapes carry nearly all flowcharts, and a fourth turns up often enough to be worth knowing:

Figure 1.5.7 pairs the three core symbols with the instruction each one stands for, and adds the arrow that carries the order from one step to the next.

Figure 1.5.7 — The symbols used in a flowchart are associated with their instructions.

Section 1.5.4's voting decision makes a good first example. Definition 1.5.6 draws it out.

When to use which

Neither tool is better; they are good at different things.

• Pseudocode is faster to write and edit, and handles long programs without becoming enormous.
• Flowcharts make branching and looping obvious at a glance, and are better for explaining a program to someone else.

In practice most programmers reach for pseudocode by default and draw a flowchart when a piece of logic gets tangled enough that they cannot hold it in their head.

1.5.6 How Algorithms Get Executed

So far every plan in this section has been sequential: one step, then the next, in written order. That is the traditional execution model, and it is the one you should assume unless told otherwise. Two other models are worth knowing about, because they change what the same set of instructions costs to run.

Parallel and concurrent execution

Parallel and concurrent execution models are used to make an algorithm finish sooner. Suppose you and a friend are buying tickets for a movie and there are three separate lines. Splitting up — you in one line, your friend in another — is a parallel model, and you are guaranteed to get the tickets sooner as long as one line moves faster than the other, which it usually does.

Running the same algorithm truly simultaneously on a computer may not be possible if the machine has only one central processing unit (CPU). In that case you can simulate parallelism: the operating system runs the two algorithms concurrently, as separate tasks sharing the one processor. That is less efficient than true parallelism, because nothing is actually happening at the same instant — the processor is just switching between tasks quickly. Chapter 4 Linguistic Realization of Algorithms: Low-Level Programming Languages goes into the difference in detail.

Recursion

Recursion is the problem-solving technique where a process calls itself to solve smaller instances of the same problem. It can be a powerful tool, because it allows an elegant solution to a complex problem by breaking it into smaller, more manageable parts. Programmers use it to write concise, efficient code across a wide range of problems.

▶ Press Run to see the output…

55

function recursiveSum(x) {
  // Base case
  if (x === 0) {
    return 0;
  }
}

The second claim: the sum from 0 to x is x plus the sum from 0 to x - 1. That is the recursive step, and it is what makes the value of x shrink on every call until the base case catches it.

An iterative version of the same problem — adding n numbers with a loop instead of a call chain — is shown as a flowchart in Figure 1.5.8. Comparing the two is a good way to see what recursion actually buys you: fewer moving parts in the code, at the cost of some work moving into memory where you cannot see it.

Figure 1.5.8 — A flowchart represents an iterative solution for adding n numbers.

function recursiveSum(x) {
  return x + recursiveSum(x - 1);
}

console.log(recursiveSum(10));

▶ Press Run to see the output…

RangeError: Maximum call stack size exceeded

▶ Press Run to see the output…

55

1.5.7 Where JavaScript Runs

A plan eventually has to become a running program, which needs somewhere to run. For JavaScript that is a browser — every browser has a JavaScript engine built in, which is why this book needs no installation.

There are two places you will meet.

The browser console

Every browser has a developer console: a place to type JavaScript and see it run immediately. Open it with F12, then choose the Console tab.

Type this and press Enter:

▶ Press Run to see the output…

What you should see:

Hello from the console

The console is for quick questions — checking what a value is, trying a line you are unsure about. Everything you type is forgotten when you reload the page, which is exactly what makes it comfortable to experiment in.

A code editor

For anything you want to keep, you use a code editor — a text editor built for code, which colours your syntax, indents for you, and flags some mistakes before you run anything. Visual Studio Code is the common choice and is free.

The difference is permanence. The console is a scratchpad; the editor holds the program. Most work is done in the editor with the console open beside it to see the output.

1.5.8 Reading an Error Message

When a program goes wrong, the browser tells you what happened. Beginners often skim past the message because it looks technical; it is usually the most useful sentence available.

An error message has three parts worth reading:

Uncaught ReferenceError: totl is not defined
    at line 3

1. The kind — ReferenceError. This one means a name was used that does not exist.
2. The detail — totl is not defined. It names the exact thing it could not find.
3. The place — the line number.

That message is telling you there is a typo, and telling you what the typo says. The fix is to compare totl with the name you meant.

▶ Press Run to see the output…

What you should see:

Total is 10

Change total to totl on the second line and run it again. You will get exactly the error above, and you will have caused it on purpose — which is a genuinely good way to learn to read messages, because you already know what the answer is.

let greeting = "hello";
console.log(gretting);

▶ Press Run to see the output…

Uncaught ReferenceError: gretting is not defined

▶ Press Run to see the output…

hello

1.5.9 Testing and Debugging

Testing and debugging are the techniques used to find flaws in algorithms and defects in code so they can be corrected.

Test cases provide specific input data to check whether a program functions correctly and meets its requirements. You have to identify the test cases before you can run any tests. When a test fails, debugging finds the source of the problem and fixes it. In other words, debugging is about locating and fixing defects — bugs — in algorithms and processes, so they behave as expected.

Everyone makes mistakes in programming; they are part of learning. What matters is identifying the mistake and working out how to get past it. There is a good case to be made that the deepest learning happens exactly when something goes wrong.

Testing the sandwich

In the jam sandwich algorithm, testing works by taking turns: one person plays the programmer who wrote the instructions, the other plays the robot. The programmer reads out each instruction — from the pseudocode or from the flowchart — and the robot follows it exactly. Each instruction is a test case, and the test succeeds if the robot can carry it out precisely and successfully. Otherwise you debug the instruction: find the source of the problem and correct it. Table 1.5.3 is a sheet for recording what went wrong and what needs to change.

Finding out what a program is doing

Most bugs are not crashes. The program runs happily and produces the wrong answer, and there is no message at all — nothing is broken as far as JavaScript is concerned. For those, the basic tool is console.log.

The technique is to print what you believe is true and check whether it is:

▶ Press Run to see the output…

What you should see:

price is 20
quantity is 3
total is 23

The program did not fail. It printed 23, and a total of 23 for three items at 20 each is wrong — the + should be *. Nothing but printing the values would have shown you that.

Two habits make this much more effective:

• Label every print. console.log(total) gives you a bare number with no clue which line it came from. console.log("total is " + total) tells you.
• Print more than you think you need. The mistake is rarely where you expect, which is precisely why it is still a mistake.

Browsers offer more powerful tools — a debugger that pauses a program mid-run and lets you inspect it line by line. console.log remains the one every programmer uses most, because it takes three seconds and answers the question most of the time.

Technology in Everyday Life: DNA sequencing

Computational thinking matters in every industry, and DNA sequencing is a good illustration because the data is far too large to reason about directly. The work starts by breaking a long DNA sequence into smaller pieces. Then patterns within those pieces are identified — sequences that might indicate a particular gene. The focus stays on the most relevant regions, discarding data that is not needed, so attention lands on potentially significant genetic material. Finally, refined algorithms process and reconstruct the original sequence to identify genetic variations.

Every part of computational thinking shows up in that process:

• Decomposition — break the sequencing process into specific steps such as sample collection and DNA extraction.
• Pattern recognition — identify similarities in DNA sequences that could indicate genetic traits or anomalies.
• Abstraction — focus on the parts of the genetic information relevant to the study at hand.
• Algorithms — create step-by-step protocols for each part of the sequencing process.
• Logical thinking — determine the most accurate sequencing methods for the type of sample and the depth of analysis required.
• Evaluation — assess the quality and accuracy of the data obtained.
• Debugging — identify issues that arise during the sequencing process.

Planning the layout of a community garden to optimize space and sunlight exposure for different plant types. How do you decide where to plant each type of vegetable or flower?

Creating a schedule for a multistage music festival to minimize overlaps and keep audiences moving smoothly. How do you schedule the performances across different stages?

Determining the most efficient way to allocate computer resources in a cloud environment with varying user demand. How do you manage the computational load?

let width = 4;
let height = 5;
let area = width + height;

console.log("The area is " + area);

▶ Press Run to see the output…

▶ Press Run to see the output…

width is 4
height is 5
area is 9

▶ Press Run to see the output…

The area is 20

Problem Set 1.5

set count to 1
while count is less than 10
    print count

set count to 1
while count is less than 10
    print count
    add 1 to count

set largest to the first number
if the second number is bigger than largest
    set largest to the second number
if the third number is bigger than largest
    set largest to the third number
print largest

set correct to "sunshine"
ask the user for a password
while the password does not equal correct
    print "Wrong password, try again"
    ask the user for a password
print "Access granted"

▶ Press Run to see the output…

▶ Press Run to see the output…

55

let width = 4;
let height = 5;
let area = width + height;

console.log("The area is " + area);

▶ Press Run to see the output…

▶ Press Run to see the output…

width is 4
height is 5
area is 9

▶ Press Run to see the output…

The area is 20

Key Terms