Index
Overview


This lab is about traditional functions. They might also be called regular, normal, etc.

Understanding functions boils down to understanding the big three. Once we understand these, then the rest (the function body) is just JavaScript code.

Functions in js are objects and are passed around as method/function parameters. In the next lab about "arrow functions" you will find a second (newer) function type. JavaScript is a language of choices. We will learn and put both function types into our js toolboxes.

Syntax


This is the syntax for a function declaration. Several examples follow.
function <Function Name>(<Function Params>) {
	<Function Body>
}


Examples


A function that receives one arg. It returns a value.
It simply doubles the arg, and returns the result.

function doubleIt(x) {
	return 2 * x;
}

//call function
const a = doubleIt(100);
//200
A function that receives multiple args. It returns a value.
It simply adds the two args, and returns the result.

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

//call function
const sum = computeSum(10, 5);
//15
It is sometimes useful to handle an indefinite number of args (effectively a list). We use what js calls the rest parameter syntax.

function computeSum(...numbers) {
	let sum = 0;
	for (let n of numbers) {
		sum += n;
	}
	return sum;
}

//call function
const sum = computeSum(1, 2, 3);
//6
We can write a function that receives no args, and returns a value.

function getDefaultWidth() {
	return 10;
}

//call function
const w = getDefaultWidth();
//10
We can write a function that receives args, and returns no value.

function printValue(value) {
	console.log(value);
}

//call function
printValue('Hello');
//output: Hello
We can write a function that receives no args, and returns no value.

function printDefaultWidth() {
	console.log("200");
}

//call function
printDefaultWidth();
//output: 200
In the previous examples we've been declaring functions.

We also have the option of making a function via an expression.

This example shows how.

They can be used interchangeably, but we'll try to use expressions when we only need a function temporarily. If the function could be called from multiple places, we want to declare it.

asExpression() {
	const fct = function(a, b) {
		return a + b;
	};
	
	//run it (on the var)
	const sum = fct(10, 5);
	prn(sum);
	//15
}
In the previous examples we've been declaring functions.

We also have the option of making a function via an expression.

This example shows how.

They can be used interchangeably, but we'll try to use expressions when we only need a function temporarily. If the function could be called from multiple places, we want to declare it.

asExpression() {
	const fct = function(a, b) {
		return a + b;
	};
	
	//run it (on the var)
	const sum = fct(10, 5);
	prn(sum);
	//15
}

Assigning to Vars and Running


A js strong point here. Functions are like any other value (object). We can assign them to variables and then "run" them.

And look at the syntax -- no different than running the function directly.

This lets us pass functions around (as method/function params) and that is where we will really see their potential.

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

//assign to var
const fct = computeSum;

//run it (on the var)
const sum = fct(10, 5);
//15