What does the comma mean in the construct (x = x || y,z)?

Question

So I've come across to an answer but it is not enough to expand my knowledge base.

I've been searching for ages what the x = x || y, z means in StackOverflow

I found this. What does the construct x = x || y mean?

But the problem is what is the , z for?

I'm seeing these expressions quite often window.something = window.something || {}, jQuery

I already know that if false was returned on the first argument then {} will be assigned to the something property.

My question is, What is the , jQuery for?

Can someone enlighten me and shower me with this very important knowledge?

UPDATE 8/11/2014

So I tried making tests.

var w = 0, x = 1,y = 2,z = 3;
var foo = w || x || y, z; //I see that z is a declared variable
console.log(foo); //outputs 1

and it is the same as this.

var w = 0, x = 1,y = 2;
var z = function(){return console.log("this is z");}
var foo = w || x || y, z; //same as this
console.log(foo); //still outputs 1

another.

var w = 0, x = 1,y = 2;
var z = function(){return console.log("this is z");}
function foobar(){
this.bar = console.log(foo,z);
}(foo = w || x || y, z);
foobar(); //outputs 1 and string code of foobar

changing the value of z in (foo = w || x || y, z).

var w = 0, x = 1,y = 2;
var z = function(){return console.log("this is z");}
function foobar(){
this.bar = console.log(foo,z);
}(foo = w || x || y, z=4);
foobar(); //outputs 1 and 4

I assume that placing variables inside ( ) after the } of the function is the same as declaring a new variable.

Another test.

var w = 0, x = 1,y = 2,z = 1;
function foobar(){
    var bar = 10,z=2;
        console.log(z);
}(foo = w || x || y, z=4);
console.log(foo,z); // Seems that foo is public and made an output
foobar(); // outputs the z = 2 inside and disregards the z = 4 from (..., z=4)
console.log(z); // It seems that z is 4 again after calling foobar

However, in a scenario like this. Link to JSFiddle

//Self-Executing Anonymous Function: Part 2 (Public & Private)
(function( skillet, $, undefined ) {
    //Private Property
    var isHot = true;

    //Public Property
    skillet.ingredient = "Bacon Strips";

    //Public Method
    skillet.fry = function() {
        var oliveOil;

        addItem( "\t\n Butter \n\t" );
        addItem( oliveOil );
        console.log( "Frying " + skillet.ingredient );
    };

    //Private Method
    function addItem( item ) {
        if ( item !== undefined ) {
            console.log( "Adding " + $.trim(item) );
        }
    }    
}( window.skillet = window.skillet || {}, jQuery ));

//Public Properties
console.log( skillet.ingredient ); //Bacon Strips

//Public Methods
skillet.fry(); //Adding Butter & Fraying Bacon Strips

//Adding a Public Property
skillet.quantity = "12";
console.log( skillet.quantity ); //12

//Adding New Functionality to the Skillet
(function( skillet, $, undefined ) {
    //Private Property
    var amountOfGrease = "1 Cup";

    //Public Method
    skillet.toString = function() {
        console.log( skillet.quantity + " " + 
                     skillet.ingredient + " & " + 
                     amountOfGrease + " of Grease" );
        console.log( isHot ? "Hot" : "Cold" );
    };    
}( window.skillet = window.skillet || {}, jQuery ));

try {
    //12 Bacon Strips & 1 Cup of Grease
    skillet.toString(); //Throws Exception
} catch( e ) {
    console.log( e.message ); //isHot is not defined
}

It seems that if you remove the , jQuery it only logs "Bacon Strips" Refer to this link Link to another JSFiddle (, jQuery is removed)

I don't really get this.. But why is the , jQuery inside the ( ) after the } of a function counts as a reference for the code to run completely when the library of jQuery is already included?

Having the $.trim removed from the code, it seems to work fine again. But I still don't get how this referencing works. Link to the JSFiddle without the , jQuery and $.trim

Answer 1

The Comma Operator in JavaScript evaluates operands and returns the value of the last one (right-most). By JS Operator Precedence, the OR operation will be evaluated first, followed by the assignment.

So this expression x = x || y, z is in effect (x = (x || y)), z. The OR operator will either return the boolean result of the comparison or, for non-boolean types, the first operand if it is truthy, or the second operand otherwise. The assignment operator is also higher precedence than the comma operator, so x will be assigned the value returned by the OR. The value of z will not have any effect on either the OR operation or the assignment. In fact, it will be evaluated last, meaning it is essentially a separate statement with no effect on anything else in that 'expression.' I can't see any practical value in writing the expression that way.