Home / Questions / 54033
Accepted
UselesssCat
Asked: 2020-03-09 14:07:06 +0800 CST 2020-03-09 14:07:06 +0800 CST

What does the comma `,` do inside an IF condition in javascript?

  • 772

Reviewing dependencies of a project I have found a very confusing code, but the part that caught my attention is the following:

if ($("#weather-widget")[0] && $.simpleWeather({
        location: "Austin, TX",
        woeid: "",
        unit: "f",
        success: function(weather) {
            html = '<div class="weather-status">' + weather.temp + "&deg;" + weather.units.temp + "</div>", 
            html += '<ul class="weather-info"><li>' + weather.city + ", " + weather.region + "</li>", 
            html += '<li class="currently">' + weather.currently + "</li></ul>", 
            html += '<div class="weather-icon wi-' + weather.code + '"></div>', 
            html += '<div class="dw-footer"><div class="weather-list tomorrow">', 
            html += '<span class="weather-list-icon wi-' + weather.forecast[2].code + '"></span><span>' + weather.forecast[1].high + "/" + weather.forecast[1].low + "</span><span>" + weather.forecast[1].text + "</span>", 
            html += "</div>", html += '<div class="weather-list after-tomorrow">', 
            html += '<span class="weather-list-icon wi-' + weather.forecast[2].code + '"></span><span>' + weather.forecast[2].high + "/" + weather.forecast[2].low + "</span><span>" + weather.forecast[2].text + "</span>", 
            html += "</div></div>", $("#weather-widget").html(html)
        },
        error: function(error) {
            $("#weather-widget").html("<p>" + error + "</p>")
        }
    }), $(".auto-size")[0] && autosize($(".auto-size")), $(".fg-line")[0] && ($("body").on("focus", ".fg-line .form-control", function() {
        $(this).closest(".fg-line").addClass("fg-toggled")
    }), $("body").on("blur", ".form-control", function() {
        var p = $(this).closest(".form-group, .input-group"),
            i = p.find(".form-control").val();
        p.hasClass("fg-float") ? 0 == i.length && $(this).closest(".fg-line").removeClass("fg-toggled") : $(this).closest(".fg-line").removeClass("fg-toggled")
    })), $(".fg-float")[0] && $(".fg-float .form-control").each(function() {
        var i = $(this).val();
        0 == !i.length && $(this).closest(".fg-line").addClass("fg-toggled")
    }), $("audio, video")[0] && $("video,audio").mediaelementplayer(), $(".chosen")[0] && $(".chosen").chosen({
        width: "100%",
        allow_single_deselect: !0
    }), $("#input-slider")[0]) {
    var slider = document.getElementById("input-slider");
    noUiSlider.create(slider, {
        start: [20],
        connect: "lower",
        range: {
            min: 0,
            max: 100
        }
    })
}

In addition to being very messy, the code has commas in the if condition. I've never seen that you can use commas and I don't really know what it does.

Also in the part that function(weather) {separates a concatenation by commas:

html = '<div class="weather-status">' + weather.temp + "&deg;" + weather.units.temp + "</div>", 
html += '<ul class="weather-info"><li>' + weather.city + ", " + weather.region + "</li>",

I would like to know what produces the comma in the If and if it is part of the javascript standard

javascript

2 Answers

  1. Best Answer

    According to the specification ( Comma Operator ), parameters thus separated are evaluated from left to right and the resolution of the last operand is returned.

    The only use of using that syntax is to assign "on the fly", which happens as a side effect. For example, if you wanted to assign a value to a variable, and depending on a parameter raise an alert or return its value:

    var a;
if(a=1, alertar === false) {
  return a;
} else {
  alert('El valor de a es ' + a);
}

    The variable will take the value 1 regardless of whether the if is true or false.

    If inside the operands there are function invocations, class instantiation, sticky octopuses, or He-Man swords, all of that is evaluated regardless, for the IF, of anything other than the evaluation of the last operand. Using the example above:

    var a,b;
if(a=1, notificar_valor(a), b = new MiClase(a), alertar === false) {
  return a;
} else {
  alert('El valor de a es ' + a);
}

    The value of a would be assigned, a function would be called, notificar_valorand a class would be instantiated MiClasejust as a side effect, but what would still be evaluated would be whether alertaror not it is identical to false.

    • 5

  2. Each assignment is an expression and the expressions can be concatenated into a larger expression but it will take the last expression as a statement:

    if (true, false){
  
  console.log('#1 muestra');
 
} else {

   console.log('#1 no me muestra');
}

if (false, true){
  
  console.log('#2 muestra');
 
} else {

   console.log('#2 no me muestra');
}

    • 3