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 JavaScript Loops, Arrays and Objects Simplify Repetitive Tasks with Loops The Refactor Challenge Solution

Posted by Luca Di Pinto
Luca Di Pinto
8,051 Points

Cannot understand the syntax!

Hi guys,

please, can someone explain me the syntax of this function?

First, I do not understand why do we have to declare the var outside the function. Was it not possible to declare them inside of it?

Second I cannot understand why we initialize the var html with a blank space.

And lastly it's not clear to me the syntax of html += '<div style="background-color:' + rgbColor + ' "></div>';

In particular it's not clear when and where to put single and double quote and why?

Thanks to all!

4 Answers

Luca Di Pinto
Luca Di Pinto
8,051 Points
Luca Di Pinto
Luca Di Pinto
8,051 Points

Sorry but I lost a piece of code for my last question. I was asking why do I have to put quotes around div, when i concatenate the html. Is there a meaning for it? If I do not put them what happens?

Instead for the other questions...

for the purpose of this exercise I can declare var inside of the functions, isn't it?

And the meaning of declaring the var html with a blank space is exclusively to say that it is a string?

Thanks again!

Nattapol Kamolbal
Nattapol Kamolbal
15,528 Points
Nattapol Kamolbal
Nattapol Kamolbal
15,528 Points

The quote around div mean it is a string. You can only concatenate strings so in this case you need to add the quotes. For clarity:

var html = "<div>this variable is a string.</div>";
var html = <div>this isn't a string and if you type this the program will be error</div>;

I can't see the function declaration in this exercise so I think what you mean function is the for loop. If this is the case, for this exercise you shouldn't declare the html variable in the for loop because when the loop begin the second time you declare new variable with the same name again and javascript will update the variable (so you get blank variable again. For clarity:

for (....) {
    var html = '';
    html += 'something here';
}

on the first loop:

  • create new varible call html
  • concatenate 'something here' to html variable
  • the result is html = 'something here'

on the second loop:

  • create new variable call html >>> but there's already html variable so javascript will update html to ''
  • concatenate 'something here' to html variable
  • the result is html = 'something here' >>> which mean you lost the information which store on the first loop.

And yes we declare html with '' to say that it's a string so we can concatenate it in the end.

Luca Di Pinto
Luca Di Pinto
8,051 Points
Luca Di Pinto
Luca Di Pinto
8,051 Points

Thanks jcorum, but can you tell me why do we have to declare var outside the function? Cannot we declare them inside of it?

When we declar the var html

var html = ' ' ;

we want to have a blank space between the divs? Is for this reason we declare the var in this way?

And it's still not clear why we have to use quotes here

html += '<div style="background-color:' + rgbColor + '"></div>';

Is not possible not to put quotes like this?

html += <div style="background-color: + rgbColor + "></div>;

Cannot understand the meaning of put them!

Thanks

Nattapol Kamolbal
Nattapol Kamolbal
15,528 Points
Nattapol Kamolbal
Nattapol Kamolbal
15,528 Points

First. It's depend on the scope you want to use the variable. If you declare variable inside the function, you can only use it in that function only. If you declare it outside, you can use it with many functions. So it's depend on the situation. For more information, read here.

Third. I will answer the third question before the second. The '+=' mean that you concatenate the string after the same variable. For example:

var html = "First";
html += " Second";
console.log(html); will show "First Second".

Second. In the video, Dave run for loop to random the color and add the random result to html code by using 'html +='. You can't use '+=' without declare the string variable first so we declare the variable and assign blank string to it to tell that it is a string.

Fouth. For single and double quote, most of the time you can use it as you want and not to worry about it. Just write the way you think it's easy to read. Somehow, you may need to use single quote if the strings have double quote and vice versa. For example:

var hello = "I want to say 'Hello World'.";
var hello = 'I want to say "Hello World".';
Sandy debasis
PLUS
Sandy debasis
Courses Plus Student 34 Points
Sandy debasis
Sandy debasis
Courses Plus Student 34 Points

declare a var outside the function will be global variable and it will be access for other function or other area in the script. If you declare in function it will be local variable.