JavaScript Core I - 1
Contents
Learning Objectives
By the end of this class, you should be able to:
- Use
console.log()
to print information to the console - Use
typeof
to find the type of a variable - Assign data to variables using
let
andconst
- Define what expressions and statements are and describe the difference
- Write and call functions in JavaScript
- Manipulate strings with concatenation and interpolation techniques
- Manipulate numbers with mathematical operators and using the
Math
library - Define the difference between
console.log()
andreturn
- Call functions within functions
- Search and read documentation to help when you are stuck
- Use the Code Style Guide to give feedback on other trainees work
Before you start
Before you arrive at class you must have completed the following setup work.
If you are a teacher reading this, please check the Instructor Notes
Prerequisites
- Access to a Linux console (either on Mac, Ubuntu or by using Ubuntu WSL for Windows 10)
- VS Code running a default Linux terminal
- NodeJS must be installed
To test, you can write node -v
in your terminal and you should see something like v11.10.0
. If you don't see this please talk to a teacher!
Hello World
It is programming tradition that the first thing you do in any language is make it output 'Hello world!'.
We'll do this in JavaScript, using a command called console.log()
. The console.log()
method writes a message to the console.
The console is a tool which is mainly used to log information - it's useful for testing purposes.
Exercise (10 minutes)
(This exercise will help you understand how to run a basic JS script and explore the different ways you can run JS code)
- Create your first
js1-week1.js
script - Type
console.log("Hello World!")
- There are 2 ways you can run this script - one way is by pressing F5 in your VS Code application. Can you find out what the second way is? Pair up and use a search engine to find out! Choose your favourite method and use that from now on. :::
BONUS: there is a third way of running JS code (notice how I haven't said scipt) - do you know what that is?
Exercise (5 minutes)
(This exercise will help you expand your understanding of console.log)
Write 10 statements like these, but in different languages.
For example:
Halo, dunia! // Indonesian
Ciao, mondo! // Italian
Hola, mundo! // Spanish
Variables
When you write code, you'll want to create shortcuts to data values so you don't have to write out the same value every time.
We can use a variable to create a reference to a value. Variables can be thought of as named containers. You can place data into these containers and then refer to the data simply by naming the container.
Before you use a variable in a JavaScript program, you must declare it. Variables are declared with let and const keywords as follows.
let greeting = "Hello world";
console.log(greeting);
const name = "Irina";
console.log(name);
The program above will print "Hello world" to the console. Notice how it uses the value assigned to the variable greeting
.
Exercise (5 minutes)
- Add a variable
greeting
to js1-week1.js and assign a greeting of your choice to the variable - Print your
greeting
to the console 3 times. You should see your greeting 3 times on the console, one on each line.
Strings
In programming there are different types of data. You've used one data type already: string.
Computers recognise strings as a sequence of characters but to humans, strings are simply lines of text.
const message = "This is a string";
Notice that strings are always wrapped inside of quote marks. We do this so that the computer knows when the string starts and ends.
You can check that the data is a string by using the typeof
operator:
const message = "This is a string";
const messageType = typeof message;
console.log(messageType); // logs 'string'
Exercise (5 minutes)
- Write a program that:
- creates a variable called
colors
- assigns colors "blue" and "yellow" as a comma separate string to
colors
- logs the type
colors
usingtypeof
.
- What is the
typeof
a number?
String concatenation
You can add two strings together using the plus operator (+
) or string interpolation.
String interpolation is a useful JavaScript feature that allows you to put variables directly into a string:
// Here is an example using the plus operator to concat strings
const greetingStart = "Hello, my name is ";
const name = "Daniel";
const greeting = greetingStart + name;
console.log(greeting); // Logs "Hello, my name is Daniel"
// Here is example using the String interpolation to concat strings
const greetingStart = "Hello";
const name = "Daniel";
const greeting = `${greetingStart}, my name is ${name}`;
console.log(greeting); // Logs "Hello, my name is Daniel"
Exercise (5 mins)
Write a program that logs a message with a greeting and your name using the two concatenation methods we used
Numbers
The next data type we will learn is number.
Unlike strings, numbers do not need to be wrapped in quotes.
const age = 30;
You can use mathematical operators to calculate numbers:
const sum = 10 + 2; // 12
const product = 10 * 2; // 20
const quotient = 10 / 2; // 5
const difference = 10 - 2; // 8
Floating point numbers
Numbers can be integers (whole numbers) or floats (numbers with a decimal point).
const preciseAge = 30.612437;
Numbers with decimals can be rounded to the nearest whole number using the Math.round
function:
const preciseAge = 30.612437;
const roughAge = Math.round(preciseAge); // 31
Exercise (15 mins)
- Create two variables
numberOfTrainees
andnumberOfMentors
- Log a message that displays the total number of trainees and mentors
Expected Result
Number of trainees: 15
Number of mentors: 8
Total number of trainees and mentors: 23
Using the variables you created in the previous steps, calculate the percentage of mentors and trainees in the group (percentages must be rounded to the nearest integer)
You should then log this number to the console.
Expected Result
Percentage of trainees: 65%
Percentage of mentors: 35%
Extra Exercise (10 minutes)
Instructor note: Only complete this exercise if you have enough time in the lesson
Using online documentation, what other things can you do with the Math
library?
Working in small groups, pick one other thing that Math
can do and prepare a short (2 - 3 min) explanation for the rest of the class.
Statements and expressions
In JavaScript, sections of code can be called expressions and statements. We will use these words frequently to describe code.
Expression
Any unit of code that can be evaluated to a value is known as an expression.
We say that an expression evaluates to a value. We use expressions all the time in lot of different places:
- they can be assigned to variables
- returned from functions (more on this later)
- passed as arguments to functions (more on this later)
- combined with other expressions to form new expressions
The following are all examples of expressions:
1 + 1; // evaluates to 2
("hello"); // evaluates to "hello"
2 * 4; // evaluates to 8
"Hello" + "World"; // evaluates to "HelloWorld"
We can take the value produced by an expression and assign it to a variable.
let total = 1 + 1; // assign the value 2 (the value produced by the expression 1 + 1) to a variable total
let greeting = "hello"; // assign the value "hello" (the value produced by the expression expression "hello") to a variable greeting
let product = 2 * 4; // assign the value 8 (the value produced by the expression 2 * 4) to a variable product
let worldGreeting = "Hello" + "World"; // assign the value "HelloWorld" (the value produced by the expression "Hello" + "World" to a variable worldGreeting)
Exercise ( 15 mins )
You can run node
by itself, which will open a node console, also called a Read–Eval–Print Loop (REPL).
This console allows you to enter code in the console line by line and is a great way of testing bits of code before writing it in a script. Each time you press enter, it will print out what the expression you typed evaluates to.
In your terminal, run the command node
and then enter a line of code from the code below and then run enter. Do this for each line of code in the list.
Think about the following questions each time:
What is the output in the terminal each time ? Is there anything you didn't expect ?
Can you work out which of the lines of code below are expressions and which are not ?
- Add some example here
Remember it can only be an expression if you can place it on the right hand side of an assignment.
1 + 2;
("hello");
"hello" + " " + "trainees and volunteers!";
let favouriteColour = "purple";
favouriteColour;
"hello" + 42;
if (true) {
}
const hoursInADay = 24;
hoursInADay * 7;
`My favourite colour is ${favouriteColour}`;
(To exit the node REPL, you have to press Ctrl+d)
Statement
A statement is some code that typically carries out an instruction. You have encountered statements already:
const greeting = "Hello Code Your Future!";
The above piece of code is a variable declaration, which is also a statement.
This statement is an instruction to store the value "Hello Code Your Future!"
in the variable greeting
.
There are other different types of statements that we will learn about in the coming weeks, such as an if
statement.
Functions
Functions are blocks of code that can do a task as many times as you ask them to. They take an input and return an output.
Here's a function that doubles a number:
function double(number) {
return number * 2;
}
To use a function then we we need to call it ( some people will say invoke )
const result = double(2);
console.log(result); // 4
The function double
is being called by placing parathenses after the name of the function like this double()
🔑 The input given to a function is called a argument
🔑 A parameter is a variable that is used to refer to an argument
In the example above, we're saying that inside the function double
, there is a variable called number, but we don't know what the value of the variable is until someone calls the function, at which point they will give a value for that variable.
A function can have one or more parameters, check out the example below:
function add(a, b) {
return a + b;
}
In the function add
, the parameters are a
and b
.
If we call the function like this add(10, 32)
then we're passing 2 arguments (or inputs) into the function : 10
and 32
. We can use any expression as an argument.
When you write a function (sometimes called declaring a function) you can define the parameters with any valid variable name.
The function below does exactly the same thing as the one above:
function add(num1, num2) {
return num1 + num2;
}
Exercises (20 minutes)
In a new javascript file try solving each of the questions below:
Create a function called formatPenceToPounds
that should
- take a number as an input ( representing an amount of money in pence )
- return a string starting with a
£
sign and the input number converted to pounds.
For example, formatPenceToPounds(199)
should evaluate to "£1.99"
In your groups, think carefully about the following things:
- what the parameter name should be
- creating good names for any variables you use
- don't use
console.log
inside the body of the function
Call formatPenceToPounds
a few times with different inputs and console.log
the outputs in order to check your function. 🙂
:::
Check out the code below:
function printMessage(x) {
console.log("Hello, nice to meet you " + x);
}
function getMessage(name) {
return "Hello, nice to meet you " + name;
}
printMessage("Mitch");
printMessage("August");
getMessage("Laetitia");
The functions above behave similarly but differ in some important ways.
In groups, study the code above and then answer the following questions:
- How many times is the function
printMessage
called ? - How many times is the function
getMessage
called ? - What is the parameter name for the function
printMessage
? - What is the parameter name for the function
getMessage
?
Discuss briefly which parameter name is better out of the two functions and why ?
- What is the return value of the function
printMessage
whenever it is called ?
Someone then creates 2 further variables messageForAli
and curiousMessage
:
const messageForAli = getMessage("Ali");
const curiousMessage = getMessage(42);
f) What will the variable messageForAli
evaluate to when the code above is executed ?
g) What will the variable curiousMessage
evaluate to when the code above is executed ?
Remember you can use console.log
to log variables in order to check your answers to f) and g)
Hint: Think carefully about the parameters and arguments for getMessage
for part g)
Pair Programming Exercise (10 minutes)
Swap your laptop with your neighbouring pair (or send your code to them over slack) and review each other's code for the formatPenceToPounds
and increaseByHalf
exercise - what can be improved? Is the code readable?
Giving Feedback to Each Other
A critical part of being developer is reading other people's code and giving good feedback and improvements. This can happen even when you don't know a lot of code - everybody has unique ideas and insights into how to make code better!
Let's spend the next five minutes reviewing CodeYourFuture's Style Guide.
This style guide is how we expect you to write code whilst you're at CodeYourFuture - most companies have one and it's really important you stick to it to make sure we all write code that other people can understand.
https://syllabus.codeyourfuture.io/guides/code-style-guide
A style guide doesn't change anything about how your code operates - code that breaks these rules will still work. However it's important so that other people can more easily read your code.
Exercise (5 minutes)
This is a Live exercise. The Teacher should take suggestions from the class on how this code can be improved and add comments themselves. Please read the teaching notes.
Next, let's see an example of some code that we could suggest some improvements to.
https://github.com/CodeYourFuture/BadCodeExample/pull/1
Using what you've just read in the Style Guide.
- What improvements could we suggest on the code?
- Are there any other improvement we could suggest that aren't in the Style Guide?
Glossary
- Console: a place on your computer to run scripts or commands from
- Command: something that you type on your computer which performs an operation that your computer does
- Directory: another word for "folder" on your computer
- Parameter: a placeholder for values you can pass into functions
- Primitive type: a built-in type in JavaScript (e.g. strings and numbers are primitive types in JavaScript)
- Script: a file that contains a program
- Terminal: another word for "console"
PD (Agile development)
Session objective: This session provides an overview of the Agile software development methodology.
Coursework
Click here to view the homework for this lesson.
Feedback
Please spend two minutes reviewing this lesson to help us improve it for the future. This feedback will be shared with volunteers.