Skip to content

Latest commit

 

History

History
466 lines (302 loc) · 8.36 KB

lesson05.md

File metadata and controls

466 lines (302 loc) · 8.36 KB

JavaScript Course - Spring 2026

Lesson 5, Thursday, 2026-04-02

Recap: Data types

Which data types have we seen so far?

Data Type Example Operators
number -0.5, 42 +, -, *, /, **
boolean true &&, !, ||
string "hello" +
null null === !==
undefined undefined === !==

Recap: Operators

What are the three common operators in Javascript?

Group Operators Example
Numerical Operators + - * / ** 5 + 4 * 3
7 / 2 - 2
"Hello" + " World"
Comparison Operators === !== < > <= >= 30 !== 25
20 >= 18
Logical Operators || && ! true && !false

Recap: Conditional Statements

What areconditional statements

If...else statements are used to run code if a condition is true.

if (condition){

} else if (anotherCondition) {

} else {

}

Functions

functions

A function is a reusable block of code used to perform a particular task.

function sayHello() {
  document.body.textContent = "Hello There!";
}

Function definition

There are 3 mandatory parts in a function definition:

  1. the function keyword
  2. the name of the function we are defining, followed by parentheses ()
  3. the function body, surrounded by curly braces

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

Function definition and execution

It's important to distinguish between 2 parts when working with functions:

  1. function definition (also called function declaration)
  2. function execution (calling the function)

Function definition and execution

// 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.

Function execution

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

Quiz

What's in textContent after the following code runs:

function output42() {
  document.body.textContent = "42";
}

Answer: Nothing, because we never call the function

Quiz

What's in textContent after the following code runs:

function output42() {
  document.body.textContent += "42";
}

output42();
output42();

Answer: "4242"

Quiz

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"

Task 1

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?

Function parameters and arguments

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 parameters and arguments

function sayHiToOwen() {
  console.log('Hi Owen');
}
function sayHiToMellina() {
  console.log('Hi Mellina');
}
function sayHiToSevtap() {
  console.log('Hi Sevtap');
}

sayHiToOwen();
sayHiToMellina();
sayHiToSevtap();

Function parameters and arguments

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 parameters and arguments

function sayHi(name) {
  console.log("Hi " + name);
}

sayHi('Owen');
sayHi('Mellina');
sayHi('Sevtap');
  • name is a function parameter
  • "Owen", "Mellina", "Sevtap" are arguments. In each function call they will be assigned to the name parameter

Multiple parameters

A function can have any number of parameters

function introduce(parameter1, parameter2, parameter3) {
    console.log(parameter1, parameter2, parameter3);
}

introduce("argument1", "argument2", "argument3");

Each argument will be assigned to the corresponding parameter in order, from left to right

Multiple parameters

function greetFriend(greeting, name) {
  console.log(greeting + " " + name + ", how are you today?");
}

greetFriend("Olá", "Mellina");
greetFriend("Merhaba", "Sevtap");

Returning values

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.

Return: example

function giveMe5() {
  return 5;
}

let number = giveMe5();
// number is 5

Quiz

What is the value of the variable result?

function add(a, b) {
  return a + b;
}

let result = add(3, 5);

Result is 8

Returning values

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
}

Common mistakes

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!

Quiz

What is the value of result?

function giveMe5() {
  return 5;
}

let result = giveMe5() * giveMe5();

Answer: 25

Quiz

What is the value of result1, result2, result3?

function checkAge(age) {
  if (age >= 18) {
    return 'User is 18 or older';
  }
  if (age < 18) {
    return 'User is younger 18';
  }
  return 'The age is not provided';
}

let result1 = checkAge(19);
let result2 = checkAge(17);
let result3 = checkAge();

Result1: User is 18 or older

Result2: User is younger than 18

Result3: The age is not provided

Task 2

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 -10

Task 3

Write 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."

Bonus Tasks

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.

Bonus Bonus Tasks

Want to practice more? Try solving the tasks in index.html