Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript best practices, why to use comma to chain function/variable declarations?

Tags:

javascript

I've been developing a plugin for jQuery "jQueryLog" to allow for debugging of chain selectors and return values. If you want to check it out, you can do it here

This is already a second version. The first version was actually an edited jQuery and while doing it I had to read jQuery to understand how the internals worked. The question comes from there:

var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context, rootjQuery );
    },

    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,

    // Map over the $ in case of overwrite
    _$ = window.$,

    // A central reference to the root jQuery(document)
    rootjQuery,

    // A simple way to check for HTML strings or ID strings
    // Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
    quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,
    (...)

Is there any big reason for the using a chain of declarations + "comma" instead of just using:

function jQuery ( selector, context ) { ... }

var _jQuery = window.jQuery;
var _$ = window.$;
etc...

The only reason I see here is for the minifier to have less literals that can't be cut down. But are there any other reasons?

like image 655
fmsf Avatar asked Dec 26 '11 18:12

fmsf


People also ask

What is advantage of comma operator in JavaScript?

The comma operator ( , ) evaluates each of its operands (from left to right) and returns the value of the last operand. This lets you create a compound expression in which multiple expressions are evaluated, with the compound expression's final value being the value of the rightmost of its member expressions.

Are commas necessary in JavaScript?

A comma is not an option It is truly important where you put your comma. Defining an array and enumerate elements, you must separate them with a comma. What you actually can do is omitting values. If you want to have every second entry of an array, but keep the indexes of the array.

What are the benefits of keeping declarations at the top in JavaScript?

Declare variables at the top of the function as a means of documenting all variables used in one place. It also avoids confusion resulting from someone imagining that a variable is block-scoped when it is in fact not, as in the following: var i=0; if (true) { var i=1; } // what is i?

How do you use commas in JavaScript?

JavaScript uses a comma ( , ) to represent the comma operator. A comma operator takes two expressions, evaluates them from left to right, and returns the value of the right expression. In this example, the 10, 10+20 returns the value of the right expression, which is 10+20. Therefore, the result value is 30.


1 Answers

It's just a shorter way to keep all the variables in the function scope while making sure they aren't used before they're defined.

In JavaScript Patterns (Sept. 2010, O'Reilly), Stoyan Stefanov calls it the single var pattern:

JavaScript enables you to have multiple var statements anywhere in a function, and they all act as if the variables were declared at the top of the function. This behavior is known as hoisting. ... You use one var statement and declare multiple variables delimited by commas. It's a good practice to also initialize the variable with an initial value at the time you declare it. This can prevent logical errors (all uninitialized and declared variables are initialized with the value undefined) and also improve code readability.

like image 137
parisminton Avatar answered Oct 10 '22 15:10

parisminton