Function declaration and Anonymous function

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:

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

Parameters and Arguments:

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

function sayHi( name ){
    console.log(`HI ${name}!`);
}

Later we can invoke the function with an argument which the parameter will hold after getting invoked:

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:

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:

// 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:

sayHi(undefined , 'wayne');

// result 
HI john wayne

Anonymous Function, Function Expressions and Hoisting

Anonymous functions are normal function declarations but with no name.

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:

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.

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!