Estoy aprendiendo a codificar o, mejor dicho, incluso leyendo el código en este momento. ¿Alguien podría explicarme por qué esas líneas están ahí y qué hacen?
if (noClicking) return; if (e.target.classList.contains("flipped")) return;¿Cuál es el propósito de esas dos líneas?
function handleCardClick(e) { // you can use event.target to see which element was clicked if (noClicking) return; if (e.target.classList.contains("flipped")) return; let currentCard = e.target; currentCard.style.backgroundColor = currentCard.classList[0]; if (!card1 || !card2) { currentCard.classList.add("flipped"); card1 = card1 || currentCard; card2 = currentCard === card1 ? null : currentCard; } if (card1 && card2) { noClicking = true; // debugger let gif1 = card1.className; let gif2 = card2.className; if (gif1 === gif2) { cardsFlipped += 2; card1.removeEventListener("click", handleCardClick); card2.removeEventListener("click", handleCardClick); card1 = null; card2 = null; noClicking = false; } else { setTimeout(function() { card1.style.backgroundColor = ""; card2.style.backgroundColor = ""; card1.classList.remove("flipped"); card2.classList.remove("flipped"); card1 = null; card2 = null; noClicking = false; }, 1000); } } if (cardsFlipped === COLORS.length) alert("game over!"); }if (noClicking) return; if (e.target.classList.contains("flipped")) return; Las líneas debajo de esas 2 líneas no se ejecutarán si se devuelve una de las 2 líneas. Significa que si noClicking == true o e.target.classList.contains("flipped") == true , todas las líneas debajo de esas 2 líneas no se ejecutarán.
Si bien las respuestas ya dadas son correctas, pensé que podría ayudar a comprender por qué esas líneas están en su lugar. Se llaman cláusulas de guarda. Su propósito es hacer que su código sea más eficiente.
Piensa en un escenario como este:
function myFunc(someParam) { /* do something that takes a lot of time/resources ... then somewhere you find someParam was invalid! so all the calculations done until now was useless */ }Entonces, en lugar de verificar la validez de los argumentos, las variables globales, etc. cuando los necesita en la función, los verifica al comienzo de la función de esta manera:
function myFunc(someParam) { //let's say valid() is a function that checks for validity of the param, //returns true if valid, false if invalid. if(!valid(someParam)) return; /* do something that takes a lot of time/resources ... then your function will only run the expensive code if it is sure that there are no invalid arguments passed to it. */ } No siempre tiene que ser solo return . Es tu elección. Tal vez la función siempre devuelva algún número positivo, entonces podría return -1 como tal:
const getRoot = (num) => { if(num < 0) return -1; //get square root of the number return abs(Math.sqrt(num)); } //Then when you call the function, you could check if the result is not -1, //to make sure you passed the correct arguments. if (getRoot(-1) < 0) console.error("Uh oh, you passed a negative number to the square root function"); O podría arrojar un Error :
function myFunc (someParam) { if(!valid(someParam)) throw new Error("wrong param bruh"); //do something... }