Function declaration and Anonymous function
Tags: javascript, beginners, webdev, codenewbie
Published: 2020-02-03 04:49:00

**How to write a Function?**

You might already be familiar with these functions, which can be declared using the keyword `function` with a `function name`:

```javascript
function sayHi(){
	console.log('HI');
}
```

**Parameters and Arguments:**

Just like in any other language we can declare a function with parameters;

```javascript
function sayHi( name ){
	console.log(`HI ${name}!`);
}
```
Later we can invoke the function with an argument which the parameter will hold after getting invoked:

```javascript
sayHi('BRUCE WAYNE');

// result
HI BRUCE WAYNE!
```
As you can see, parameters are what we call placeholders when we declare the function, Arguments are what we call the values or references we pass when we invoke the function.

**We can also have default parameters:**

```javascript
function sayHi(firstName = 'john' , lastName='doe'){
	console.log(`HI ${firstName} ${lastName}`); 
}
```

We can pass arguments or not and the function will run just fine but with default parameters when we do not provide any arguments:

```javascript
// No arguments passed
sayHi();
// result:
HI john doe

// Single argument passed:
sayHi('bruce');
HI bruce doe
```

**But, what if we want to pass a lastName but not firstName:**
In that case, we pass the firstName as `undefined` which will then default to the default value provided which is `john`:

```javascript
sayHi(undefined , 'wayne');

// result 
HI john wayne
```

## Anonymous Function, Function Expressions and Hoisting

Anonymous functions are normal function declarations but with no name.

```javascript
function(){
	console.log('I AM ANONYMOUS');
}
```

**No name? How do I invoke it then?**

You cannot invoke an anonymous function explicitly, you either have to use function expressions(which you will learn below) or use IIFE (a seperate post in this series).

**Why do we need it ?**

Well, in javascript there is a concept called **hoisting**.

>_**Hoisting** simply means physically moving all the variable and function declarations to the top of your code, so that the declarations are accessible everywhere._

A normal function declaration is hoisted ie.. the function can be invoked even before the function has been declared as below:

```javascript
console.log(sayHi('bruce'); // will print hi bruce

function sayHi(name){
	return `hi ${name}`;
}
```

The above snippet will successfully run without any errors or warnings because javascript will hoist the function `sayHi` above all invokes so that it is accessible everywhere.

If for some reason you do not want this, you can use an anonymous function by assigning it to a variable, which are basically called **function expressions**.

```javascript
console.log(sayHi('bruce')); // will throw error.

const sayHi = function (name){
	return `hi ${name}`;
}
```

The above snippet will throw an error "Uncaught ReferenceError: sayHi is not defined". Cause it is not hoisted.

**NOTE:** _Function expressions are not hoisted._

A question you might ask:
> **But why? 
Since a variable is by default hoisted in javascript and function expressions are functions assigned to a variable, isn't that variable hoisted?**
Well, yes that variable in which the function is stored is in fact hoisted but the assignment to a function is not hoisted since functions are not values.


## Wrapping up

Well, that's pretty much everything about function declarations, Anonymous functions, and Hoisting. Do check out other posts of this series.

If you find any improvements or topics that I might have missed, do let me know!
Thank You!