What the Function?

JavaScript can be used everywhere and it’s a programming language that’s great to learn. It can transform a web page from being a dull document to something that’s interactive. There are several fundamentals of JavaScript to learn such as the syntax, variables, data types, objects, conditionals, arrays, loops and functions. Let’s focus on functions!

What in the world is a function? Someone with a non-technical background may understand the term to best mean a group of related actions. In the computing world, a function is a named section of code that’s often referred to as a block or bundle. The bundle or block of code is a set of statements that calculates a value or performs a task. Bundling allows it to be reused which saves lots of time from having to repeat lines of code multiple times and reduces the risk of errors. To use a function, it must be defined and given a name that’s easy to understand so it can be “called” to action later. The basic structure of a functions looks a bit like this:

function  nameOfFunction(listOfVariableNames) {
    statements of the function should be written here
}

Someone learning JavaScript may have come across the term Function Declaration. According to Merriam-Webster a declaration is the act of making a statement. A function declaration is a group of statements working together to perform a task. Basically, it defines a named function and allows the function to be used even before its defined.

A Function Expression is an anonymous function that doesn’t have a name and cannot be used before it’s defined. When the function is anonymous it can be assigned to a variable. It may look similar to this:

nameOfFunction = function (listOfVariableNames)  {
    function should be written here
};

Another type of function is the Arrow Function Expression. This allows a function to be expressed as an arrow function which shortens the syntax. Here’s an example before an arrow expression is applied:

let func = function(param1, param2, …paramN) {
    return expression;
}

The Arrow Function is more concise:

let func = (param1, param2, …paramN) => expression

The func has arguments (param1, param2, …paramN). The function evaluates the expression and returns a result.

Functions have arguments and they also have parameters. Parameters are the names (variables) listed in the function definition. Arguments allow values to pass into a function and change the functions behavior when it’s called. Arguments can be strings (a list of characters surrounded by quotes) or numbers but they can also be objects. Functions are Function Objects and are very versatile in JavaScript. There are five primitive data types (string, number, undefined, boolean and null) and anything that doesn’t belong to one of the five is considered an object.

Once a function is fully defined, meaning it has been named and specifics have been added that outline what the function is supposed to do, the code can run. To run the code, or execute a function, it needs to be called or invoked by entering the name of the function followed by a set of parentheses which can be empty or contain arguments that the function expects. The body of the function executes when the function is called and any text that JavaScript was asked to print will also display.

nameOfFunction();
‘Returned Message Outlined Inside the Function’

The last, but not least, part of Functions is the Return Value. Using the example above, if the function was called in a browser it may return a third line.

nameOfFunction();
‘Returned Message Outlined Inside the Function’
undefined

Every function in JavaScript, unless specified otherwise, will return undefined which is the return value. If the function is asked to print a message instead of returning a value it will return as undefined.

For anyone attempting to learn JavaScript functions for the first time it can be overwhelming and take a bit of processing before its fully understood. Just remember functions allow blocks of code to be reused and perform differently depending on the arguments passed. Meaningful names can be given to functions making it clear a function has something specific to do. And functions always return a value even if the value is undefined.