Hoisting on JavaScript

JavaScript
1

Hi all,

let’s say we have a constructor function like below:

let address1 = new Address('Beach Resort str', 'Phuket', 254520);
let address2 = new Address('Beach Resort str', 'Phuket', 254520);

function areSame(address1, address2) {
  return address1 === address2;
}

So when want to log the result of this function in the console, do I do that after I set the variables address1 and address2 or after the function declaration?

2

after the function declaration

3

You can do it directly after the variables are declared and initialized, or after the function declaration. I will try to give you a brief simplified explanation.

The javascript engine runs your code in two phases. The creation and the execution phase.

In the creation phase it will search for all declarations, and set those in memory. For variable declarations it will store the variable, but set the initial value to undefined. For function declarations it will store the function and all its code into memory. This is why a function declaration can be called before it is declared in the code.

In the execution phase it will start to run your code line by line. When it comes across a line that sets a value to variable, it will replace the default undefined value with the value that is on the right side of the assignment operator =.

I am not sure where you are in learning JavaScript, but you can create functions in various ways, typically as function declarations, function expressions, anonymous function, and arrow functions (which are a variant of anonymous).

Side note: Function declarations are hoisted while all others are not.

The examples below are both valid.

let address1 = new Address('Beach Resort str', 'Phuket', 254520);
let address2 = new Address('Beach Resort str', 'Phuket', 254520);
let isSame = areSame(address1, address2);

function areSame(address1, address2) {
  return address1 === address2;
}

let address1 = new Address('Beach Resort str', 'Phuket', 254520);
let address2 = new Address('Beach Resort str', 'Phuket', 254520);

function areSame(address1, address2) {
  return address1 === address2;
}

let isSame = areSame(address1, address2);
2 Likes
4

I’m going throught JS Basics 1 but I also have a studying through codecademy and there it says to avoid hoisting. So as Mosh uses a lot of hoisting I wanted some clarification.

I noticed you assigned a new variable to get the output of areSame variable, so now you need to console.log(isSame) right?

Instead of creating a third variable, could you console.log(areSame(address1, address2) directly?
What is the best practice?

5

It depends on what you are trying to do. I personally find setting the return value of function to a variable so it can be used again later in the code. Similar to the way you use a calculator’s memory to store the values that are important to you. I do not have to keep calling the function and passing in the same arguments if I need to use the value again.

If you were simply trying to log the info then there was really no reason to return anything from the areSame() function, instead it could be logged from within the function like

function areSame(address1, address2) {
    console.log(address1 === address2);
}

I am not really sure why your other course tells you to avoid hoisting functions. I think some people perhaps think it is more logical to not be able to use function before it is declared. JavaScript is a very flexible language and provides methods for different approaches. I personally think that is the beauty in the language, other’s might think it makes it a nightmare.

I personally have not used codecademy, so I cant speak on what they are teaching without going through it. I will add some resources that I personally have found very useful.

1 Like
6

I would also like to mention that when learning JavaScript it can feel a little like entering the wild west. You can do a lot of things in various ways. I would not focus on shutting down any of the approaches. You will find patterns that work for you and your approach as you go along through trial and error.

Try to just learn as much as you can about the language and think about which patterns or methods work best for the situation at hand, instead of relying on one approach. If the only tool you have is a hammer then you are going to look at everything like a nail.

1 Like