much ado about functions
Published: 2023-02-16 01:56:11

When I first started learning JavaScript, I really struggled with functions. What information was I giving the function? What information did a function actually need? What does it mean to return something? And why the heck aren't the variables I defined inside the function able to be used outside of it? 

So for my first blog, I wanted to write about functions. 
  
Functions can be simplified as "a set of instructions" that can be declared or expressed. Declaration uses the the syntax `function myFunction()`. Expression can use variables and arrows (`const myFunction =()=>`), or just variables (`const myFunction= function()`), or in some cases just arrows (`button.addEventListener('click',()=>`).

Declarations have the benefit of hoisting. When a function is hoisted, it is able to be invoked before it is actually declared in the file; think of it as JS grabbing all of the function declarations and pulling them to the top of the file before your program even begins. Declarations can also be used as constructors, which to date my cohort has not needed to use so I'm not knowledgable enough on the top to elaborate on that point. Just know that it is a thing! 

Expressions can be a lot more concise when a full declaration isn't needed. Expressions can also be anonymous, meaning it doesn't get a named assigned to it and therefore cannot be invoked later in the program. The function only gets used once. Below is an example of an anonymous function. 

`button.addEventListener('click',()=>console.log("I've been clicked!")`

Ok that's a lot about functions but what are we actually doing with them? Let's start off by doing a basic function declaration. The below function takes no arguments and does not return anything. It does an action and then it is finished. 

`function sayHello(){
  console.log("Hello!");
}`

When we _invoke_ this function later in our program, we should expect to see 'Hello!' in our console. Cool! How do we invoke it? By calling it by its name, `sayHello()`. It's important to remember the parantheses at the end; that's what's telling our program to actually run the function. We can accomplish this same function with the function expression below code. 

`const sayHello=function(){
  console.log("Hello!");
}`

The below function expression code _also_ works. 

`const sayHello=()=>{
  console.log("Hello!");
}`

Remember that if you were to use either of the latter two examples, you cannot invoke `sayHello()` before you've defined it, because they were created using function expression and are therefore not hoisted. 

Now that we've worked through a basic function, let's talking about arguments. An argument is what a function 'takes in'. Arguments are put into the parantheses when a function is invoked. But for the function to work, we need to tell the function to expect to receive something when it's defined. This is also done by putting something in the parantheses when the function is defined. (**It's worthing noting that when we define a function, the 'input' it's expecting is called a parameter and when the function is actually invoked, the 'input' is called an argument. However, the two are frequently used interchangably and therefore the rest of this blog will simply say 'argument'**). 

Going back to the sayHello example above, we aren't able to give it an argument when it was invoked (which would look like this, `sayHello(argument)`). When we defined sayHello, we left the set of parantheses next to it blank, so it's not expecting to receive anything. Let's fix that. 

 `function sayHello(name){
  console.log("Hello "+name);
}`

When we invoke that function, we must now give it an argument. If we invoke it by doing `sayHello("Sarah")` we can expect to get "Hello Sarah" in our console. We can also give function expressions arguments. 

`const sayHello=function(name){
  console.log("Hello "+name);
}`

Or:

`const sayHello=(name)=>{
  console.log("Hello "+name);
}`

It's possible to give a function more than one argument. See the below example. 

 `function sayHello(name,weather){
  console.log("Hello "+name+". It's "+weather+" outside.");
}`

So if we invoke the function like so: `sayHello("Sarah","snowy")` we can expect to see "Hello Sarah. It's snowy outside". There are a few more advanced things you will likely encounter with arguments in your tech journey, but this covers the basics. 

In all of the above examples, our function simply does something and is done. But what if we want to use something that the function produces? Below is an example of a function that adds two numbers. 

`function adds(number1, number2){
  let sum=number1+number2;
  console.log(sum);
}`

If we invoke our function like this `adds(2,3)`, we are going to declare a variable 'sum', give it the value of the sum our two arguments, and then console log that 'sum' variable. Our consoles will show an output of 5. (**It's worth noting that if we try to access 'sum' outside of the function, it won't work because the 'sum' variable has function scope.**)

In some situations, we may want access to that sum outside of the function. This is where return comes in. When something is returned, we are giving that something back to whatever function originally called it. See below.

`function adds(number1, number2){
  let sum=number1+number2;
  return sum;
}`

`console.log("The sum of our two arguments is "+adds(3,4))`

When we invoke that console.log, the console.log is going say "Ok, I need to log that first part which is just a string, then I'm going to execute that function, but I'm expecting something in _return_ that I will then log". And when the console.log runs `add(3,4)`, the `add(3,4)` function is going to _return_ it's sum back to the console.log, and console.log can finish it's job. The result is that "The sum of our two arguments is 7" will appear in the console. 

If we did not return the sum, we would see "The sum of our two arguments is undefined". By default, if a function does not have a return value, it will return 'undefined'. In most scenarios that 'undefined' return happens behind the scenes and we as programmers can largely ingore it...Or at least we can this early in our tech careers! 

I wanted to first blog to cover functions because once I understood the ins and outs of them, most other programming concepts have clicked with me (albiet I'm still working with vanilla JS, HTML, and CSS). It took me a long time to grasp the arguments, returns, and scope, so hopefully this post helps the pieces fall into place for some folks!