Lecture 9

More about functions

What we would cover?

• Function parameters and arguments
• Return statement
• Callback
• Practice

So far we wrote functions in the following way

					
function buttonClickHandler() {
  const btnEl = document.getElebentById('importantBtn');
  btnEl.innerHtml = 'No it is not so important';
}
					
				

This function is good but we can't reuse it

Let's look at this example

We want to calculate the distance based on a speed and time

					
function calculateDistance() {
	let speed = 60;
	let time = 2;
	alert("Distance is: " + speed * time);
}
calculateDistance();
					
				

• Speed and time always the same
• We can only alert the distance

But we can improve!

Function parameters

Parameters are like variable boxes which you can use inside function

Syntax

					
function yourFunctionName(parameter1, parameter2) {
  // inside you can use them with theis names
}
yourFunctionName(valueForArgument1, valueForArgument2);
					
				

Lets change our distance calculator

					
function calculateDistance() {
	let speed = 60;
	let time = 2;
	alert("Distance is: " + speed * time);
}
calculateDistance();
					
				

					
function calculateDistance(speed, time) {
	alert("Distance is: " + speed * time);
}
calculateDistance(60, 2);
calculateDistance(100, 3);
					
				

We've seen function arguments before

• alert('Hello there!')
• prompt('How old are you?')
• btnEl.addEventListener('click', yourClickHandler)

Order metters!

Arguments should be provided in correct order

					
calculateDistance(60, 2);  // speed = 60, time = 2
calculateDistance(3, 100); // speed = 3, time = 100
					
				

Now we have this function

					
function calculateDistance(speed, time) {
  alert("Distance is: " + speed * time);
}
calculateDistance(60, 2);
calculateDistance(100, 3);
					
				

Now we can reuse our function with different values of speed and time!

But still we can only alert the result :(

Return statement

return statement stops the execution of a function and returns some value back

Syntax

					
function yourFunctionName(parameter1, parameter2) {
  let result = parameter1 + parameter2; // or any other operations
  return result;
}
					
				

Now our function looks like this

					
function calculateDistance(speed, time) {
	const distance = speed * time;
	return distance;
}
					
				

How do we use it?

						
function calculateDistance(speed, time) {
	const distance = speed * time;
	return distance;
}

const distance = calculateDistance(60, 2);
alert(distance);
console.log(`In console: ${distance}`);

// or in another example
alert(calculateDistance(60, 2) + calculateDistance(200, 2))
						
					

We can pass a function as an argument

and that function would be a callback

Let's create another function

					
function outputDistance(distance, callback) {
  let sentence = "Distance to the Alps is equal to: " + distance;
  callback(sentence);
}

outputDistance('100KM', alert);
					
				

					
function outputDistance(distance) {
  alert(distance);
}

outputDistance('100KM');
					
				

Class work