###### tags: `JavaScript`

# Functions

[Codepen Link: ](https://codepen.io/WolfsVeteran/pen/poPbzRm?editors=0012)
What are functions? What do we use them for? Is there a pattern to them? Do we really need them?

These are all questions - good ones that get asked when it comes to JS. So lets take them 1 at a time

1. What are functions? - Well basically they are instructions on how to do something
2. What do we use them for? - We use them to calculate things or maybe just do something on a web page. They are the logic behind those light switches on the wall
3. Is there a pattern to them? - You bet. You have to give them a name, and instructions
4. Do we really need them? - Can you build a website with out JS sure, but do you want to? Can you build better sites with it? YES! JS and functions aren't that stupid math you learned in high school that you have never used again. Sure the a + b function you may not use but it serves its purpose

## Part 1 - the structure of a function
Functions come in a few different forms. The basic structure however is the same for them all

function add() {

}
add()

1. I am stating that I am going to create a function by using that word
2. I am giving it a name - in this case add
3. I am stating that it does not require outside data with the ()
4. {} this is where my instructions will go
5. add() This is how we will activate our function - Most of the time this will end up in your html

## Part 2 - order matters
Are you one of those people that reads the last chapter of a book first? I hope not because thats not how programing works. In all of the programing languages order is very important
- Ever heard of PEMDAS - Order of operations? No that doesn't apply here, well at least not directly. The concept does however. Progaming language read top down. You can't call a function until you write the function, any more than you would drive a car before you start the car.

## Part 3 - return vs console.log
This one gets students all the time. And a good part of the time the order of how they are written is the cause of something
- Return - when you see this in a function this is a hard stop. Do not pass go and do not collect $200. Game is over. It is also where the the results of the function are displayed on the web page
- console.log - A developers best friend or worst enemy. This will print (what it is told to print) to the console. Not the website to the typical end user will never see these. We use these to test our code, or debug our code. Just make sure that if it is inside a function you have it written before the return or you will never see it printed.

## Part 4 - Show me a function

function add() {
    var a = 2
    var b = 3
    var c = a + b
    console.log(a)
    console.log(b)
    return(c)
}
add()
console.log(add())

1. Created a function and named it add and stated it does not require any parameters
2. instruction step 1 created a var named a and set it = 2
3. instruction step 2 created a var named b and set it = 3
4. instruction step 3 created a var name c and set it = a + b (or in this case 2 + 3)
5. instruction step 4 please print to the console the value of a
6. instruction step 5 please print to the console the value of b
7. instruction step 6 stop all other instructions and please return the value of c
8. We are simply calling the function
9. Here we are also calling the function just inside of a console.log
Want to see how this function will play out?
[Add function](http://pythontutor.com/javascript.html#code=function%20add%28%29%20%7B%0A%20%20%20%20var%20a%20%3D%202%0A%20%20%20%20var%20b%20%3D%203%0A%20%20%20%20var%20c%20%3D%20a%20%2B%20b%0A%20%20%20%20console.log%28a%29%0A%20%20%20%20console.log%28b%29%0A%20%20%20%20return%28c%29%0A%7D%0Aadd%28%29%0Aconsole.log%28add%28%29%29&curInstr=0&mode=display&origin=opt-frontend.js&py=js&rawInputLstJSON=%5B%5D)

- Lets write that same function a little differently but get the same results

function add(a, b) {
    console.log(a)
    console.log(b)
    return a+b
}
add(2,3)
console.log(add(2,3))

[Version 2 add function](http://pythontutor.com/javascript.html#code=function%20add%28a,%20b%29%20%7B%0A%20%20%20%20console.log%28a%29%0A%20%20%20%20console.log%28b%29%0A%20%20%20%20return%20a%2Bb%0A%7D%0Aadd%282,3%29%0Aconsole.log%28add%282,3%29%29&curInstr=11&mode=display&origin=opt-frontend.js&py=js&rawInputLstJSON=%5B%5D)

- Same results less lines of code and this function is now reusable. Meaning since we stated that it takes 2 parameters (a and b) and when we call the function we are passing in numbers that means that when we actually go to use this function the user (in most cases that is how the numbers get added) can input any 2 numbers and the function will still work.

There is more to functions though right? You bet. It would take years to show you everything you can do with functions. Just remember that they are a set of instructions that were given a name