Declaring javascript variables

Question

What's the difference between the two following ways of declaring javascript variables?

Version 1

var shadowBox = $(this);
var startInfo = shadowBox.children('.start-info');
var originalHeight = startInfo.height();

Version 2

var shadowBox = $(this),
    startInfo = shadowBox.children('.start-info'),
    originalHeight = startInfo.height();

I only ask this because I used the second version within a jquery plugin :

(function ($) {
    $.fn.setUpShadowBox = function (options) {
        options = $.extend({
            boxSpeed: 750,
            boxWidth: 998,
            boxPosition: -40,
            heightSpeed: 500,
            scrollSpeed: 750
        }, options);

        return $(this).each(function () {
            var shadowBox = $(this),
                startInfo = shadowBox.children('.start-info'),
                originalHeight = startInfo.height();

            //rest of plugin code
        });
    };
});

but when I used it on a class selector so it had to loop through more than once, it was treating the variables as if they were global and only using the last originalHeight that was set. Once I changed this to the first version of declaring variables, my plugin worked as expected and the variables stayed within their scope.

Why is this?

You're missing a comma at the end of: var shadowBox = $(this) — NAZIK
– NAZIK, Commented Sep 17, 2014 at 12:12
Actually, this was answered last year and if you look at the comments below the accepted answer, I had not changed a semi colon to a comma. Not sure where you got your answer from as the code I have shown in the question has the comma - unless you just copied the accepted answer — Pete
– Pete, Commented Sep 17, 2014 at 12:21

pax162 · Accepted Answer · 2013-11-12 12:34:07Z

3

Did you miss the comma on the first line?

If you do this:

var shadowBox = $(this)
    startInfo = innerContainer.children('.start-info');

Instead of this:

var shadowBox = $(this),
    startInfo = innerContainer.children('.start-info');

startInfo will become a global variable.

Try placing them all on the same line and see what happens.

answered Nov 12, 2013 at 12:34

pax162

4,7452 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rémi Benoit Over a year ago

For curiousity, why the missing coma make make startInfo global?

pax162 Over a year ago

Because of automatic semicolon insertion, see this: stackoverflow.com/questions/2846283/…

Pete Over a year ago

ah, similar mistake - I forgot to change a semi-colon into a comma when I added a new variable! will accept when I can

Rémi Benoit Over a year ago

So a variable declared like this function() {var local; global = 2;} will be global? Can't see why.

Rémi Benoit Over a year ago

Learned something one the way! The deeper I go in JS, the more wierd things I found.

Community · Accepted Answer · 2017-05-23 12:06:37Z

0

Please take a look at Declaring javascript variables, this will be really useful. Your issue is var shadowBox = $(this), you are missing a comma there.

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Sep 17, 2014 at 11:40

NAZIK

11 bronze badge

Collectives™ on Stack Overflow

Declaring javascript variables

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related