Tech Speak: Declaring a Function

How do you make a program do something for you? You declare a function and then later invoke that function. So how do you declare a function?

There are three different ways to declare a function. A Function Declaration, Function Expression and an Arrow Function Expression. Let's take a look at each of these...

Function Declaration:

Using a function declaration defines a named function and is created using the function keyword followed by the name of the function.

function foo (parameter) {
    //statements that handle the parameter(s)
};

When declaring a function using a function declaration the function is hoisted. Since the function is hoisted, it can be called before the function is defined.

Function Expression:

Using a function expression defines a named or anonymous function by setting the anonymous function equal to a variable.

let foo = function (parameter) {
//statements that handle the parameter(s)
};

When a function is declared using a function expression the function is not hoisted and cannot be called prior to the function being declared.

Arrow Function Expression:

An arrow function expression is defined using a shorthand syntax that does not use the function keyword. Instead it uses arrow notation (=>). However, the function is still set equal to a variable.

let foo = (parameter) => {
//statements that handle the parameter(s)
}

When a function is declared using an arrow function expression the function is again not hoisted and cannot be called before it is defined. Another important thing to note is that arrow functions do not create their own this value. Do not let the this keyword get you bogged down though.

Now that we have added terms like parameter and talked about calling a function lets look at these a bit more...

Parameter(s):

Functions are like ATMs and parameters are like a debit card. You must provide a debit card for an ATM to handle your request for a withdrawal, and functions must be provided with a parameter to return a result. A parameter is the variable that you are passing through the function and is defined inside of the parentheses when declaring the function. When passing a parameter through a function you can pass more than one, you can actually pass up to 255 parameters through a function. To do this the parameters are separated by a comma. Let's look at what parameters look like...

const add = function (num1, num2) {
   let sum = num1 + num2;
   return sum;
};

In the above function, num1 and num2 are the parameters that we are passing through our function that adds two numbers together. Before we move into calling a function let's look at yet another new keyword that was added return.

Return:

Every function must include the keyword return so that the a value is provided from the function. If return is not used the function will always evaluate to undefined. Let's use the function expression from above...

const add = function (num1, num2) {
   let sum = num1 + num2;
};

add(3, 4);
//this function will evaluate to undefined

 const add = function (num1, num2) {
   let sum = num1 + num2;
   return sum;
};

add(3, 4);
//this function will evaluate to 7 as expected

This may not seem very important, but if your function is for a calculator app not having the return keyword in your functions would cause very big problems for your user since the wrong value or no value at all could be output. One last thing to note is that the return keyword stops the function immediately and does not pass that line of code.

Calling a Function:

Calling a function, also known as invoking the function, is how the function is executed. To invoke a function you reference the function name followed by an opening and closing parentheses "()". Inside of the the parentheses following the function name is where you pass through the arguments that fulfill the parameters of the function. If the function does not take in any parameters the parentheses will remain empty.

And that is how a function is declared and invoked.

Until next time :)