Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Is there any difference or vantage to store a message in a variable before to display it?

Is this any better

function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML 

than this?

function print(message) {
document.getElementById('output').innerHTML;

Thanks in advance for your answers.

2 Answers

Hi Giuseppe,

There's no functional difference between those two code blocks. But, if you were referencing the div with the id of "output" more than once, it would save time typing and provide a cached reference point for that element by using the outputDiv variable. Does that make sense?

Hi Marcus, thanks! Yes it does.

However, as long it is meant to be a simple print function and outputDiv can be recalled only in the scope of the function, is there any example of when this variable can be used a second time, in this case?

Man, I really can't believe you erased that post lol I had wrote the entire answer out, and then when I tried to post it, I got a "Bummer!" page lol :D I'll rewrite it though lol

The only time that variable can be used is within the function since it was created with the var keyword and is localized to that function such that once the function ends, the variable is destroyed.

If, however, you leave the var keyword off when you initialize the variable, you will hoist the variable into the global scope which means it will be accessible to everything. You must be careful when using hoisting as you can cause a lot of conflict; the best idea is to keep everything localized.

Here's a couple examples of how hoisting works. This one is one that causes an error using a local variable:

//this will cause an error
function myFunc() {
//local variable y that is destroyed when function ends
//notice var keyword
var y = 'Hi!';
}
myFunc();
//you will get a reference error here because y was destroyed when function ended
alert(y);

And a second code block that shows hoisting:

//this will run with no errors
function myFunc() {
//y is now a global variable that can be accessed outside of function
//no var keyword
y = 'Hi!';
}
myFunc();
//will alert Hi!
alert(y);

Ops!!! Thanks for not giving up and for the explanation about the scope. :)

So , I can assume that, in the particular case I mentioned above, the only purpose of creating a variable is to write the code in a more elegant way without affecting the performance.

Is that correct?

By the way, this code was mentioned and explained during the javascript course about "Loops, Arrays and Objects" and reading around, I had occasion to find that same function in both ways.

Now is more clear to me!

Thanks!

That is precisely right! :) I'm glad everything makes more sense to you now. Do you have any more questions right now?

Btw, did you mean to put me as best answer? It looks like you did and then it's gone haha!

Hey Marcus, Yes, all clear!

No more questions for now!

Yes, I put "best answer" but then I though, "how can it be the best one if it is the only one?" ahah

Nonetheless, your answer certainly deserve it!

See you around!

It's fine man! Definitely see you around and happy coding! :)