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. el 8 mar. 2017 a las 22:10
  • Lo de las comas no sé qué decirte. También me surgió la duda haha 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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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