🧑🏿‍ prep

🧩 Percentages

Learning Objectives

Let’s begin with this problem:

Given a decimal number I want to convert it into a percentage format.

For example, given the decimal number 0.5 we return the string "50%". Given the decimal number 0.231 we return the string "23.1%".

Restating the problem

Our function must convert any decimal to a percentage. We have used functions already. Here are some functions we’ve used:

1
2
console.log("hello world"); // logs "hello world" to the console
Math.round(3.141); // evaluates to 3

All these expressions are function calls: we’re passing input ("hello world" or 3.141) to the functions (console.log or Math.round) to use their functionality. Math.round and console.log are functions that the JavaScript language designers have written and stored inside the language, because everyone needs them all the time.

No such pre-built function converts any number to a percentage, so we must write our own. We’re going to create a function called convertToPercentage with the following requirements:

Given a number input
When we call convertToPercentage with the number input
Then we get back a string representing the percentage for that

Here are some examples:

1
convertToPercentage(0.5); // should return "50%"
1
convertToPercentage(0.231); // should return "23.1%"

Useful expressions

It is often helpful to solve a problem in one specific instance before doing it for all cases.

In programming, we always try the simplest thing first. Let’s consider how to convert just one number to a percentage. Look at this variable declaration:

1
const decimalNumber = 0.5;

We want to create an expression for the percentage using the value of decimalNumber. To convert to a percentage, we will multiply the number by 100 and then add a "%" sign on the end.

1
2
const decimalNumber = 0.5;
const percentage = `${decimalNumber * 100}%`;

Recalling template literals, the expression in the curly braces will be evaluated first and then inserted into the string, giving us the percentage string.

Now that we’ve solved the problem of converting a single decimal number to a percentage, let’s practice solving other similar problems using expressions.

Create a new JavaScript file so that you can try running the code for yourself.

Calculating the area and perimeter of a rectangle

In one of these new files, let’s make two variables that describe the dimensions of a rectangle:

const height = 10; // 10 is just an example of a value here - your code should still work if you change this to another value.
const width = 30; // Also just an example - your code should still work if this changes.

Using these variables, let’s calculate the area and perimeter of the rectangle.

We can calculate the area and perimeter by creating expressions that use the height and width variables we just created. Hint: read the links above if you don’t remember how to calculate area and perimeter of a rectangle.

Finally, we’ll create two more variables: area and perimeter to store the result of the calculations.

const area = FILL_ME_IN;
const perimeter = FILL_ME_IN;

Now, if we change the numbers assigned to height and width, are the area and perimeter values still correct? Try using console.log to print out the value of the variables and then run the script using Node to view the output.

Remember to create a new JavaScript file to run the code for yourself.

Converting pence to pounds

Like the rectangle example, we’ll start by creating a variable to store a price in pence:

const price = 130; // Just an example value. Try changing this value to 0, 10, or 1521, and make sure you still get the right answer from your code.

Now, you should write an expression that calculates the price in pounds. The price in pounds should be shown with 2 decimal places and start with “£”.

Try using console.log to print out the value of price in pounds and then run the script using Node to view the output.

🪄 Declaring functions

Learning Objectives

Recall

Functions are reusable blocks of code.

To create a function, we can use a function declaration. A function declaration looks like this:

1
function convertToPercentage() {}

The function declaration consists of the following syntactic elements:

  • function keyword, begins the function declaration
  • convertToPercentage - names the function
  • () - any input to the function will go between these round braces (our function above doesn’t take any input (yet), but it still needs the ()s)
  • {} - the body of the function is written inside the curly braces (our function above doesn’t do anything yet, but it still needs the {}s)

We can create a function declaration by wrapping up the percentage variable and the expression for the percentage inside the function.

1
2
3
4
5
const decimalNumber = 0.5;

function convertToPercentage() {
  const percentage = `${decimalNumber * 100}%`;
}

At the moment decimalNumber is not wrapped up inside the body of the function. In the following sections, we will explore what happens when this is the case.

🎮 Playing computer

Learning Objectives

To understand how convertToPercentage works we must build a mental model of how the computer executes our code. To build this model, we use a method called playing computer 🧶 🧶 playing computer .Playing computer means simulating how the computer executes our code. We “step through” the code, line by line, and work out what the computer does when it follows each instruction.

We will use an interactive code visualiser to play computer.

👣 Step through

In a JavaScript program, each line is an instruction that will have some effect. For example, a line of code with a variable declaration means “store a new variable with this value in memory”. In the interactive widget, arrows are used to show which line just executed and which line is next to be executed.

Click next to see what happens when the computer executes the following program. Pay particular attention to what happens when the function convertToPercentage is called.

🖼️ Global frame

As we step through the program, we keep track of two things: memory and the line that is being currently executed. We keep track of this information using a frame 🧶 🧶 frame Think of a frame as the context in which some code gets executed. We use frames to keep track of memory and the line of code that is being currently executed. .

The global frame is always the first frame that gets created when our program starts executing. It is like the starting point for our program, the place where code gets executed first. When we run the code above, decimalNumber and convertToPercentage are both stored in the global frame.

🖼️  Local frame

recall

A function call is an instruction to run the code inside a function

Whenever we call a function a new frame is created for executing the code inside that function. In the example above, we call the function convertToPercentage on line 7 and then a new frame is created for convertToPercentage. Inside the convertToPercentage frame, the computer executes the instructions inside convertToPercentage, storing new variables in memory and keeping track of the current line that is being executed.

🔭 Scope

Learning Objectives

The function convertToPercentage will only be useful if we can access the percentage string that it creates. Otherwise, we won’t be able to use the result of convertToPercentage in other parts of our code. We can try accessing the percentage variable outside the function body like this:

1
2
3
4
5
6
7
8
const decimalNumber = 0.5;

function convertToPercentage() {
  const percentage = `${decimalNumber * 100}%`;
}

convertToPercentage(0.5);
console.log(percentage);

However if we run the code above, we get an error:

ReferenceError: percentage is not defined

We get an error because of scope 🧶 🧶 scope Scope means where variables are and what you can access. . When we define convertToPercentage we also define a local scope - the region of code enclosed inside convertToPercentage’s function body. This region is convertToPercentage’s local scope. This means any variables we declare inside convertToPercentage’s local scope can only be accessed within this region. If we attempt to reference a variable outside the scope where it was declared, then get a ReferenceError.

📤 Returning from a function

Learning Objectives

We need a way to access the percentage string that is created inside convertToPercentage. To access values created inside functions, we write return statements 🧶 🧶 return statements We write a return statement to specify a function’s return value. If your function call is like a question, the return value is the answer. It’s what comes back. .

We can add a return statement to convertToPercentage like this:

1
2
3
4
5
6
const decimalNumber = 0.5;

function convertToPercentage() {
  const percentage = `${decimalNumber * 100}%`;
  return percentage;
}

If we want, we could also remove the variable percentage, since we can return the value of the expression directly:

1
2
3
4
5
const decimalNumber = 0.5;

function convertToPercentage() {
  return `${decimalNumber * 100}%`;
}

🔎 Checking the output

We can store a function’s return value in a variable.

const result = Math.round(10.3);
console.log(result); // logs 10 to the console

We call Math.round which takes the input 10.3 and then returns the rounded number 10. So result stores a value of 10.

Math.round is a function implemented by other developers and convertToPercentage is a function we’re implementing, but calling convertToPercentage is just like calling Math.round.

Now we want to call the function convertToPercentage and store the return value in a variable.

We can store the return value in a variable in exactly the same way:

1
2
3
4
5
6
7
8
const decimalNumber = 0.5;

function convertToPercentage() {
  const percentage = `${decimalNumber * 100}%`;
  return percentage;
}

const result = convertToPercentage(0.5);

Log out the value of result to the console using console.log.

1
2
3
4
5
6
7
8
9
const decimalNumber = 0.5;

function convertToPercentage() {
  const percentage = `${decimalNumber * 100}%`;
  return percentage;
}

const result = convertToPercentage(0.5);
console.log(result);

This will now print the following when run:

50%

♻️ Reusing the function

Learning Objectives

Our goal is for convertToPercentage to be reusable for any number. To check this goal, let’s call convertToPercentage with different arguments and check the return value each time:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const decimalNumber = 0.5;

function convertToPercentage() {
  const percentage = `${decimalNumber * 100}%`;
  return percentage;
}

const output1 = convertToPercentage(0.5);
const output2 = convertToPercentage(0.231);

console.log(output1);
console.log(output2);

When we execute this code we want to log the target output for each input: 0.5 and 0.231:

50%
23.1%

However, given the function’s current implementation, we get the following logs:

50%
50%

🌍 Global scope

At the moment, decimalNumber is in the global scope 🧶 🧶 global scope Variables declared in the global scope are available everywhere in your program. Variables declared in a { block scope } are only available within that block. Any block within your program can access variables that are defined within the global scope. . Any functions we declare can reference variables in the global scope. If a variable is in the global scope, we say that variable is a global variable.

Play computer and step through the code to check why we get the output below:

50%
50%

🏷️ Parameterising a function

Learning Objectives

At the moment, decimalNumber is a variable in the global scope of our program:

const decimalNumber = 0.5; // defined in the global scope of our program

function convertToPercentage() {
  const percentage = `${decimalNumber * 100}%`;
  return percentage;
}

const output1 = convertToPercentage(0.5);
const output2 = convertToPercentage(0.231);

So long as decimalNumber is always in the global scope, convertToPercentage will always go to the global scope to get the value of decimalNumber.

However, we want convertToPercentage to work for any input we pass to it.

To make a function work for any number, we need to handle inputs. We do this using a parameter 🧶 🧶 parameter A parameter is a special kind of variable: its value is defined by the caller. .

decimalNumber is still a variable - but as a parameter we don’t assign decimalNumber a value inside the function’s body. It is a placeholder. When we call the function, we pass an input to the function, and the value of that input is assigned to the decimalNumber parameter when the function is called. This happens automatically.

We can add a parameter decimalNumber to our function:

1
2
3
4
5
6
7
8
function convertToPercentage(decimalNumber) {
  // now decimalNumber is a parameter of convertToPercentage
  const percentage = `${decimalNumber * 100}%`;
  return percentage;
}

const output1 = convertToPercentage(0.5);
const output2 = convertToPercentage(0.231);

In the example above, we’re calling convertToPercentage twice: first with an input of 0.5 and second with an input of 0.231. In JavaScript instead of input we use the word argument 🧶 🧶 argument Arguments are inputs given to a function inside (). An argument means an input. .

We’re calling convertToPercentage twice: first with an argument of 0.5 and next with an argument of 0.231.

Think of a function as a box. We put data in and then act on it using the rules in the box; at the end, the box gives us new data back. In programming we say that we pass arguments into a function, the function’s code is executed and we get a return value after the function has finished executing. Here’s a diagram:

flowchart LR
    A[argument] --> B{function}
    B --> C[return]

Here’s a diagram of what happens when convertToPercentage is passed a specific argument:

flowchart LR
    A[0.231] --> B{convertToPercentage}
    B --> C[23.1%]

In this interactive widget we have defined a parameter decimalNumber in the function declaration inside parentheses after the function name convertToPercentage. In our mental model, a function call means going to convertToPercentage and running the code inside the function.

Use the interactive widget to see what happens when the code above is executed. Pay close attention to what happens inside the convertToPercentage frame.

Prep Roles in Tech 🔗

Learning Objectives

Preparation

Make sure you have your laptop, good internet and some time to focus

Introduction

In the real world, it always takes a team of people with different skill sets to build valuable software. You will need to understand the typical roles and how they fit together.  This will also help you identify the ones you are most interested in, and you can start working on the necessary skills for them.

Mapping roles in tech

🎯 Goal: Identify roles in tech (10 minutes)

  1. Search online or look for job vacancies and identify as many roles in tech you can. Our Graduate Module page might have some important information for you too.

  2. Make a list of all roles you found, with the role’s name and:

    • one phrase describing what this job does
    • one phrase explaining why this job is essential

Tip: make sure you have easy access to this for the class.

Identify professionals skills per roles

🎯 Goal: Differentiate the skills needed per role (40 minutes)

  1. Chose 5 roles from your previous list that you would like to understand more about.
  2. Research about what technical and professional skills are required for each role.
  3. Write down the 3 most important technical and 3 professional skills for this role. Tip: Think about what makes this role different from another?
  4. Add a phrase to every professional skill explaining why that skills is important for this specific role. Consider that you might have the same skill for two roles, but the explanation of this skills need should not be the same.