Javascript Functions
Tags: beginners, javascript, tutorial, webdev
Published: 2021-06-20 22:39:57

## Table Of Contents 
  * [Functions](#functions)
  * [Traditional Function](#traditional)
  * [Arrow Function](#arrow)
  * [Conclusion](#conclusion)


### Functions <a name="functions"></a>

A fundamental building block for Javascript programs. The most common feature in all programming languages. What exactly is a function in technical terms? a *function* is a block of code that is defined once and can be executed or invoked numerous times. Another quick note is functions are also objects, meaning they can be manipulated by other programs too. 

We can declare a function by using the `function` keyword, following by a name of our liking, followed by a pair of opening and closing `parentheses`, a space for between the `parameters` and the `curly` braces with zero or more statements inside.   

```
  function buzz() { }
```

There is another way of declaring functions in modern javascript, and thats with the `arrow function`. Which actually looks like an arrow, but does have its own section that we will get too since it has limitations. 

```
  () => {}
```

Inside of the parentheses we can include **identifiers** or in other words **parameters**, these **parameters** act as local variables for the body of the function. To get a value out of those variables we can simply invoke our function by including some values or in technical terms **arguments**. We use these arguments to compute a value and return that value part of the invocation. 

If a function is assigned to a property of an object, that function becomes a `method` of that object. This is where things start to get a bit more complex since we are now invoking on or through an object, as where the object becomes the context of the `this` keyword. The `this` keyword is a while other article to discuss about so we will skip that for now, but it's something good to note down about when creating methods for objects. With that being said we are also allowed to simply assign a function to a variable and pass them to other functions. Since functions are objects like we mentioned before, you can set properties on them and invoke methods on them too.


### Traditional Functions <a name="traditional"> </a>

The `function` keyword is the only way to declare a function. We can also declare function expressions which pretty much a function stored inside a variable. For example


Function declaration

```

function printName(str) {
   return "Hello " + str
}

console.log(printName('oscar')) // output "Hello oscar"

```

Function expression

```
let addUp = function(a,b) {
  return a + b
} 

console.log(addUp(1,2)) // output 3
```

One of the major differences between a `function declaration` and `function expression` is the *function* name, which in function expressions can be left out to create anonymous functions. By default functions return `undefined` if there is no specific return statement with any value to return. One other thing to note about functions is that they can be conditionally declared too inside `if/else` statements, but typically has inconsistent results so it's not a very good pattern to use. 

A cool feature that comes with *declaration functions* is **hoisting**, you are able to use your function before you declare it. 

```
printHello(); // logs 'Hello'

function printHello() {
   console.log('Hello');
}

```

Function expressions on the other hand are __NOT__ **hoisted**. So you can not use your function expression before you create them. 


### Arrow Functions <a name="arrow"> </a>

We were introduced into `arrow functions` in __ES6__, it's a nice compact alternative to a traditional function expression, but has limitations and can't be used in all situations. It does not have bindings like `this` or `super` keywords and not suitable for `call`, `apply`, or `bind` methods, cant be used as constructors either. 

Let's break down a `declared function` into a `arrow function` 

```
  function(name) {
    return 'Hello ' + name;
  }
```  

We start off by removing the `function` keyword and leave the arguments, and add an `arrow` between the arguments and curly braces. 

```
  (name) => {
  return 'Hello ' + name;
}
```

next we will remove the curly braces and return statement. The return statement is automatically implied. 

```
  (name) => 'Hello ' + name;
```

and for the last step we can remove the parantheses since we only have a single argument being passing into the parameters. 

```
  name => 'Hello ' + name;
```

As we mentioned before, it is highly recommended that we don't use arrow functions are `methods` to avoid bugs or any other issues, arrow functions are best for non-method functions. 


## Conclusion <a name="conclusion"></a>

I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe that should be made to help me and others. Thank you for your time for sticking this far!