Function Declarations

Learning Goals

At the end of this Tutorial, you will be able to:

• Create a function declaration.
• Pass input values as arguments to function parameters.
• Assign an output value returned by a function to a variable.
• Add default input values in function parameters.
• Know the difference between global and local function-scoped variables.
• Recognise that function declarations are hoisted.

Passing values to functions

Typically, you will want to provide some information to a function for the function to perform its task. You can think of this as ‘feeding’ the function.

Technically, ‘feeding’ a function is called passing a value to the function. You pass a value – or maybe multiple values – to a function when you invoke (call or fire) the function.

Parameters and arguments

A variable that stores the expected input to a function is called a parameter.

• You specify the parameter(s) expected by a function when you create the function.
• You type the parameter(s) inside the parenthesis () of the function.

See the examples below.

In the above example, the parameter product_price is part of the function declaration. In other words, it is created as part of the function. There is no need to create this parameter as a variable separately.

Parameters are what you specify when you create the function. Arguments are what you pass to the function when you call the function.

In the example above:

• A function is created with a parameter named age. This never changes.
• When the function is called, an argument of 21 is passed to the function. This argument value can be different every time you call the function.

Add the following to your functions.html workfile:

Copy // Function declaration with parameter
function showNumber(num) {
   console.log(`Number passed as parameter is: ${num}`);
}

// Function call with argument
showNumber(21); 

Test your function by changing the argument value of 21 to a different number.

Functions with multiple parameters

A function may accept multiple parameters, separated by a , comma. The space between parameters is optional.

Copy the following to your functions.html workfile:

Copy // Function declaration with two parameters
function addTwoNumbers(num1, num2) {
    // Outputs the sum of two numbers
    console.log(`Sum is : ${num1 + num2}`); 
}

// Function call with two arguments
addTwoNumbers(1, 2);

In JavaScript tutorials, you will often see the words ‘parameter’ and ‘argument’ written as follows:

Functions and return values

Consider the function below you previously entered to your workfile.

Note the following:

• The function accepts two input parameter values, adds them, and outputs the result to the web browser console.
• The functions does not return a value back to anywhere else in the program.  (Or, more exactly, it automatically returns a value undefined. You will learned more this value in the Testing for weird values Tutorial.)

How can the calling code (the code outside the function) access and use the result of the function?

Two steps are required:

• Add a new last line to the function with the return keyword to send back the function's output to the calling code.
• Create a variable in the calling program and assign to it the output returned by the function.

Update your function in the functions.html workfile as shown above and verify it runs correctly.

Another feature of the return keyword is that it stops the function from executing any further code. Any line(s) of code after the return statement are ignored.

You can verify this by updating your function as shown below:

Copy // Function declaration with two parameters
function addTwoNumbers(num1, num2) {
    // Returns the sum of two numbers
    return (num1 + num2);
    // Outputs the sum of two numbers
    console.log(`Sum is : ${num1 + num2}`);  // Line will not be executed
}

// Function call with two arguments
let result = addTwoNumbers(1, 2);
console.log(`Returned result: ${result}`);

When you run the code, you will see that the line of code that outputs the sum of the two numbers is not executed.

No or too few arguments passed to a function

What happens if the number of arguments passed to a function is different to the number of parameters the function expects to receive?

Let's look at the two possibilities.

In this case, the function gives the missing parameter the default value of undefined.

Copy the following to your functions.html workfile:

Copy 
// Function declaration with one parameter that expects one argument
function showMessage(message) {
   console.log(message);
}

// Function called without passing an argument
showMessage(); // Outputs 'undefined'

To prevent such a mistake from throwing an error in your code, you can assign a default value to a function parameter. Update your function as shown below.

Copy 
function showMessage(message="An error occured. Contact support.") {
   console.log(message);
}

showMessage(); // Outputs "An error occured. Contact support."
showMessage('Hi, there'); // Outputs 'Hi, there!'

This will prevent an error that would ‘freeze’ the code and prevent it running further.

Too many arguments passed to a function

In this case, the function simply ignores the excess arguments.

Copy the following to your functions.html workfile:

Copy averageThreeNums = (x,y,z) => {
   console.log(`Average of three numbers is: ${(x + y + z)/3}`);
}
		
averageThreeNums(1,2,3,4,5,6); // ignores 4, 5, 6
averageThreeNums(1,2,3,4,5); // ignores 4, 5
averageThreeNums(1,2,3,4); // ignores 4
averageThreeNums(1,2,3); // result is always '2'

Functions and scope

The word scope means the availability of a variable or other item in a particular area of a program.

• Global scope: This is the area outside any functions in the program.   Variables defined in the global scope can be accessed and altered from any function or code block anywhere in the program.
• Local scope: Variables declared inside a function are local to that function.   Every function has its own scope. The same variable name can be used in different functions because local variables are not accessible across functions.