Functions are DRY
Tags: javascript, beginners, programming, 100daysofcode
Published: 2023-03-31 22:29:55

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions), 
>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 `firstName`s and `lastName`s 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 (**D**on't **R**epeat **Y**ourself) 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.