7

Revisando dependencias de un proyecto me he encontrado con un codigo bastante confuso, pero la parte que me llamó la atención es la siguiente:

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
        }
    })
}

Ademas de que está muy desordenado, el código tiene comas en la condición del if. Nunca había visto que se pudiese usar comas y no se realmente que hace.

Tambien en la parte de function(weather) { separa una concatenacion por comas:

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

Me gustaría saber que produce la coma en el If y si es parte del estándar de javascript

2
  • Las comas no están en el if. Están en $.simpleWeather. En if solo puedes pasarle valores true/false. Eso significa que la función $.simpleWeather, a pesar de que tenga todo ese código, al final te regresará un true o un false. Commented el 8 mar. 2017 a las 22:10
  • Lo de las comas no sé qué decirte. También me surgió la duda haha Commented el 8 mar. 2017 a las 22:13

2 respuestas 2

5

Según la especificación (Comma Operator), los parámetros asi separados se evalúan de izquierda a derecha y se retorna la resolución del último operando.

La única utilidad de usar esa sintaxis es asignar "al vuelo", lo que ocurre como un efecto secundario. Por ejemplo, si quisieras asignar valor a una variable, y dependiendo de un parámetro levantar una alerta o retornar su valor:

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

La variable tomará el valor 1 sin importar si el if es verdadero o falso.

Si dentro de los operandos hay invocaciones de funciones, instanciamiento de clases, pulpos pegajosos o espadas de He-Man, todo eso se evalúa sin tomar en cuenta, para el IF, nada que no sea la evaluación del último operando. Usando el ejemplo anterior:

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);
}

Se asignaría el valor de a, se invocaría una función notificar_valor y se instanciaría una clase MiClase nada más que como un efecto secundario, pero lo que se evaluaría seguiría siendo si acaso alertar es o no idéntico a false.

3

Cada asignación es una expresión y las expresiones pueden ser concatenadas en una expresión más amplia pero tomará la ultima expresión como una declaración:

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');
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.