Different ways of defining functions in JavaScript

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In JavaScript, there are several different ways of defining functions.

Defining a function using function declaration

Example 1 : Declaring a function first and then calling it.

function addNumbers(firstNumber, secondNumber)
{
var result = firstNumber + secondNumber;
return result;
}

var sum = addNumbers(10, 20);

Output : 30

Example 2 : A function call is present before the respective function declaration

In Example 1, we are first defining the function and then calling it. The call to a JavaScript function can be present anywhere, even before the function is declared. The following code also works just fine. In the example below, we are calling the function before it is declared.

var sum = addNumbers(10, 20);

function addNumbers(firstNumber, secondNumber)
{
var result = firstNumber + secondNumber;
return result;
}

Function Hoisting : By default, JavaScript moves all the function declarations to the top of the current scope. This is called function hoisting. This is the reason JavaScript functions can be called before they are declared.

Defining a JavaScript function using a function expression : A Function Expression allows us to define a function using an expression (typically by assigning it to a variable). There are 3 different ways of defining a function using a function expression.

Anonymous function expression example : In this example, we are creating a function without a name and assigning it to variable add. We use the name of the variable to invoke the function.

var add = function (firstNumber, secondNumber)
{
var result = firstNumber + secondNumber;
return result;
}

var sum = add(10, 20);

Functions defined using a function expression are not hoisted. So, this means a function defined using a function expression can only be called after it has been defined while a function defined using standard function declaration can be called both before and after it is defined.

// add() is undefined at this stage
var sum = add(10, 20);

var add = function (firstNumber, secondNumber)
{
var result = firstNumber + secondNumber;
return result;
}

Named function expression example : This is similar to the example above. The difference is instead of assigning the variable to an anonymous function, we’re assigning it to a named function (with the name computeFactorial).

var factorial = function computeFactorial(number)
{
if (number [= 1)
{
return 1;
}

return number * computeFactorial(number - 1);
}

var result = factorial(5);

The name of the function (i.e computeFactorial) is available only with in the same function. This syntax is useful for creating recursive functions. If you use computeFactorial() method outside of the function it raises 'computeFactorial' is undefined error.

var factorial = function computeFactorial(number)
{
if (number [= 1)
{
return 1;
}

return number * computeFactorial(number - 1);
}

var result = computeFactorial(5);

Output : Error - 'computeFactorial' is undefined.

Self invoking function expression example :

var result = (function computeFactorial(number)
{
if (number [= 1)
{
return 1;
}

return number * computeFactorial(number - 1);
})(5);

Output : 120

These are called with different names
Immediately-Invoked Function Expression (IIFE)
Self-executing anonymous functions
Self-invoked anonymous functions

[StyleTrick]

Thank you Kudvenkat! These videos are extremely helpful!

[ufotofu]

Awesome thank you. The various ways to write a function confused the hell out of me for a long time.
I know this video is from 2014, but those viewing it today should know that document.write() has security issues and should not be used. Instead, to print the output to the page, use the DOM.


Specifically, "myVar.innerHTML = `Sum of numbers is: ${sum}`;
" does the same without the security issues of document.write().

[horsegirl]

You did an excellent job of explaining these concepts. I even understood them and I'm a beginner in javascript. I like what your doing!

[thomasbutman]

Thanks for another great video, Kudvenkat! One question on your immediately-invoked function expression--I noticed you used the syntax (function(number){...}(5)). On your next slide you used (function(number){...})(5). In one case the function expression is wrapped in parentheses, and then the argument passed to the function follows. In the other case, the entire function expression along with the argument are wrapped in outer parentheses. Do both cases represent valid syntax? Thanks!

[crzle]

Thanks Kudvenkat ..this video is very helpful to understand the different ways of defining function JS

[SahilKumar-empm]

Thanks Kudvenkat! Videos are very nice. It gave me the confidence to clear any interview. I am learning a lot from your videos but I am not able to use that for practical situations. Like why we need hoisting? I am understanding concept but not getting why and where we use these things in real world

[sbylk]

THANK YOU SO MUCH for explaining the third self-invoking function method!!

[trumankwong]

thanks. was able to answer an interview question from watching this.

[seanraz]

great vid --- really helped clarify the different types of functions

[SudeepMakwana]

THanks for video bro .. its helps a lot .. :-) cheers !!!

[gabhishek]

thanks a lot for you knowledge sharing session.

[yhteensatuma]

why it shows error when i remove if(number <= 1) {return 1}.

[cookiecutter]

Could you please tell me how many different types of functions declarations there are in Javascript?

[AdityaKumar-hbfi]

how you are able to debug the code of java script? Which visual studio version you are using sir?

[manojmishra]

Thanks sir,
when u r uploading the angular JS tutorials.

[dgloria]

I don't understand this computeFactorial loop. when number reaches 0, it should multiply everything with 0, and all result should be 0. I am totally in darkness with these nested functions. Is it not better regarding readability to put it all in a for loop?
function computeFactorial( number){
var result=number;

for (var counter= number-1; counter>0;counter--)
{
result=result*counter;
}

return result;
}
this works fine for me and I can tell 2 years from now what does it do.

[sujeetpasi]

Thank your so much sir for explaining in JavaScript braces does not have any scope

[mrswolls]

I'm getting 100. Why is it printing 120?