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, Sep 17 '14 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, Sep 17 '14 at 12:21

score 3 · Accepted Answer · answered Nov 12 '13 at 12:34

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 '13 at 12:34

pax162

4,735
2
22
28

For curiousity, why the missing coma make make `startInfo` global? – Rémi Benoit Nov 12 '13 at 12:35
Because of automatic semicolon insertion, see this: http://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi – pax162 Nov 12 '13 at 12:36
ah, similar mistake - I forgot to change a semi-colon into a comma when I added a new variable! will accept when I can – Pete Nov 12 '13 at 12:37
So a variable declared like this `function() {var local; global = 2;}` will be global? Can't see why. – Rémi Benoit Nov 12 '13 at 12:41
Learned something one the way! The deeper I go in JS, the more wierd things I found. – Rémi Benoit Nov 12 '13 at 12:43

score 0 · Answer 2 · edited May 23 '17 at 12:06

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 '17 at 12:06

Community

1
1

answered Sep 17 '14 at 11:40

NAZIK

1
1

Declaring javascript variables

2 Answers2