Cómo el return false dentro del for rompe tu login

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:00

Cómo el return false dentro del for rompe tu login

Curso de Fundamentos de JavaScript

Clase 44 de 55

Clase 44 / 55

Recursos

Construir un sistema de inicio de sesión en JavaScript implica algo más que validar credenciales: requiere que esa validación se conecte con una experiencia clara para el usuario. Aquí vas a ver cómo armar la función signIn que evalúa si un usuario existe en la base de datos, muestra su timeline y maneja errores cuando los datos no coinciden.

Cómo conectar la validación con la función signIn

La primera función ya devuelve true o false según si el usuario existe. Ahora necesitas que esa respuesta active el flujo correcto sin que tengas que llamar manualmente la validación cada vez.

La idea es sencilla: dentro de signIn colocas un if que invoque la función validadora. Si retorna true, el sistema saluda al usuario por su nombre y muestra su timeline. Si retorna false, aparece un mensaje de error y no se expone ninguna información [01:30].

¿Qué hace la función signIn en este proyecto? Recibe el username y password desde los prompts, llama a la validación y, según el resultado, muestra un alert de bienvenida con el userTimeline o un mensaje de credenciales incorrectas.

Cómo estructurar el if y el else dentro de signIn

La función recibe dos parámetros: el nombre de usuario y la contraseña capturados previamente. Dentro del if, mandas a llamar la función de validación pasándole esos mismos parámetros.

Si el resultado es true, ejecutas un alert personalizado del tipo Bienvenido a tu cuenta concatenado con el username.
También imprimes con console.log el userTimeline para visualizar el contenido.
Si el resultado es false, lanzas un alert con el mensaje Ups, usuario o contraseña incorrectos, sin variables asociadas [02:45].

Este diseño respeta la regla del flujo: mostrar bienvenida y timeline cuando hay coincidencia, o cortar el acceso cuando no la hay.

Por qué el for rompía la validación de usuarios

Al probar el código aparece un comportamiento extraño: aunque escribas un usuario y contraseña correctos como Caro con 456, el sistema responde que las credenciales son incorrectas. El problema no está en signIn, está en cómo se construyó el ciclo for de la validación.

Cuando el for recorre el array de usuarios y el primer elemento no coincide, el else devuelve false de inmediato. Eso interrumpe el bucle antes de revisar los demás registros. Solo el primer usuario del array tendría oportunidad real de validarse [04:30].

¿Por qué un return false dentro del for rompe la validación? Porque el return termina la función en la primera iteración. El bucle nunca llega al segundo o tercer usuario, así que cualquier credencial que no sea la del primer elemento siempre falla.

Cómo corregir el bucle for para validar todo el array

La solución es sacar el return false del interior del for. Así el ciclo puede recorrer cada usuario sin interrumpirse cuando no hay coincidencia.

Dentro del for, mantén solo la condición que devuelve true cuando username y password hacen match.
Elimina el else que retornaba false dentro del bucle.
Coloca el return false fuera del for, después de que termine de iterar todo el array.

Con este ajuste, el ciclo evalúa el primer usuario; si no coincide, pasa al segundo; si tampoco, al tercero. Solo cuando ningún registro coincide, la función entrega false. Si en algún punto hay match, devuelve true y rompe el ciclo de forma correcta [06:10].

Qué pasa al probar el flujo completo de inicio de sesión

Después del cambio, al guardar y ejecutar con Caro y 456, el sistema responde con Bienvenida a tu cuenta, Caro y el console.log imprime el userTimeline esperado. Si las credenciales son inválidas, el alert muestra el mensaje de error sin exponer datos.

Este tipo de detalles, como mover una sentencia fuera de un bucle, son los que marcan la diferencia entre un código que parece funcionar y uno que realmente cumple su propósito. La lógica del for con return es uno de los errores más comunes cuando recorres arreglos buscando coincidencias.

Qué bases de JavaScript ya tienes con este proyecto

Con esta práctica integraste varios conceptos clave del lenguaje:

Uso de function con parámetros para encapsular lógica reutilizable.
Manejo de prompt y alert para interactuar con el usuario.
Recorrido de arreglos con for y validación condicional con if/else.
Retornos booleanos true y false para controlar flujos.
Concatenación de variables dentro de mensajes personalizados.

El siguiente paso natural es darle dinamismo al timeline: en lugar de imprimir el arreglo completo, podrías recorrerlo e imprimir frases como Estefanía escribió esto o Óscar escribió esto. Ese reto extra te ayuda a consolidar la lógica de iteración aplicada a la presentación de datos.

¿Vas a llevar tu timeline al siguiente nivel? Cuéntame en los comentarios cómo lo estructurarías.

Emilio Ciappi

Hace 2 años

a mi me quedo asi, ya lo hice tipo web, muy basica pero funciona

class User { constructor (name, password) { this.name = name; this.password = password; }} class timeLine extends User { constructor (name, textArea) { super(name); this.textArea = textArea }} function login () { const username = usernameInput.value; const password = passwordInput.value; for (let i = 0; i < users.length; i++) { if (users[i].name === username && users[i].password === password) { sessionStorage.setItem("username", username) window.location.replace("welcome.html"); return; } else if (users[i].name !== username || users[i.password !== password]) { const wrongUserPass = document.createElement("div"); wrongUserPass.textContent = "Wrong Username or Password"; form.appendChild(wrongUserPass); } }} function signin () { const username = newUsername.value; const password = newPassword.value; const repassword = newRePassword.value; const error = document.createElement("div"); for (let i = 0; i < users.length; i++) { if (users[i].name === username) { error.textContent = "Choose another user name"; siginForm.appendChild(error); break; } else if (password !== repassword ) { error.textContent = "Password has to match"; siginForm.appendChild(error); break; } else { const newUser = new User(username, password); users.push(newUser); newUsername.value = ""; newPassword.value = ""; newRePassword.value = ""; error.textContent = "User created, go to log in"; siginForm.appendChild(error) break; } } console.log(users)} function postTweet () { const tweetText = tweet.value; const newTweet = new timeLine(helloUser, tweetText); userTimeLine.push(newTweet); tweet.value = "" renderTweets() console.log(userTimeLine)} function renderTweets () { tweetsContainer.innerHTML = ""; for (i = 0; i < userTimeLine.length; i++) { const newTweetContainer = document.createElement("div"); const tweetAuthor = document.createElement("h4"); const tweetContent = document.createElement("p"); tweetAuthor.textContent = userTimeLine[i].name newTweetContainer.appendChild(tweetAuthor); tweetContent.textContent = userTimeLine[i].textArea newTweetContainer.appendChild(tweetContent); tweetsContainer.appendChild(newTweetContainer); }} const form = document.querySelector("form");const usernameInput = document.querySelector("#username");const passwordInput = document.querySelector("#password");const loginButton = document.querySelector(".login-button");

const siginForm = document.querySelector(".sigin-form");const newUsername = document.querySelector("#new-username");const newPassword = document.querySelector("#new-password");const newRePassword = document.querySelector("#new-repassword");const signinButton = document.querySelector(".signin-button"); let users = [];let userTimeLine = [{name: "Antonio", textArea: "Como"}]; users.push(new User("juan", "hola"));

if (loginButton) { loginButton.addEventListener("click", (event) => { event.preventDefault(); login(username, password); });} if (signinButton) { signinButton.addEventListener("click", (event) => { event.preventDefault(); signin(); });

} const helloUser = sessionStorage.getItem("username");const welcomeTitleContainer = document.querySelector(".welcome-content");welcomeTitle = document.createElement("h1");welcomeTitleContainer.appendChild(welcomeTitle)welcomeTitle.textContent = `Welcome back! ${helloUser}` const tweet = document.querySelector("#tweet");const postTweetButton = document.querySelector(".post-tweet")const tweetsContainer = document.querySelector(".tweets-container"); renderTweets() if (postTweetButton) { postTweetButton.addEventListener("click", (event) => { event.preventDefault(); postTweet(); }); }

y acá los HTML

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Social media</title> <script src="./index.js" defer></script></head><body> <form action=""> <label for="username">Username</label> <input type="text" id="username" name="username"> <label for="password">Password</label> <input type="password" id="password" name="password"> <button type="button" class="login-button">Login</button> <button><a href="sigin.html">Sigin</a></button> </form></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./index.js" defer></script></head><body> <div class="welcome-content"> </div> <div class="tweet-container"> <h4>What are you thinking?</h4> <textarea name="tweet" id="tweet"></textarea> <button class="post-tweet">Send</button> </div> <div class="tweets-container"> </div></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./index.js" defer></script></head><body> <form action="" class="sigin-form"> <label for="username">Username</label> <input type="text" id="new-username" name="new-username"> <label for="password">Password</label> <input type="password" id="new-password" name="new-password"> <label for="re-password">Re-Password</label> <input type="password" id="new-repassword" name="new-repassword"> <button type="button" class="signin-button">Signin</button></form></body></html>

Comentarios (72)72 comentarios

Joaquin Ignacio Pinto Reynolds

Daniel Romero

Alvaro García

Hace un año

Duvan Ardila

Diter Terrones

JYCC CONSULTORES

Miguel Jonathan Madrigal González

Julio Cardenas

Coimbra Boso German

theyank019

Maximiliano Ávila

Juan Miguel Jimenez

Hace 10 meses

Juan Camilo Gómez Álvarez

Hace 3 meses

Brayan Camilo Osorio Caicedo

Hace 9 meses

Kyb3r Cipher

Carlos Andres Arteaga escobar

Diego Peraza

Sofia Florez Mendoza

Juan Pablo Ruiz

Diego Humberto Alvarez Guzman

Kenneth Angulo L

Hace 2 meses

Hernán García Urrutia

Hace 3 meses•editado

Gerardo Espinosa

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Cómo el return false dentro del for rompe tu login