Lesson 6, Thursday, 2023-10-05
- Functions
Which data types have we seen so far?
| Data Type | Example | Operators |
|---|---|---|
| null | null |
=== !== |
| undefined | undefined |
=== !== |
| boolean | true |
&&, !, || |
| number | -0.5, 42 |
+, -, *, /, ** |
| string | "hello" |
+ |
Which statements have we seen so far?
| Statement | Example |
|---|---|
if |
if (true) {} |
Variables - what are they?
A function is a reusable block of code:
function sayHello() {
document.body.textContent = "Hello There!";
}The code in the function will only execute when we call the function. We can call the function like this, using a pair of open and closed parentheses:
sayHello();It's important to distinguish between 2 parts when working with functions:
- function definition (also called function declaration)
- function execution (calling the function)
// this is the function definition.
function sayHello() {
document.body.textContent = "Hello There!";
}
// this is the function call (execution)
sayHello();We always need to define a function in order to call it.
There are 3 mandatory parts in a function definition:
- the
functionkeyword - the name of the function we are defining, followed by parentheses
() - the function body, surrounded by curly braces
To call (execute) a function we need to write its name followed by parenthesis.
you can write any amount of code you want in the function:
function sayHello() {
document.body.textContent = "Hello There";
document.body.textContent += "... ";
document.body.textContent += "General Kenobi!";
}
sayHello();A function can contain any kind of code:
function checkTemperature() {
let temperature = 10;
if (temperature < 0) {
document.body.textContent = "it's cold outside";
} else {
document.body.textContent = "it's not that cold";
}
}
checkTemperature();What's in textContent after the following code runs:
function output42() {
document.body.textContent = "42";
}Answer: Nothing, because we never call the function
What's in textContent after the following code runs:
function output42() {
document.body.textContent += "42";
}
output42();
output42();Answer: "4242"
Where does the "Hey!" appear in your console?
console.log('I go first');
function sayHey() {
console.log('Hey!');
}
console.log('I go second');
sayHey();
console.log('I go last');Answer: between "I go second" and "I go last"
We have a function that says "Hi Owen", another one that says "Hi Mellina" and a last one that says "Hi Sevtap".
How can we do it without repeating ourselves?
function sayHiToOwen() {
console.log('Hi Owen');
}
function sayHiToMellina() {
console.log('Hi Mellina');
}
function sayHiToSevtap() {
console.log('Hi Sevtap');
}
sayHiToOwen();
sayHiToMellina();
sayHiToSevtap();The code works, but we are basically writing the same function 3 times and just changing a string inside.
We want to avoid rewriting nearly identical code.
Functions have the option to accept parameters that let us do just that.
function sayHi(name) {
console.log("Hi " + name);
}
sayHi('Owen');
sayHi('Mellina');
sayHi('Sevtap');nameis a function parameter- "Owen", "Mellina", "Sevtap" are arguments. In each function call they will be assigned to the
nameparameter
A function can have any number of parameters
function multipleParameters(parameter1, parameter2, parameter3) {
console.log(parameter1, parameter2, parameter3);
}
multipleParameters("argument1", "argument2", "argument3");Each argument will be assigned to the corresponding parameter in order, from left to right
function greetFriend(greeting, name) {
console.log(greeting + " " + name + ", how are you today?");
}
greetFriend("Olá", "Mellina");
greetFriend("Merhaba", "Sevtap");Typically, we use functions to make a calculation. We want to use the result of that calculation outside of the function.
We can use the return keyword for that.
function giveMe5() {
return 5;
}
let number = giveMe5();
// number is 5What is the value of the variable result?
function add(a, b) {
return a + b;
}
let result = add(3, 5);Result is 8
The return keyword exits the function immediately. Any code after the return statement will not be executed.
function describeWeather(temperature) {
if (temperature > 25) {
return "It's hot";
// no further code will be executed
}
if (temperature < 5) {
return "It's cold";
// no further code will be executed
}
return "It's nice outside";
console.log("function finished"); // this will never be reached
}What is the value of the variable number?
function giveMe5() {
console.log("5");
}
let number = giveMe5();
console.log(number); // ???undefined! This function does not have a return value!
What is the value of result?
function giveMe5() {
return 5;
}
let result = giveMe5() * giveMe5();Answer: 25
Write a function that writes your name to the textContent of the HTML document's body.
Call the function. What do you see on your web page?
Write a min function that returns the smaller of the two numbers. If the 2 values are the same, it will return the first value.
min(1, 2); // should return 1
min(100, 99); // should return 99
min(-10, 0); // should return -10Write a function that takes name of a person, their age, and the language they speak, and returns a string that introduces this person.
Example:
Owen, 30, English → "Hello! my name is Owen, I am 30 years old and I speak English."
Here are some incomplete examples of using functions. Copy the contents of the file into a script tag, and try to fix the examples so that they run correctly.
Want to practice more? Try solving the tasks in index.html