JSLint error: Combine this with the previous 'var' statement

JavaScript
1

What does this error mean?

Problem at line 15 character 9: Combine this with the previous ‘var’ statement.

var $columnTwo = $(‘#content-right’).innerHeight();

Problem at line 16 character 9: Combine this with the previous ‘var’ statement.

var $columnThree = $(‘#right-column’).innerHeight();

Problem at line 19 character 9: Combine this with the previous ‘var’ statement.

var maxNumber = Math.max($columnOne, $columnTwo, $columnThree);

/*global $
global document
global Modernizr
global jQuery
global $
*/

// Declare variables at the beginning of the script
var $menuAction, $columnOne, $columnTwo, $columnThree;

$(document).ready(function () {

    // Equal height columns for the front page
    var $columnOne = $('#content-left').innerHeight();
    var $columnTwo = $('#content-right').innerHeight();
    var $columnThree = $('#right-column').innerHeight();

    // Works out what of the three is the biggest height using JavaScript math object
    var maxNumber = Math.max($columnOne, $columnTwo, $columnThree);

    $('#content-left').css("height", maxNumber + "px");
    $('#content-right').css("height", maxNumber + "px");
    $('#right-column').css("height", maxNumber + "px");


    // Animation for the secondary menu
    $('#secondary-menu ul li a').bind('focus mouseover', function () {

        $menuAction = $(this);
        // Creates 100px right margin on mouse over
        $menuAction.parent().animate({
            "marginRight": "100px"
        }, 250);

    });

    $('#secondary-menu ul li a').bind('blur mouseout', function () {

        $menuAction = $(this);

        $menuAction.parent().animate({
            "marginRight": "0"
        }, 250);

    });

}); // End document ready
2 

var $columnOne = $('#content-left').innerHeight(),
	$columnTwo = $('#content-right').innerHeight(),
	$columnThree = $('#right-column').innerHeight(),
	maxNumber = Math.max($columnOne, $columnTwo, $columnThree);
3

That’s messy any will not always work. The following will always work regardless of what variables you have and where they are used. PLUS IT SERVES THE PURPOSE THE RULE IS THERE FOR BY PUTTING ALL THE LOCAL VARIABLES TOGETHER.

var $columnOne, $columnTwo, $columnThree;
$columnOne = $('#content-left').innerHeight();
$columnTwo = $('#content-right').innerHeight();
$columnThree = $('#right-column').innerHeight();
4

In case they’re not aware, all variable declarations are automatically hoisted to the top of their scope. So if a function declares a variable near the end of that function, then that variable is still accessible at the start of the function as an undeclared variable.

That’s one of the reasons to declare all variables at the start.

Another perhaps more useful reason though is that you may find that you end up with a large number of variables, or that a few distinct groups of variables become noticeable. That is a good indicator that the function should be split up in to smaller functions, to handle the tasks relating to those groups of variables.

5

I understand why you use $ symbol when you use jQuery… but why do you use it to create Javascript variables? that’s PHP. Or maybe I’m mixing something right now :slight_smile: I may have too many programming languages in my head at the moment :lol:

6

As far as JavaScript is concerned $ is just another letter of the alphabet and so starting variable names with a $ is just as valid as starting them with any other letter of the alphabet such as W or g or _ or Q.

Counting upper and lowercase letters separately JavaScript considers there to be 54 characters that are letters of the alphabet.