Estructuras repetitivas: while

Clase 17 de 55 • Fundamentos de JavaScript 2018

Resumen

En esta clase estudiaremos otra estructura repetitiva llamada while. While se ejecuta únicamente mientras la condición que se está evaluando es verdadera.

En ocasiones nuestro código puede fallar por errores de syntaxis o errores lógicos. En caso de que quieras verificar tu código, debes utilizar un debugger. El código se detiene cada vez que lee esta palabra.

Jose Fabian Benavides Moreno

student•

El codigo del while funciona de esta manera:

while (condición) {
    // Este código se va a ejecutar siempre a menos que la condicion cambie
}

Andrés Ramírez

student•

Muchas gracias

ERIK LEIJA

student•

Hasta que la condición no se cumpla, no que cambie.

María José Ledesma

student•

Daniela Benítez González

student•

Gracias majo, justamente estoy siguiendo tus apuntes

María José Ledesma

student•

¡Waw!

¡Nunca pares de aprender! (Y practicar) ✨🦄

Juan murcia

student•

Creo que en este punto se equivocaron, no pueden enseñar un concepto como los ciclos o las funciones y enseguida abreviarlas o utilizar la sintaxis que esta de moda y explicarla en unos cuantos segundos. Se que parte de programar es investigar y averiguar, pero si estoy pagando para que me lo expliquen, entonces alguien aquí se esta equivocando ( o yo al pagar o ustedes al explicar) si la intensión de cada clase es profundizar cada vez mas, entonces deberían tener cuidado con esas abreviaciones que muy seguramente solo lo utilizaran los programadores mas experimentados, esto para el que lo sabe sera muy fácil y muy tonto, pero para el que esta aprendiendo, le molesta y le cabrea por que fácilmente terminamos horas y horas tratando de averiguar que fue lo que hicieron en algún punto cuando si invierten algunos minutos explicándolo entonces no creo que a los mas avanzados les moleste, y si les molesta entonces que vayan y tomen un curso mas avanzado. Me recuerda en el colegio al álgebra, cuando si no entendías algo entonces ese punto te mareaba todo el resto del año por que se trataba siempre de avanzar sobre lo ya aprendido y esta muy bien; solo trato de que consideren explicar mejor las abreviaciones para por lo menos entender lo que trataron de hacer los que cambian las reglas del lenguaje y le agregan ese tipo de cosas por que luego simplemente terminas copiando y pegando lo que hizo el profesor. sinceramente la abreviación de la función me mareo, Ahora estoy tratando de averiguar por otro lado por que por mas que repito el vídeo y miro los comentarios no hallo una respuesta concreta por que simplemente explicar esas cosas toman algo de tiempo; luego me lo colocas en el siguiente vídeo del ciclo for y nuevamente en el ciclo while. y seguramente de aquí para adelante en todos los demás vídeos. ni modo, tendré que volver atrás nuevamente y buscar en otro lado. Y haber si no me salen con otro "esta de moda" y me terminan de cargar el curso. Por que eso de esta de moda, sera por que lo usan los mas experimentados. yo pienso continuar mi aprendizaje en java script, ¿no pueden ponerme estas abreviaciones en el curso definitivo?

Armando Leonardo Cruz Gómez

student•

Tal vez te vendría bien tomar el curso de programación básica, ahi se explica un poco más sencillo esto.

Cristian Camilo Rodriguez

student•

Ando depronto te puede servir Informacion_return

Juan Diego Silva Garcia

student•

Ciclo FOR Lo utilizamos cuando conocemos el número de repeticiones. Ciclo While Lo utilizamos cuando desconocemos el numero de repeticiones.

Gonzalo Vidal

student•

Buena forma de verlo, lo entendí así subconcientemente, pero ahora ya lo tengo super claro!.

Victor Andres Castillo Zambrano

student•

gracias

Starling Mercedes

student•

hacer debugger es importante, seria cool un curso solo para aprender a hacer debugger en javascript y a usar el editor atom, visual studio code con debugger.

Juan Jose Vega

student•

que loco

Daniel Alejandro Gimenez

student•

Hacer debugger del código de una aplicación es importante, pero no por si solo, es parte del proceso de aprendizaje de cualquier lenguaje de programación y es un recurso que todo programador utiliza en su dia a dia laboral, no tendría sentido por si solo sin avanzar en el proceso de aprendizaje del lenguaje en si mismo.

Hacer debug de un fragmento de código es inspeccionarlo paso a paso en la búsqueda de un error que hace que nuestra aplicación no se comporte como esperamos. Esto se logra con la práctica.

En cada uno de dichos pasos del proceso de debug, se evalua el estado de variables, constantes, valores de retorno de funciones, y demás objetos involucrados en el fragmento de código que estamos evaluando.

Espero que quede un poquito mas claro! Saludos!

Diego Alejandro Aguilera Martinez

student•

Un pequeño cambio aplicando lo visto anteriormente

var diego={
  nombre:'Diego',
  apellido:'Aguilera',
  peso:'55'
}
const META=diego.peso+3
const aumentarDePeso= persona => persona.peso+=0.4
const bajarDePeso=persona=>persona.peso-=0.4
var cont=0
function simular(persona){
  while(persona.peso < META){
    var random=Math.random()
    if (random<0.75) {
      aumentarDePeso(persona)
    }else if(random<1){
      bajarDePeso(persona)
    }
    cont++
  }
}

simular(diego)
console.log(`${diego.nombre} duró ${cont} dias`)

David Villegas

student•

interesante, buen aporte!

Edwin Alberto Equihua Ochoa

student•

muy buen uso de los functions, a la hora de usarlos como incrementos y decrementos.

César López

student•

Alguien me puede explicar por qué dentro de la estructura del while utilizo dos veces if en vez de else if ?

Julio Alfaro Pineda

student•

Creo que tu sugerencia seria una optimizacion, probablemente Sacha se enfoco mas en el while que en el codigo de adentro, pero tienes razon.

Diego Forero

Team Platzi•

Hay muchas formas de programa, ten en cuenta que si usas dos if entonces siempre va a intentar hacer las dos validaciones, si usas if … else if … else entonces si entra el primer if no va a validar el else if, lo mismo si entra al else if no va a validar else. Todo depende de lo que necesites hacer en tu código.

Bryan Aranda

student•

como critica constructiva y sin tratar de hacer sentir mal a nadie, me parece que estaría bien que le dedicaran un poco más de tiempo a los cursos que hacen debido a que por ejemplo en particular este, hay veces que a mi parecer el profesor se confunde mucho, obviamente se que es difícil explicar al mismo tiempo que hacer pero por ello pienso que debería practicar más la grabación del mismo hasta que sea mas atendible, de igual forma me gustaría que no se dieran tantos términos técnicos durante las clases pues aquí no indica que haya que tener conocimientos previos y de repente se mencionan palabras que uno nunca había escuchado y no se toman el tiempo de que si darán un termino tecnico al menos adjuntar la información correspondiente, claro que depende de cada estudiante ser autodidacta e investigar por su cuenta pero no estaría mal que organicen mejor la información y las explicación si se esta dando un servicio.

Santiago Restrepo

student•

Al principio Sacha se equivocó, no era hasta que se cumpla una condición si no mientras que se cumpla una condición ☝🏼

Jancarlos Santiago

student•

sii

Enrique Garcia Stave

student•

Todos los bucles son iguales, puesto que todos cumplen con la misma funcion y es, realizar una tarea repetitiva.

Ahora… la gran diferencia entre un while y un for radica en que, en el primero realizas un “hasta” y en el segundo realizas un “mientras” (respectivamente valiendo la redundancia), es decir, que la diferencia mas notoria es que el ciclo while podemos usarlo cuando no sabemos a ciencia cierta el termino de este mismo.

Wellington Perez

student•

Otro elemento yo diria que es la variable de control. En el FOR se establece de inmediato todos los elementos de control del flujo (variable y sus cambios por ciclo) lo que reduce la posibilidad de un ciclo infinito. El WHILE es mas flexible en cuanto al cambio de la condicion del control sin embargo es mas propenso a que se creen ciclos infinitos.

Luis Daniel Méndez Gaona

student•

De un error intensional o no, salieron unos excelentes tips por parte de Sacha para hacer un debug a nuestro código.

Arnaldo José Cisneros Zambrano

student•

Pero cuando el debugging toma la mayoría de la clase, cuando esta debería explicar de manera profunda el ciclo While, hay un problema. Apenas habló del ciclo While. Hizo un solo ejemplo, y en ese ejemplo tuvo un error de sintaxis, y se pasó la mayoría de la clase hablando de hacer debugging

Yo ya conozco el ciclo while, he programado por años, pero para una persona nueva, me parece que esta clase no está bien hecha. Deberían hablar sólo del ciclo while, poner más de un solo ejemplo, y si va a hablar de debugging, que no tome la mayoría de la clase, y recomendar el curso de debugging para profundizar

Rulo Code

student•

debugger una excelente herramienta para evitar dolores de cabeza y teclados rotos

ANGEL DAVID SULBARAN CALDERON

student•

ESTRUCTURAS REPETITIVAS: while

La estructura while nos permite repetir un código, hasta que se cumpla una condición

Lo primera que vamos a hacer, será modificar nuestra estructura anterior de la siguiente manera

var angel = {
    nombre: 'Angel',
    apellido: 'Sulbaran',
    edad: 23,
    peso: 70

}

var pepe = {
    nombre: 'Pepe',
    apellido: 'Trueno',
    edad: 13
}

console.log(`anualmente al inicio ${angel.nombre} pesa ${angel.peso}kg`)

const INCREMENTO_DE_PESO = 0.3

const aumentarDePeso = persona => persona.peso += INCREMENTO_DE_PESO
const adelgazar = persona => persona.peso -= INCREMENTO_DE_PESO
const comeMucho = () => Math.random < 0.3
const realizaDeporte = () => Math.random < 0.4
var dias = 0

const META = angel.peso - 3

while (angel.peso > META) {
    debugger
    if(comeMucho()) {
        aumentarDePeso(angel)
    }
    if(realizaDeporte()) {
        adelgazar(angel)
    }
    dias += 1
}

console.log(`pasaron ${dias} dias hasta que ${angel.nombre} adelgazo 3kg`)

Lo primero que hacemos aca es borrar la estructura repetitiva “fot” y asignaremos while de la siguiente manera “while(){}” donde while será la condición para que el código termine de ejecutarse, por lo que mientras no llegue a la condición, no se terminara de ejecutar, siendo asi, las funciones que cumplirá para llegar a la condición, la colocaremos dentro de las llaves. Nuestra meta aca es que angel rebaje kg, por lo que debemos crear la meta para que angel baje kg.

const META = angel.peso - 3

vamos a crear las funciones aleatorias para que angel aumente o rebaje de peso, de manera que;

const comeMucho = () => Math.random < 0.3
const realizaDeporte = () => Math.random < 0.4

asi que agregaremod esto a la estructura while de la siguiente manera

while (angel.peso > META) {
    debugger
    if(comeMucho()) {
        aumentarDePeso(angel)
    }
    if(realizaDeporte()) {
        adelgazar(angel)
    }
}

Donde colocaremos, dos condiciones que pueden pasar aleatoriamente, si come mucho o si realiza deporte, ahora para calcular los días que le tomara a angel llegar a la meta, crearemos una variable, “dias”, que debe ser agregada de la manera “var días = ” no podemos usar “const” debido a que es un valor sujeto a cambios por lo que si usamos const, nos dará error. Luego de creada la variable, la agregaremos de la siguiente manera

while (angel.peso > META) {
    debugger
    if(comeMucho()) {
        aumentarDePeso(angel)
    }
    if(realizaDeporte()) {
        adelgazar(angel)
    }
    dias += 1
}

Y por último agregaremos un cambio al último console.log;


console.log(`pasaron ${dias} dias hasta que ${angel.nombre} adelgazo 3kg`)

Ahora luego de hecho todo esto, veras que, no te va a funcionar, aca viene una parte muy importante de esta clase, que el debuggin. Usaremos “debugger”;

while (angel.peso > META) {
    debugger
    if(comeMucho()) {
        aumentarDePeso(angel)
    }
    if(realizaDeporte()) {
        adelgazar(angel)
    }
    dias += 1
}

Donde sea que queramos debuggear algo cuando estes probando cosas dentro del navegador, agregaras esto al código que quieres reparar/arreglar/hacer funcionar, como te apetezca decirle, el punto es que esto lo vas a usar en la consola, y te va a cancelar la ejecución del código cada vez que le agregues “debugger” a uno, ahora nos vamos a pestaña sources.

Revisar video de eestructuras while, para repasar en caso de que se olvide un detalle de como sirve esto, o ver un video en Youtube en su defecto. Aca el bug es muy simple de ver, y es algo que probablemente se te olvido al momento de escribir las arrow functions, pero es algo muy básico que debemos siempre tener en cuenta

const comeMucho = () => Math.random() < 0.3
const realizaDeporte = () => Math.random() < 0.4

No puedes dejar colocar los paréntesis al crear la función, porque con esto es que llamas las funciones, al menos de este tipo, como lo es random.

De modo que nuestro código quedaría asi;

ANGEL DAVID SULBARAN CALDERON

student•

var angel = {
    nombre: 'Angel',
    apellido: 'Sulbaran',
    edad: 23,
    peso: 70

}

var pepe = {
    nombre: 'Pepe',
    apellido: 'Trueno',
    edad: 13
}

console.log(`anualmente al inicio ${angel.nombre} pesa ${angel.peso}kg`)

const INCREMENTO_DE_PESO = 0.3

const aumentarDePeso = persona => persona.peso += INCREMENTO_DE_PESO
const adelgazar = persona => persona.peso -= INCREMENTO_DE_PESO
const comeMucho = () => Math.random() < 0.3
const realizaDeporte = () => Math.random() < 0.4
var dias = 0

const META = angel.peso - 3

while (angel.peso > META) {
    if(comeMucho()) {
        aumentarDePeso(angel)
    }
    if(realizaDeporte()) {
        adelgazar(angel)
    }
    dias += 1
}


console.log(`pasaron ${dias} dias hasta que ${angel.nombre} adelgazo 3kg`)

Luis Alejandro Vera Hernandez

student•

Excelente explicacion compaero, me ayudaste a asentar los conocimientos dados en la clase

Juan Diego Silva Garcia

student•

No es buena práctica declarar funciones dentro de un ciclo, porque cada vez se van a declarar una y otra vez hasta que se termine la condición del ciclo.

Mariana Cortés

student•

No se deben DECLARAR pero si se pueden LLAMAR verdad? Lo siento, no entiendo muy bien, ¿alguien que me explique?

Juan Diego Silva Garcia

student•

Exacto, puedes llamar las funciones ejemplo someFunction() más no no es una muy buena práctica declararlas dentro del ciclo ejemplo:

for (let i = 0 ; i >= 10; i++ ) {
	n += i;
	function someFunction(n) {
		return n += 1
	}
}

Mala práctica porque declaras la función 10 veces o hasta que se cumpla la condición del ciclo

Daniel Muñoz Martín

student•

No entiendo muy bien cómo hacer los porcentajes,

const COME_MUCHO = () => Math.random() < 0.3

Esta línea quiere decir que retorna true, sólo si el número aleatorio entre 0 y 1 es menor a 0.3 (osea sólo el 30% de las veces).

Es cómo si fuera un if que entrará sólo el 30% de las veces, no ?

Julio Alfaro Pineda

student•

Es que Math.random() retorna un numero entre 0 y 1, por lo que lo que hace Sacha es definir que si devuelve un numero menor a .3 esta dentro del 30%, esto por que en Math.random(), cada valor tiene teoricamente la misma probabilidad de salir, lo cual lo hace valido para los porcentajes. No se si me logre explicar?.

Daniel Muñoz Martín

student•

Si eso lo entiendo !

Entonces cuando tu haces return Math.random() < 0.3 quiere decir que retornará ese número sólo si es menor a 0.3, por lo cuál es cómo si fuera un if ?

Sergio Armando Medina Chaparro

student•

Por fin entendí como usar Debugger. Vaina como pude estudiar en la U sin eso.

jorge llanque

student•

Pienso que fue sarcasmo

Juan David González Rodríguez

student•

Aca dejo un proyecto que vengo haciendo usando los ciclos https://github.com/juanda103/Cubo-Rubik

Jose Alfredo Cordoba Cadavid

student•

Hola
¿Alguien sabe de alguna pagina donde pueda hacer ejercicios para practicar lo visto hasta hora en con JS?

Muchas gracias

Jesús Heber Grajeda Barranco

student•

https://www.hackerrank.com/

Thais Hernández López

student•

codewars lo he usado y la verdad he aprendido bastante porque no solo te dan un problema y tú lo resuelves en el lenguaje que quieras sino el feedback después de enviar el resultado es brutal, porque puedes ver las soluciones de otros usuarios y se aprende un montón, lo recomiendo al igual que HacherRank como te comentaron

Elvis Moreira

student•

En esta clase tenemos a while como otra alternativa de una estructura repetitiva, que sirve para repetir instrucciones las veces que se desee y tiene estas características.

while() Va con la palabra while entre paréntesis va la condición y entre llave sus instrucciones.
while( ) evalúa primero la condición, esto que quiere decir entra a ejecutar las instrucciones siempre y cuando la condición se cumpla.

Adicional a esto se aprendió a utilizar debugger, que si estamos en la consola del navegador nos permitirá ir paso a paso para verificar las instrucciones que se ejecuten, y verificar el error.

Héctor Augusto Molero Arana

student•

Hay un curso en Platzi, para aprender a usar el Debugging dDev Tools. Les dejo el enclace<<.