There is a very common rule in programming - you don't wanna repeat yourself. It is there due to the very obvious reason, you do not want to waste the computer's resources for executing a line of code that is not needed.

For the same reason we have something called a function which we can use to store a block of code that we can use again and again. let's take a practical example of where this can be used. Let's say you working as a cashier in a fashion store (a very old-school store). Your job is very simple, calculate the total bill of the items and add 18% tax on the total. You take the handy calculator feed in the prices of the items for each customer then calculate the 18% and finally make the bill for the customer.

Imagine you being this smart ass and doing this all day, I know you can't imagine this cause in the first place you are a smart ass and in the second place you know how to code. So you decide to make a program that does your entire job with just a few clicks.

Breaking down Functions

functions have three parts to it

1. parameter/argument (input)

2. function body (the machine)

3. return value (output)

before going to each part let's just understand the logic behind functions. Functions are like machines - you give some input, the machine process it and then gives us some output.

In javascript the inputs are called parameters, there can be multiple parameters, just one parameter and sometimes no parameter at all.

the function body contains the real block of code which will process the input and give us some output. Now lets us look at the syntax.

Declaring Functions

function bill(itemTotal){
    //function body
    const total = `total amount is ${itemTotal}`
    return total
}

To declare a function we use the 'function' keyword followed by the function name and then by round brackets inside which we mention the parameters separated by commas. Then we use curly brackets inside which we write our function body which does the main job. Finally, every function returns some value. The return statement is used to specify what value to return, this is the output.

You can create a function with no return value and parameters. In such functions, they are equal to not defined, but remember every function contains parameters, a function body and a return value.

Enough of the theory, now let's look at our real-life example and write that bill program.

function bill(itemTotal){
    const finalBill = itemTotal + (itemTotal*0.18)
    return finalBill
}
const custBill = bill(500)
console.log(custBill)

You first declare the function with the 'function' keyword, followed by round brackets inside which you include the parameter (in our case its itemTotal which will store the total sum of prices of all items purchased by a customer ). Then inside the curly brackets, you write the body of the function. For our program, we simply calculate the sum of itemTotal and 18%(tax) of the itemTotal which stores the total of all the item purchases by the customer. Finally, we store this in a variable called finalBill and this is our output, which we return using the 'return' statement.

Calling or Invoking the function

once the function is declared we can call it or invoke it anywhere in our program. To call a function we simply use the function name followed by round brackets inside which we put in the value for our parameters (the input). These values of parameters are called as arguments.

const jackBill = bill(1800)
console.log(custBill)

Bare in mind this is a very simple example of a function, it is so that you could understand the concept of function, but as you go along the journey with this basic knowledge of functions you will be writing very complex functions and using them quite often in your programming journey across multiple languages.

Functions as expressions

In javascript, you can store functions in variables without giving them any name. Let's have a look at how you can do it

const bill = function(itemTotal){
    const finalBill = itemTotal + (itemTotal*0.18)
    return finalBill
}

this will do the same job as the function but here in this case the function is not declared, it is used as a expression whose value is stored in a variable called bill. Interesting isn't it, but how is it different than the normal function declaration? The notable difference would be that you can call a declared function before it is even declared but in the case of function expression you cannot do that. Cause now the function is an expression and its value is stored in a variable, hence you cannot retrieve a value of a variable before it exists.

Arrow Functions

Another type of functions expressions in JavaScript are the arrow function, they are called arrow functions cause we use '=>' while writing them. Let's have a look at them

const bill = (itemTotal) => {
    const finalBill = itemTotal + (itemTotal*0.18)
    return finalBill
}

While writing arrow functions we don't even use the function keyword. The function expression starts with declaring a variable inside which the arrow function will be stored, then followed by round brackets which list our parameters for the function and finally 'the arrow'(=>) which is followed by the function body and return statement in the curly brackets.

Arrow functions are a great way to write one-line functions but other than this there are some limitations. This is a topic of further discussion and a different blog dedicated to the difference between arrow functions and functions declaration would be a better option.

I hope you understood what functions are, how you can write one, different types of functions in javascript and finally how to implement them in your code. Do practice them and get your hands dirty.

Happy Programming :)