When I started learning to code, one of the concepts that really kept me in the dark was Function. I struggled to understand what function is, its uses or applications, and why you'll even need one in the first place. I was comfortable using variables and loops to build my TO-DO apps. But of course, I was using functions in my code UNKNOWINGLY (I mean most of us did right ☺?).

NB// In this tutorial, I used JavaScript to reference concepts and code samples.

What is a function?

According to MDN,

Function is a set of statements that performs a task or calculates a value.

Let's examine the problem

Programming is about writing instructions for the computer to execute. Consider the code below which prints the first, middle, and last names to the console;

let firstName="Anwar", 
    middleName="Sadat", 
    lastName = "Ayub"; 

console.log(firstName, '', middleName, '', lastName)

Our code will be executed from top to bottom so all 3 variables will be created before printing their values to the console. Writing this code is much simpler and straightforward without errors.
But what if we want to print 3 people's details i.e. their first, middle, and last names? It means we have to repeat our code 3 times as;

// First person's details
let firstName1 = 'Anwar',
  middleName1 = 'S.',
  lastName1 = 'Ayub'

console.log(firstName1, '', middleName1, '', lastName1)

//Second person's details
let firstName2 = 'John',
  middleName2 = 'C.',
  lastName2 = 'Smith'

console.log(firstName2, '', middleName2, '', lastName2)

//Third person's details
let firstName3 = 'Lara',
  middleName3 = 'W.',
  lastName3 = 'Croft'

console.log(firstName3, '', middleName1, '', lastName3)

For such a task, it is common to just copy and paste the previous code, change the variable names, and assign new values to them as we did above which is fine for a beginner but the associated problem is that;

First, our code is prone to errors. If you had noticed (or maybe not), you'd see that we forgot to change the middleName for the third console so the output will be

Lara Sadat Croft

instead of

Lara W. Croft

Now we are just starting out and already there is a bug in our code.

Second, copying/pasting our code 2 times will not be much work but imagine if you are tasked to print 20 people's details. That means copying and pasting our code 19 times and renaming the three variables 19 times. That's could be a lot of work which we can hardly keep up.

Third, your code base will be difficult to maintain. Let's assume you managed to copy/paste 19 times and moments later, you're tasked to print only the firstNames and lastNames or print out everyone's Address and Telephone. That's a lot of work.

Our DRY Solution

By using a function, we can easily manage our code base relatively easier. Remember we said that a function is a set of statements that performs a task . So in short, we put all our code together as unit i.e. the 3 variables and the console.log(), and make them run as one statement.

Parts of function

A function basically has;

1. name,
2. parameter,
3. statements that define the function, which I called body

We can also talk about the function scope, return values, etc. but that would be for another article.

For us to use a function in our code, we first declare the function, a similar concept to declaring a variable.

function functionName (parameter){
    //statements of the function
}

The functionName is the name of the function when it was created. The name should be descriptive enough to identify what the function does. It is also case-sensitive.
Aside named function, there is also an anonymous function that does not have a name but that will be discussed in a separate article.

The parameter represents the named variables you use to pass values to the function i.e. the firstName , middleName , and lastName .

Let's create a function called printPersonalDetails to display details of a person in the console;

function printPersonalDetails(firstName, middleName, lastName){

      console.log(firstName, '', middleName, '', lastName)

}

Next thing to do is to_invoke_ or call the function. Each time we create a function, we have to call the function for it to be executed. So to call our function printPersonalDetails;

printPersonalDetails();

But don't forget that our function takes in 3 parameters i.e. firstName , middleName and lastName.
Let's update our function call;

printPersonalDetails('Anwar','Sadat','Ayub')

What we did was assign values to the named variable we created in our function definition. Argument is the real value passed to the function. In calling our function, we passed arguments in place of parameters.

So if we want to print 3, we just;

printPersonalDetails('Anwar','Sadat','Ayub')

printPersonalDetails('John','C.','Smith')

printPersonalDetails('Lara','W.','Croft')

Now our code is cleaner and we can make changes relatively easier. Remember how we had to repeatedly copy/paste our four lines of code, and edit them before printing to the console? With function, we do not have to repeat our codes.
We used the DRY (Don't Repeat Yourself) principle, where we do not have to recreate variables, change their names and assign them with new values but rather use function to make your code cleaner and maintainable.

I know it's been a long article but thank you for taking the time to read through it. I would love to hear your thoughts.

See you on the next one.