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 jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 4

Posted by Mitchell Millsaps
Mitchell Millsaps
7,377 Points

Shouldn't we be declaring these variables outside the function, rather than inside?

So in the video he has the lines

var imageLoc = $(this).attr("href");

&

var captionText = $(this).children("img").attr("alt");

I thought this was strange because I remember in the previous javascript courses on the web dev track talking about declaring the variable outside the function so that you would not continuously make new variables each time the function runs.

EDIT: Edited the word defining in the previous paragraph to declaring to help confusion as to what I meant, although the title clearly says declaring.

So to test it out I did indeed define the variables outside of the function and it seems to work the same.

Am I missing something or was this sort of overlooked in the video?

My code is here:

var imageLoc;
var captionText;

$("#imageGallery a").click(function(event){
  event.preventDefault();
  imageLoc = $(this).attr("href");
  jimage.attr("src", imageLoc);
  joverlay.show();
  captionText = $(this).children("img").attr("alt");
  jcaption.text(captionText)
});
john larson
john larson
16,594 Points

It almost sounds like your talking about loops not functions. Cause I'm pretty sure I've wrestled with the same idea that your talking about. If variables are declared inside a LOOP, they must be continually recreated each time the loop runs. Also a function without a lot of other code outside it may not appear to have any problems for now, but at some point if the code grows and those variables are used elsewhere things can get mucky.

2 Answers

Abraham Juliot
Abraham Juliot
47,353 Points
Abraham Juliot
Abraham Juliot
47,353 Points

Hi Mitchel, thanks for updating your post and removing the confusion. Please post "the video" you are referencing which talks about "declaring the variable outside the function" so as not to "continuously make new variables each time the function runs." This will help everyone in understanding the context.

"It's generally a bad idea to access global variables in your functions... It's harder to reuse a useful function in another script if the function is dependent upon global variables." (2:51-3:06) See the following video in javascript basics where this is talked about. https://teamtreehouse.com/library/javascript-basics/creating-reusable-code-with-functions/variable-scope

I hope this brings clarity

Jeremy Castanza
Jeremy Castanza
12,081 Points
Jeremy Castanza
Jeremy Castanza
12,081 Points

Essentially, what you're talking about is called: variable scope.

It really comes down to where do you need the variable and how will that variable change over time. If multiple functions need access to a variable and it's okay if they change their value, you can have a global variable declared outside of a given function.

Typically, you'd only want variables declared outside of your function to be constants. For example, the number pi (3.14) is a constant. If I had a global variable pi that I wanted to reference in a series of math functions, I'd probably want this declared outside of a given function, so that all of the functions could access the variable, while keeping my program "DRY" (i.e. Don't Repeat Yourself) - instead of having a bunch of variables for pi in each function.

Conversely, if you'd rather be conservative and only want a single function to have access a variable, then you'd want to declare that variable inside the function.