JavaScript Functions

When you start writing JavaScript there is tendency you will repeat portions of your code which can make your code difficult to understand and might hurt readability along the line.

JavaScript has functions (like programming languages) that can be used to group code into something called a block. Then this block of code can be used any number of times in your code. Some care has to be taken when using functions, mostly especially the name of the function.

The name should be descriptive enough and it should indicate what the function is doing. In some instances it is recommended to use verb like names.

We will take a general overview of functions in JavaScript without going deep.

We will talk about

• Function definition
• Function invocation
• Function types

Let's begin.

All screenshots are from Firefox 71.0 and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the multi-line code editor in the console.

I used the var keyword for variable declarations but, if you want to avoid some behavior like variable hoisting I'll advise that you use let or const.

In the last few paragraphs we gave a simple basic explanation functions in JavaScript. Now, let's get technical.

Technically speaking — a function is a block of JavaScript code that is defined once but may be executed, or invoked, any number of times.

There are three type of functions in JavaScript namely:

• Function declaration
• Function expression
• Arrow functions (added in ES6)

Functions declaration and expression are defined with the function keyword followed by the following components:

• The name of the function. This name is required for function declarations but optional for function expressions (explored later)
• A pair of prentheses that'll contain a comma-separated list of zero or more identifiers called parameters. When the function is called we pass arguments in place of these parameters
• A pair of curly braces with zero or more JavaScript statements.These statements are the body of the function, they are executed whenever the function is invoked

The syntax of the functions are as follows:

For function declaration:

function functionname (arg1, arg2, ... argn) {
  // statements
}

An example:

/**
  * The function below is named myDetails and it
  * has two parameters: first_name and last_name.
  * 
  * For the sake of simplicity i have omitted error
  * checking.
  */
function myDetails(first_name, last_name) {
  console.log(first_name + " " + last_name)
}

When executed in the console:

The function invoked with two arguments:

For function expression:

/**
  * A function expression
  */
var variable_name = function optional_function_name() {
  // statements
}

An example:

/**
  * The following function is a function expression
  * named myDetails and it has two parameters: first_name
  * and last_name.
  * 
  * For the sake of simplicity i have omitted error
  * checking.
  */
var myDetails = function(first_name, last_name) {
  console.log(first_name + " " + last_name)
}

When executed and invoked in the console:

For arrow functions the basic syntax is:

var variable_name = parameter => expression;

An example:

/**
  * The following function is an arrow function
  * named myDetails and it has two parameters: first_name
  * and last_name.
  * 
  * For the sake of simplicity i have omitted error
  * checking.
  */
var myDetails = (first_name, last_name) => {
  console.log(first_name + " " + last_name)
};

When executed and invoked in the console:

We've merely scratched the surface of functions in JavaScript but i hope its enough to peak your interest to explore further.

If you feeling adventurous, you can check the following resources:

• Functions :: Eloquent JavaScript
• Named function expressions demystified

Up next, The DOM.