18 Function hoisting example- JavaScript for Beginners.

Last updated on July 13th, 2020 at 02:28 pm.

18 Function hoisting example - JavaScript Tutorial 2018

This video is taken from the full course that will teach you HTML, CSS, Programming concepts and Javascript .

Video Transcript:

Hi, and welcome back.

So the first thing I want to do is comment this out and uncomment this.

We’ll take a look at functions later on.

But for now, you just need to know I have declared a function called, I have declared a function called ‘add’.

And, the only thing that this function does is, it adds these two numbers.

Ok.

So let’s say maybe that’s ‘10’ and that’s ‘15’.

So unlike with variables, if you call a variable that is declared below, it will tell you that, that variable is undefined.

But let’s see what happens if you call this function before its declaration.

So this is the declaration.

Let’s call the function here.

So this is how to call a function, a named function in JavaScript.

So I will run this and it will give us the results of ’10 + 15’.

So if I run this, it gives us ‘25’.

So that is the first part of this.

Now, I want to do an experiment.

Let’s say, in a function you can also have variables in here, that will be added in here.

So we’ll take a look at functions later on.

But I just want to see what’s going to happen.

Let’s say I call this ‘num1’ and this ‘num2’.

And then I come here and I say, use ‘num1‘ and use ‘num2’.

And then, let me just copy these two, because I don’t want to type.

Then I’ll paste them in there, I will change that with a ‘+’.

So basically what this function does is, it adds two numbers.

And the two numbers it adds is ‘num1’ and ‘num2’.

So, and it alerts the results of ‘num1 + num2’.

And we have declared ‘num1’ and ‘num2’ outside of, outside of this function.

So let’s see what happens if we try to run this.

Because, this is a declaration of these variables way before they’re being used.

So they’re being used up here.

Let’s see, because we know that this should become undefined and this should also become undefined.

So let’s see if this is going to give us undefined as well.

So if I run this, it gives us ‘not a number’.

So what ‘not a number’ means is basically, it tried to add value of undefined and a value of undefined.

So in the other video, we saw that once you run this for the first time, these variables got stored in the memory.

So let’s see if we, if we run it again, that’ll be true of this.

And it still gives us ‘not a number’.

So let’s say that I take these two, and I put them in here and I try to run it, it still gives us ‘not a number’.

What if we take this and we declare them before we use them.

So function add(num1,num2) and then if we run, it gives us ‘15’.

So you see, the thing is it’s always good to declare the variables before you use them.

So declare the variables before you use them.

So the only, the only thing about hoisting is that it will help prevent any crashes in your system.

If you’re using JavaScript for building something, the only useful value of hoisting is that it will prevent your application from crashing altogether.

But there is no other benefit to it.

So always make sure you declare the variables first and then you use the variable in all instances.

If it is going to be a global variable that you’re going to use somewhere else, just put them at the top.

And, you can also declare your variables in one line, just like that.

So always declare your variables at the very top before you use them.

If it is a block based kind of variable, you want to use it within a function, declare it within that function and use it then.

So I hope you’ve understood that variable hosting is there, but it’s always best to declare your variables before you call them.

So I will see you in the next video.

This section is from Learn Javascript from Scratch.

Learn Javascript from Scratch

Comment Here

Need WordPress help? Linux Server help? Talk to us.

  • We are your own WordPress customer service.
  • We set up Linux servers and install or migrate WordPress. Learn more here.
  • We support WooCommerce too.
  • Check out our WordPress customer support plans here or contact us below .

If you have any questions regarding WordPress support, Linux server support or any of our services, feel free to reach out or read more on our services page.

Join this free course:

How to host multiple WordPress
websites on a VPS

Close me!