3

Me interesa saber si es correcto usar un if dentro de otro, para asegurarme que lo que construya después no me dé problemas o cualquier otro detalle y que no tenga que construir todo desde cero.

var x = "texto";
var a = "texto";

var counter = document.querySelectorAll(".counter > span");

function contar() {

    if (x == a) {

        if (counter.length != 0) {
            alert("Hay etiquetas");
        } else {
            alert("No hay etiquetas");
        }
    }
}

contar();
<div class="counter">
    <span></span>
</div>

2
  • 1
    Sería interesante que nos compartas el enunciado que tratas de resolver, por que de forma corta la respuesta es: <<si>>
    – user128299
    Commented el 14 mar. 2020 a las 21:50
  • Si bien es bastante común encontrar 'if' anidados y puede funcionar a la perfección, la realidad es que seria ideal dividir en funciones y que cada una devuelve el valor esperado. No solo por una buena practica de código, sino para poder encontrar errores en el futuro y para entendimiento a los demás desarrolladores. saludos.
    – AleBuo
    Commented el 4 dic. 2021 a las 12:55

4 respuestas 4

5

Está bien usar un if dentro de otro, pero es recomendable usar la menor cantidad de if posibles. También se puede usar un switch.

Podemos analizar los posibles valores:

  • Si x es a
    • Si counter.length no es 0
      1. x es a y counter.length no es 0
    • Si no (counter.length es 0)
      1. x es a y counter.length es 0
  • Si no (x no es a)
    1. x no es a y counter.length puede ser cualquier cosa.

El tercer caso no se usa. Veamos qué ocurre si juntamos los dos if en uno solo.

  • Si x es a y counter.length no es 0
    1. x es a y counter.length no es 0

En caso contrario probamos todas las combinaciones posibles y eliminamos la anterior. Como son dos condiciones, y cada uno puede ser o no ser equivalente, entonces hay 4 posibles.

  1. x es a y counter.length es 0
  2. x es a y counter.length no es 0
  3. x no es a y counter.length es 0
  4. x no es a y counter.length no es 0

Ya eliminamos la segunda. Nos queda así.

  1. x es a y counter.length es 0
  2. x no es a y counter.length es 0
  3. x no es a y counter.length no es 0

Los puntos 2 y 3 pueden unificarse a x!=a. Podemos dar vuelta las condiciones.

  1. counter.length es 0 y x es a
  2. counter.length es 0 y x no es a
  3. counter.length no es 0 y x no es a

Los puntos 1 y 2 pueden unificarse a counter.length==0.

Entonces las dos siguientes expresiones son equivalentes:

  • x==a && counter.length==0 || x!=a
  • x!=a && counter.length!=0 || counter.length==0

Entonces los condicionales quedan así:

if(x==a && counter.length!=0){
    x==a && counter.length!=0
}else{
    x==a && counter.length==0 || x!=a
    x!=a && counter.length!=0 || counter.length==0
}

Volvemos al if dentro del otro para ver si coincide:

if( x==a && counter.length!=0 ){
    x==a && counter.length!=0
}else{
    x==a && counter.length==0
}

Aquí notamos al comparar que el if coincide, y el else también coincide el primero, pero no contempla que x no es a, porque lo está dejando afuera:

x!=a && counter.length==0
x!=a && counter.length!=0

En conclusión, podemos ver en este caso que no solo es correcto usar uno dentro de otro, si no que además es necesario usarlos.

Otro ejemplo, esta vez no usamos el else:

if(x==a) {
    if(counter.length!=0){
        // x es a y counter.length no es 0
    }
}

En este caso, como no hay else, lo que se hace dentro del if es el único caso posible.

if(x==a && counter.length!=0){
    // x es a y counter.length no es 0
}

Entonces en este caso, pueden juntarse los if sin problemas.

Por otra parte, para saber cuántas etiquetas hay dentro de una etiqueta hay que usar .children.length, esto busca las etiquetas y las cuenta.

Código:

var etiqueta = document.querySelector("div")
var etiquetas = etiqueta.children
var cantidad_etiquetas = etiquetas.length
if(cantidad_etiquetas){
  console.log("Cantidad de etiquetas:", etiqueta.children.length)
  for(var i=0;i<cantidad_etiquetas;++i){
    console.log(etiquetas[i])
  }
}else{
  console.log("No hay etiquetas")
}
<div>
    <p>Hola</p>
    <a>Mundo</a>
</div>

2

Esos son "if" anidados, dependiendo de lo que quieras hacer, puedes poner todos los que quieras:

if(a>5){
  if(b<10){
   if(c==0){
   }
  }
}

su sintaxis sería algo asi, pero no es lo mismo que poner:

 if(a>5){
      if(b<10){
      }
      if(c==0){
       }
    }
0
2

para responder rápidamente tu pregunta, te digo que si (se conoce como if anidado o nested, en inglés). Pero también te podría indicar(para el caso del if de tu pregunta) que utilices una condición adicional en tu if.

function contar() {
    if (x === a && counter.length != 0) {
        alert("Hay etiquetas");
    } else {
        alert("No hay etiquetas");
    }
}

Los operadores lógicos|| y && permiten agregar más condiciones a tu if. Puedes visitar w3schools para más información referente a lo indicado arriba

2

Sí es correcto, pero los operadores ternarios para casos como estos, ayudan mucho a simplificar el código.

var x = "texto";
var a = "texto";
var counter = document.querySelectorAll(".counter > span");

function contar() {
  if (x == a) {
    alert((counter.length != 0) ? "Hay etiquetas" : "No hay etiquetas");
  }
}

contar();
<div class="counter">
  <span></span>
</div>

El if fue cambiado por esto:

    alert((counter.length != 0) ? "Hay etiquetas" : "No hay etiquetas");

La sintaxis es muy simple:

(condición) ? expresión1 : expresión2
  • condición: es la parte que se va a evaluar
  • expresión1: si condición es verdadero
  • expresión2: si condición es falso

Si interesará evaluar también a x en el mismo paquete, los if podrían sustituirse totalmente:

var x = "texto";
var a = "textos";
var counter = document.querySelectorAll(".counter > span");

function contar() {
    alert((counter.length != 0 && x === a) ? "Hay etiquetas" : "No hay etiquetas");
}

contar();
<div class="counter">
  <span></span>
</div>

Hay también operadores ternarios para evaluaciones complejas y anidadas.

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.