JavaScript Functions
Tags: beginners, javascript
Published: 2019-12-31 01:45:25

---
title: JavaScript Functions
published: true
description: A beginners introduction to functions in JavaScript
tags: beginners, javascript
series: FrontEnd Development Zero to Hero
---
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 <b>Firefox 71.0</b> and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the <b>multi-line code editor</b> in the console._

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

<hr>

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

Technically speaking &mdash; 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:

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

An example:

```javascript
/**
  * 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:

![Function declaration in JavaScript](https://thepracticaldev.s3.amazonaws.com/i/rm2pjy4wpwe9j6e8g1gu.PNG)

The function invoked with two arguments:

![Function Invocation in JavaScript](https://thepracticaldev.s3.amazonaws.com/i/w3l2mq18xwoggk3neha2.PNG)

For function expression:

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

An example:

```javascript
/**
  * 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:

![Function execution and invocation in JavaScript](https://thepracticaldev.s3.amazonaws.com/i/jbzxlzyl3r2dymbw6mwf.PNG)

For arrow functions the basic syntax is:

```javascript
var variable_name = parameter => expression;
```

An example:

```javascript
/**
  * 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:

![Function execution and invocation in JavaScript](https://thepracticaldev.s3.amazonaws.com/i/048p67m7lwlfot9qs6f7.PNG)

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](https://eloquentjavascript.net/03_functions.html)
* [Named function expressions demystified](https://kangax.github.io/nfe/)

Up next, The DOM.