Introducción al curso

1

¡Alto! Tenemos una nueva versión de este curso para ti

2

Bienvenidos al Curso de Fundamentos de JavaScript

3

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

4

Variables

5

Variables: Strings

6

Variables: Números

7

Funciones

8

El alcance de las funciones

9

Objetos

10

Desestructurar objetos

11

Parámetros como referencia o como valor

12

Comparaciones en JavaScript

Estructuras de Control y Funciones

13

Condicionales

14

Funciones que retornan valores

15

Arrow functions

16

Estructuras repetitivas: for

17

Estructuras repetitivas: while

18

Estructuras repetitivas: do-while

19

Condicional múltiple: switch

Arrays

20

Introducción a arrays

21

Filtrar un array

22

Transformar un array

23

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

24

Cómo funcionan las clases en JavaScript

25

Modificando un prototipo

26

El contexto de las funciones: quién es this

27

La verdad oculta sobre las clases en JavaScript

28

Clases en JavaScript

Asincronismo

29

Funciones como parámetros

30

Cómo funciona el asincronismo en JavaScript

31

Cómo funciona el tiempo en JavaScript

32

¿Qué pasó con swapi.co?

33

Callbacks

34

Haciendo múltiples requests

35

Manejando el Orden y el Asincronismo en JavaScript

36

Manejo de errores con callbacks

37

Promesas

38

Promesas Encadenadas

39

Múltiples promesas en paralelo

40

Async-await: lo último en asincronismo

Juego de HTML

41

Comenzando el juego

42

Generando una secuencia de números

43

Iluminando la secuencia de colores

44

Obteniendo el input del usuario

45

Agregando la verificación del color elegido

46

Agregando los estados finales del juego

47

Conclusiones del curso

Complementos

48

Diferencias entre var, let y const

49

Memoización: ahorrando cómputo

50

¿Hace cuántos días naciste?

51

Funciones recursivas

52

Entiende los closures de JavaScript

53

Estructuras de datos inmutables

54

Cambiando de contexto al llamar a una función

55

¿Cuándo hace falta poner el punto y coma al final de la línea?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Diferencias entre var, let y const

48/55
Recursos

““var”” es la manera más antigua de declarar variables. No es muy estricta en cuanto al alcance, ya que al declarar variables de esta forma, dichas variables podrán ser accedidas, e incluso modificadas, tanto dentro como fuera de los bloques internos en una función.

Con ““let”” por otra parte, el alcance se reduce al bloque (las llaves) en el cual la variable fue declarada. Fuera de este bloque la variable no existe. Una vez declarada la variable con let, no se puede volver a declarar con en ninguna otra parte de la función.

““const”” al igual que ““let”” se define en el contexto o alcance de un bloque, a diferencia de let y var, las variables definidas como constantes (const), ya no podrán ser modificadas ni declaradas nuevamente, en ninguna otra parte de la función o el contexto en el que ya existen.

La recomendación es reducir siempre al mínimo el alcance de nuestras variables, por lo que se debe usar let en lugar de var mientras sea posible.

Aportes 180

Preguntas 17

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Resumen de la clase:
var - let - const

• Cuando declaramos variables con ‘var’ siempre conviene declararlas ‘arriba’ del código en el que sea claro cuáles van a ser las variables que se van a usar dentro de nuestra función o programa.

• Dentro de una función javascript detecta todas las variables declaradas con ‘var’ y las ‘declara’ por sí solo como si estuvieran ‘arriba’ en el código. Por lo que si se declara un var dentro de un bloque else y este no es accedido por el condicional, la variable ‘var’ declarada dentro de ese else existe de todas maneras.

• Si utilizamos ‘let’, el alcance de esa variable se ve reducido únicamente al bloque de código donde es utilizado.

‘const’ se comporta parecido a let sólo que no es posible reasignarlo.

• Es posible modificar una variable ‘const’ en el caso de un array[ ] con el método push() por ejemplo.

• Reducir siempre al mínimo el alcance de nuestras variables.

• Utilizar 'let’ si tenemos que reasignar una variable.

• Si nunca tenemos que reasignar una variable usamos ‘const’.

Considero esta clase debería ser de las primeras del curso

es posible, y … es decir, esta bien? ser profesionalizarse y trabajar como BACK END Y FRONT END??? O es mejor elegir solo 1 camino ?

(teniendo en cuenta que en paises como el mio “colombia” quieren que uno haga desde el cafe, barrer y hasta diseñar y construir turbinas de aviones y de paso para transbordadores espaciales, por unos centavos al mes)

Hola, aquí les dejo una explicación un poco más amena para los que les causa confusión los scopes y el ambito de una declaración.

// scope global - disponible en todos los scopes
var sacha = "sacha1"

function miFuncion() {
	// empieza scope miFuncion

	if (true) {
		// empieza scope if

		var sacha = "sacha2";
		// se declara dentro del scope miFunción
		// está disponible desde el inicio de la función
		// tendrá valor undefined hasta ejecutarse esta linea
		// dejará de estar disponible cuando termine el scope miFuncion

		let sacha2 = "sacha3";
		const sacha3 = "sacha4";
		// se declaran dentro del scope if
		// están disponibles a partir de esta línea con el valor asignado
		// dejan de estar disponibles cuando termine el scope if

		// termina scope if
		// los datos declarados con let y constdentro del scope if dejan de existir
	}
	if (true) {
		// inicia scope if 2

		let sacha = "sacha5";
		let sacha2;
		console.log(sacha, sacha2);
		// imprimirá: sacha5 undefined
		// a pesar de haber tres sacha declaradas
		// (scope global, scope miFunción, scope if 2)
		// console.log tomará la declarada en el scope más cercano
		// (scope if 2 - este)
		// sacha2 no existe en ningún otro scope
		// en este (if 2) fue declarade más no definida
		// por lo que su valor es undefined

		// termina scope if 2
		// los datos declarados con let y const dentro del scope if 2 dejan de existir
	}
	console.log(sacha);
	// imprimirá: sacha2 (declarada en scope miFunción, inicializada en scope if)

	// termina scope miFunción
	// los datos declarados con let, const y var dentro del scope miFunción dejan de existir
}

console.log(sacha);
// imprimirá: sacha1

Scopes

  • scope local: es el bloque en que se está ejecutando una instrucción.
  • scope de una función: es el bloque que está delimitado por una función.
  • scope global: es el que está accesible sin importar en qué bloque se esté.
    Todos los scope pueden tener otros scopes dentro.

Declaraciones

  • var: se declara en el scope de la función con valor undefined, se inicializa al momento de ejecutarse cualquier línea donde se alla definido (dentro del scope de la función), si no se encuentra dentro de ninguna función entonces se declara en el scope global, puede ser modificada dentro del scope de la función/global desde el inicio del mismo, la primera inicialización debe ser con var, puede ser inicializada con var varias veces, una por cada scope local que esté contenido dentro del scope de la función/global.
  • let: se declara dentro del scope local al momento de la ejecución de la línea, deja de estar disponible cuando termina el scope local, se puede modificar dentro del scope local, a partir de la línea en la que se declara.
  • const: se declara dentro del scope local al momento de la ejecución de la línea, deja de estar disponible cuando termina el scope local, no puede ser modificada una vez declarada.

Interesante, pero creo que esta clase debería ser de las primeras del curso.

Me agrado la dinamica del curso!
Pudieran mejorar la parte calbacks y su explicación

Llegado a este punto del curso noto que pese a usar JavaScript durante un par de años debía aprender con mayor detalles ciertos conceptos.

Var: para uso de variables globales.
Let: para variables locales.
Const: igual que let, pero no puedes reasignarle un nuevo valor en el mismo codigo.

es lo que pude entender.

Alguien sabe quien es el encargado de liberar la memoria cuando finaliza el alcance de una variable? es el propio browser? o se puede correr algo?

y cuando definimos una clase, la creamos (new) y la quiero borrar? basta con hacer null?

var: Este termino nos permite declarar una variable casi global, debido a que cuando declaramos una variable dentro de una función, al querer invocar un console.log() de la variable nos retorna un error pero si lo dejamos libre o en un for si se puede obtener su valor desde cualquier parte del código.
----------------------------------------------------------------------------------------------------------------------------------------
let: Este termino también nos permite declarar un tipo de variable que se limita al cuerpo donde este. Por ejemplo:

  1. Si lo declaramos afuera de cualquier function , for , if , etc. entonces va a ser un tipo de variable global.
  2. Si lo declaramos dentro de una function(), entonces si queremos obtener el valor de la variable va a tener que ser dentro del cuerpo de la function.
  3. Si lo declaramos dentro de una for, entonces si queremos obtener el valor de la variable va a tener que ser dentro del cuerpo de for.
  4. Si lo declaramos dentro de una if, entonces si queremos obtener el valor de la variable va a tener que ser dentro del cuerpo del if.
  5. Y asi con los distintos casos que se encuentre.

----------------------------------------------------------------------------------------------------------------------------------------
const: Este termino nos permite declarar una variable que contiene un valor o tambien que contiene un conjunto de valores en un array a los cuales no pueden ser modificados sus respectivos valores porque sino nos retorna un error. Pero lo que si se puede hacer cuando tenemos una variable constante que tiene un array con valores es agregarle mas valores con el metodo “nombre_de_variable.push(valor)”.
----------------------------------------------------------------------------------------------------------------------------------------
CONSEJO:

  1. En el caso de var o let es mejor usar la segunda opcion porque en caso de que haya un debug pues tus posibilidades de encontrar el error en el codigo serian menores ya que al declarar una varaible con let hay que recordar que este reduce su dominio de uso.
  2. Si en caso declares una variable que cuyo valor no quieres que cambie en todo el tiempo, seria mejor declararla con el termino const.

La principal diferencia entre var, let y const es el alcancé que tienen y capacidad de alteración de los datos que estas contienen.

let y const tienen un alcance limitado al entorno o función en el que son declarados, ya sea dentro de un for, if o función. Por otro lado var no importa el lugar donde se declare, este ocupa un espacio de memoria y por lo tanto ha sido declarada permitiendo así que en algún lugar sobre-escriba el contenido de otra variable con el mismo nombre.

En resumen, la mejor forma de declarar variables en javascript, es usando let para datos que se cambiarán a futuro, y const para valores definidos por ejemplo, los llamados “número mágicos”

var > let > const

Hoisting. En JS una variable puede ser declarada después de que esta ha sido usada, en otras palabras, una variable puede ser usada antes de que esta haya sido declarada.

Ya que lo que hace internamente JS es que si la variable ha sido declarada / usada en algún punto dentro del bloque, es pasar dicha variable a la parte superior del bloque.

Vaya, esto si es realmente nuevo. Hago la analogía que let permite el mismo comportamiento de variables como Java o C#, mientras que var es un comportamiento bastante propio de javascript.

Esto les va a servir mucho. A mí me ayudó a despejar todas mis dudas con ejemplos. Es la página de Fili Santillán: Diferencias entre variables.

Y aquì dejo mi còdigo depurado con mis aprendizajes 😃
Disfrutalo

/*
Autor: Daniel Páez
URL Autor: Daniel Páez
Tema de la clase: var, let, const
Descripción: var, let, const
URL Autor:  heysoypaez.com
URL código: github.com/heysoypaez
*/

/*PROTOCOLO DE VERIFICACIÓN DE FUNCIONAMIENTO
==================================*/
//Imprimiendo algo en la consola
console.log("inicializando archivo");


/*DECLARACIÓN DE OBJETOS
============================*/		
let daniel = {
		nombre: "Daniel",
		apellido: "Pàez",
		edad: 18

	}

/*DECLARACIÓN DE VARIABLES
==================================*/
//Null

/*DECLARACIÓN DE FUNCIONES
========================================================*/


/*FUNCION PARA VER SI ES MAYOR DE EDAD
incluyendo las buenas prácticas de let*/

function esMayorDeEdad(persona) {

	/*DECLARACIÓN DE VARIABLES CONSTANTES
	======================================*/
	const MAYORIA_DE_EDAD = 18;
	//En const no podemos volver a asignar el valor de la variable.

	/*DECLARACIÓN DE VARIABLES REASIGNABLES
	======================================*/
	let mensaje
	let mensaje2
	/* El alcance donde podemos acceder a esta varible se reduce al bloque de codigo donde fue creado. */

	/*EJECUCION DE LA LÓGICA
	========================*/

	//siempre que sea efectivo evita magic numbers
	if (persona.edad >= MAYORIA_DE_EDAD ) {

		mensaje = "Es mayor de edad"

	}

	else {

		mensaje = "Es menor de edad"
		mensaje2 = "Otro mensaje"

	}

	/*OUTPUT, MOSTRAR
	==================*/
	return console.log(mensaje, mensaje2)
}


/*EJECUCIÓN DE FUNCIONES Y PROMESAS
========================================0*/

//funcion 1
esMayorDeEdad(daniel)


//funcion 2
for (let i = 0; i <= 3 ; i++) {
	//js agrega a i despues del primer ciclo
	console.log(i)

}


//Fijate como el valor de esta variable i es independiente a la del ciclo for
let i;

console.log(`Terminó el for el valor de i es ${i}`)



/*=======================================
RENDER EN PANTALLA
Agregando al html datos de la clase
=======================================*/

//Variables
let temaClase = "Var, let y const";
let titulo = document.getElementById("title")
let contenidoClase = document.getElementById("contenido-clase")

//Variables reasignadas
titulo.innerHTML=  temaClase;
contenidoClase.innerHTML= temaClase;

//contenido de la clase

let apuntes = document.getElementById("apuntes")
let textoContenido = "=> Reduce al minimo el alcance de cada una de las variables a menos que tenga un objetivo concreto" 

apuntes.innerHTML = `${textoContenido}`;

Las variables var son detectadas por el lenguaje y su alcance se extiende a mas del bloque donde donde fueron declaradas, es decir se convierten en globales en la mayoría de los casos. Las variables let limitan el alcance de su declaración únicamente al bloque de código donde están. Y las variables const tienen las mismas características que let con la diferencia que su contenido no puede ser alterado.
Corrijanme si me equivoco por favor.

La recomendación es reducir siempre al mínimo el alcance de nuestras variables, por lo que se debe usar let en lugar de var mientras sea posible.

Lo mejor utilizar let si tenemos que reasignar la variable, pero si no tenemos que reasignarla, utilizar const al definirla.

Que curso tan mas completo, perfecto

Les dejo un vídeo sobre los visto en clase, espero les sirva
https://www.youtube.com/watch?v=XgSjoHgy3Rk

Es mejor no utilizar var porque puede generar algunos bugs y confundirse en el código, en cambio se puede utilizar let y const para poder tener más control de las variables. let lo usaremos para variables que necesitemos reasignar a lo largo del código y const lo usaremos para valores que necesitemos que sean siempre iguales.

//Var: Javascript usa 'var' y lo ubica en lo más alto del bloque principal, en este caso la función. Por esta razón puede ser llamada en cualquier bloque prácticamente.

var Person = {
    Name: 'Santiago',
    lastName: 'Bastidas',
    age: 19
}

function isAdult(person) {
    
    if(person.age > 18) {
        var message = 'Es mayor de edad'
    } else {
        var message = 'Es menor de edad'
    }
    console.log(message)
}

isAdult(Person) 
//Es mayor de edad

//Var en ciclos: como se mencionó anteriormente, var permite hacer llamados de las variables en casi cualquier ámbito, por lo que el console.log va a ser ejecutado correctamente.

for(var i = 0; i < 10; i++) {
    console.log(i)
}

console.log(`Terminó el for, el valor de i es ${i}`)

//Let: Javascript usa 'let' y solo permite que sea llamado en el mismo bloque de código en el que fue declarado. Por está razon si se intenta llamar desde el exterior de ese bloque, va a salir el error 'variable no definida'

var Person2 = {
    Name: 'Santiago',
    lastName: 'Bastidas',
    age: 19
}

function isAdult2(person) {
    
    if(person.age > 18) {
        let message2 = 'Es mayor de edad'
    } else {
        let message2 = 'Es menor de edad'
    }
    console.log(message2) 
}

isAdult2(Person2) 
// Uncaught ReferenceError: message2 is not defined

//Let en ciclos: como se mencionó anteriormente, let solor permite llamados dentro del mismo bloque de código, por lo tanto al hacer el llamado fuera del ciclo for. El resutlado va a ser un error.

for(let i = 0; i < 10; i++) {
    console.log(i)
}

console.log(`Terminó el for, el valor de i es ${i}`)
//ReferenceError: i is not defined

//Const: lo usamos para valores que necesitemos que siempre esten iguales a lo largo del código.

var Person3 = {
    Name: 'Santiago',
    lastName: 'Bastidas',
    age: 19
}

function isAdult3(person) {
    let message3 
    const ADULT_AGE = 18
    if(person.age > ADULT_AGE) {
        message3 = 'Es mayor de edad'
    } else {
        message3 = 'Es menor de edad'
    }
    console.log(message3) 
}

isAdult3(Person3)

La mayoría de veces van a encontrar que se usa más const, de hecho rara vez van a usar let, así que eso es una buena practica ^^

Excelente clase y explicación. Ahora a pensar bien con qué tipo debo crear una variable. A reducir al mínimo el uso del var y en su lugar usar let para las que quiera reasignarle valor y const para las que no.

Const es similar a let, diferenciándose en que esta en que esta solamente puede tener una asignación, es constante.

Con arreglos declarados como constantes NO podemos reasignar los valores, pero SÍ podemos realizar push a estos, incrementando así sus valores

buenas amigos, un must read interesante sobre el hoisting en Javascript. Complementa lo explicado por Sacha.

https://www.w3schools.com/js/js_hoisting.asp

Buena aclaracion para los principiantes como yo

Tengo problemas con el juego y la verdad nose donde esta bien el error. Nose si alguien me puede dar una mano para descubrir cual es el inconveniente. Muchas gracias.
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>Simon Dice</title>
<style>
body {
margin: 0;
background: #dedede;
display: flex;
align-items: center;
height: 100vh;
}

  .gameboard {
    height: 100vh;
    width: 100vh;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    max-height: 60vh;
    max-width: 60vh;
  }

  .color {
    width: 50%;
    height: 50%;
    display: inline-block;
  }

  .left {
    float: left;
  }

  .right {
    float: left;
  }

  .celeste {
    background: #22a6b3;
  }

  .celeste.light {
    background: #7ed6df;
  }

  .violeta {
    background: #be2edd;
  }

  .violeta.light {
    background: #e056fd;
  }

  .naranja {
    background: #f0932b;
  }

  .naranja.light {
    background: #ffbe76;
  }

  .verde {
    background: #6ab04c;
  }

  .verde.light {
    background: #badc58;
  }

  .btn-start {
    width: 400px;
    height: 100px;
    background: #ecf0f1;
    color: #2c3e50;
    font-size: 2.5rem;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 200px);
  }

  .hide {
    display: none;
  }
  *{
    font-family: 'Arial'
  }
</style>

</head>
<body>
<div class=“gameboard”>
<div id=“celeste” class=“color celeste left” data-color=“celeste”></div>
<div id=“violeta” class=“color violeta right” data-color=“violeta”></div>
<div id=“naranja” class=“color naranja left” data-color=“naranja”></div>
<div id=“verde” class=“color verde right” data-color=“verde”></div>
<button id=“btnEmpezar” class=“btn-start” onclick=“empezarJuego()”>Empezar a jugar!</button>

</div>

<script src=“https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js”></script>
<script>

  const celeste = document.getElementById('celeste')
  const violeta = document.getElementById('violeta')
  const naranja = document.getElementById('naranja')
  const verde = document.getElementById('verde')
  const btnEmpezar = document.getElementById('btnEmpezar')
  const ULTIMO_NIVEL = 10

  swal('Hola!')

  class Juego {
    constructor() {
      this.inicializar = this.inicializar.bind(this)
        this.inicializar()
        this.generarSecuencia()
        setTimeout(this.siguienteNivel, 500)

      }


    inicializar() {
      this.siguienteNivel = this.siguienteNivel.bind(this)
      this.elegirColor = this.elegirColor.bind(this)
      this.toggleBtnEmpezar()
      this.nivel = 1
      this.colores = {
        celeste,
        violeta,
        naranja,
        verde

      }
    }
    toggleBtnEmpezar() {
      if (btnEmpezar.classList.contains('hide')) {
        btnEmpezar.classList.remove('hide')
      } else {
        btnEmpezar.classList.add('hide')
      }
    }
    generarSecuencia() {
      this.secuencia = new Array(ULTIMO_NIVEL).fill(0).map(n => Math.floor(Math.random() * 4))
    }
    siguienteNivel() {
      this.subnivel = 1
      this.nombreAtributo = 'valor'
      this.iluminarSecuencia()
      this.agregarEventosClick()

    }
    transformarNumeroAColor(numero) {
      switch (numero) {
        case 0:
          return 'celeste'
        case 1:
          return 'violeta'
        case 2:
          return 'naranja'
        case 3:
          return 'verde'

       }
    }

  transformarColorANumero(color) {
    switch (color) {
      case 'celeste':
        return 0
      case 'violeta':
        return 1
      case 'naranja':
        return 2
      case 'verde':
        return 3
      }
    }

    iluminarSecuencia() {
      for (let i = 0; i < this.nivel; i++) {
        const color = this.transformarNumeroAColor(this.secuencia[i])
        setTimeout(() => this.iluminarColor(color), 1000 * i)

      }
    }

    iluminarColor(color) {
      this.colores[color].classList.add('light')
      setTimeout(() => this.apagarColor(color), 350)
    }
    apagarColor(color) {
      this.colores[color].classList.remove('light')
    }
    agregarEventosClick() {
      this.colores.celeste.addEventListener('click', this.elegirColor)
      this.colores.verde.addEventListener('click', this.elegirColor)
      this.colores.violeta.addEventListener('click', this.elegirColor)
      this.colores.naranja.addEventListener('click', this.elegirColor)
    }

    eliminarEventosClick() {
      this.colores.celeste.removeEventListener('click', this.elegirColor)
      this.colores.verde.removeEventListener('click', this.elegirColor)
      this.colores.violeta.removeEventListener('click', this.elegirColor)
      this.colores.naranja.removeEventListener('click', this.elegirColor)

    }


    elegirColor (ev) {
      const nombreColor = ev.target.dataset.color
      const numeroColor = this.transformarColorANumero(nombreColor)
      this.iluminarColor(nombreColor)
      if (numeroColor === this.secuencia[this.subnivel]) {
        this.subnivel++
        if (this.subnivel === this.nivel) {
          this.nivel++
          this.eliminarEventosClick()
          if (this.nivel === (ULTIMO_NIVEL + 1)) {
          } else {
            setTimeout(this.siguienteNivel, 500)
          }
        }
      } else {
        this.perdioElJuego()
      }
    }
    ganoElJuego() {
      swal ('Platzi', 'Felicitaciones, ganaste el juego!', 'success')
      .then(this.inicializar)
      }
    }

    perdioElJuego() {
      swal ('Platzi', 'Perdiste! :(', 'error')
      .then(() => {
        this.eliminarEventosClick()
        this.inicializar()
      })
  }

  function empezarJuego() {
    window.juego = new Juego()
  }
</script>

</body>
</html>

Excelente curso, muy interesante el tema de Callbacks y su respectiva solucion con Promise (Y)

Excelente !

Leeejos, el mejor curso que hice en platzi!

**var ** es un variable global que podemos utilizar en cualquier parte de nuestra clase:
**let ** también es una variable pero se limita su uso en tan solo el bloque donde fue declarado.
const un una constante que no puede ser modificado su valor,
en arreglo solo se puede agregar elementos pero no reasignar un valor

¿Cuando es conveniente usar var?

Excelente explicación, lo entendí a la perfección 🙌🏻

var para uso globlal
let para uso local

Buena explicación!

Lo ideal es utilizar let, no var, si debemos reasignar la variable. Si no hay que reasignarla, lo mejor es definirla con const. Con esto, evitaremos bugs

Vengo del Java tradicional, básicamente let es para declarar la variable como local de un bloque de código, como en comentarios anteriores mencionaron, considero que esta clase deberían moverla hacia las primeras, mucho del código en el proyecto hubiera tenido más sentido para mi si hubiera sabido que las variables necesitan ser declaradas como let para que sean locales.

Consejo: Reducir al mínimo el alcance de las variables.

Ahora no escriban su código solo con let, solo tengan en cuenta en cuales casos les sirve más una o la otra.

algo que tenemos que tomar en cuenta es que si nosotros asignamos var y luego let prevalecera la asignación var

for (var i=0; i<10; i++) {
console.log(i)
}

    console.log(`El valor final de i es ${i}`)

    for (let i=0; i<10; i++) {
        console.log(i)
    }

    console.log(`El valor final de i es ${i}`)        
<code>

Se necesitaba esta clase (Muchisimas gracias)

Está claro, a estas alturas del curso es conveniente usar let y const para evitar problemas y ser más profesionales.

El uso de let te ayuda a realizar tus declaraciones en el lugar correcto.

lo que entendí de esta clase cuando asignamos con var las variables queda de manera global en todo el programa. Pero puede suceder que algún momento cambio su valor, en el trascurso de del programa, cuando declaramos una variable con** let **solo queda declarada dentro de la funcion , for o clase donde la declaremos asi para la medas, parte del código no existe esa variable y así nose puede cambiar su valor tan fácil, y con const puede ser una variable global pero no se puede cambiar el valor de la variable después de declarada

Excelente explicacion, como dice el profesor es mejor usar let antes que var y const antes que let.

// Usar let antes de var y const antes de let

// var, en el ejemplo se genera lo que se conoce como hoisting

function esMayorDeEdad(persona){
  if(persona.edad >= 18){
    var mensaje = 'Es mayor de edad';
  } else {
    var mensaje = 'Es menor de edad';
  }
  console.log(mensaje);
}

esMayorDeEdad(persona1);


// let, reduce el alcance al bloque de codigo donde se usa

function esMayorDeEdad(persona){
  let mensaje;
  if(persona.edad >= 18){
    mensaje = 'Es mayor de edad';
  } else {
    mensaje = 'Es menor de edad';
  }
  console.log(mensaje);
}

esMayorDeEdad(persona1);


/* const, se comporta similar a let pero su diferencia es que su valor no se puede reasignar
lo que se puede hacer es modificar los valores que contenga, por ejemplo hacer push a un array
*/
function esMayorDeEdad(persona){
  let mensaje;
  const MAYORIA_DE_EDAD = 18;
  if(persona.edad >= MAYORIA_DE_EDAD){
    mensaje = 'Es mayor de edad';
  } else {
    mensaje = 'Es menor de edad';
  }
  console.log(mensaje);
}

esMayorDeEdad(persona1);

les dejo este aporte que estoy seguro que les va a funcionar en la consola del inspector de elementos, luego pregúntense ¿ que pasa si no escribimos var por ningún lado del código ? prueben y se darán cuenta de que aunque no estén declaradas son procesadas antes de la ejecución del código.

javi = {
  nombre: 'Javi',
  apellido: 'Romero',
  edad: 19
}

function esMayorDeEdad(persona) {
  if (persona.edad >= 18) {
     mensaje = 'es mayor de edad'
  }else {
     mensaje = 'es menor de edad'
  }

  console.log(mensaje)
}

esMayorDeEdad(javi)

diferencia entre Let, Var y Const. en MDN

Lo mejor es no utilizar var, si debemos reasignarla se puede usar let, pero si va a ser constante entonces usemos const.

var name = 'Valor'
let nameLet = 'Valor'
const NAME_CONST = 'Valor'

Var

JS define al principio cuáles son las varianles Var que se encuentran en el archivo, y sin importar que no tenga un valor definido, este ya está declarado.

function esMayotDeEdad(p) {
 // JS declara las variables antes. 
 // var mensaje, mensaje2
 if(p.edad >= 18) {
  var mensaje = 'Es mayor de edad'
 } else {
  var mensaje = 'Es menor de edad'
  var mensaje2 = 'Este es otro mensaje'
 }
 console.log(mensaje)
 console.log(mensaje2)
}

esMayotDeEdad(sacha)

Let

En JS, el alcance de una variable declarada con let es dónde se encuentre declarada. Esta variable reduce su alcance solamente al bloque dónde este siendo utilizada.

function esMayotDeEdad(p) {
 let mensaje
 if(p.edad >= 18) {
  mensaje = 'Es mayor de edad'
 } else {
  mensaje = 'Es menor de edad'
 }
 console.log(mensaje)
}

esMayotDeEdad(sacha)

Const

Este se comporta parecido a let, solo que no podemos volver a asignar un valor nuevo a la misma variable. Si tratamos reasignar una variable const la consola nos lanzara un error.

function esMayotDeEdad(p) {
 let mensaje
const MAYORIA_DE_EDAD = 18
 if(p.edad >= MAYORIA_DE_EDAD) {
  mensaje = 'Es mayor de edad'
 } else {
  mensaje = 'Es menor de edad'
 }
 console.log(mensaje)
}

esMayotDeEdad(sacha)

Si hacemos un arrays con const no vamos a poder reasignar la variable a otro valor, pero si vamos a añadir un nuevo elemento a través del método push.

const numbers = [1,2,3,4,5,6,7]
~~numbers = [1,2]~~

numbers.push(8)
// numbers > [1,2,3,4,5,6,7,8]
<h3>Ciclo FOR</h3>

Recuerda que let solo tiene un alcance dónde esta se encuentra declarada a diferencia de var.

for (var i = 0; i < 10; i++) {
 console.log(i)
}

console.log(`El ciclo FOR es de ${i}`)
// El ciclo FOR es de 10

for (let i = 0; i < 10; i++) {
 console.log(i)
}

console.log(`El ciclo FOR es de ${i}`)
// Variable i no está definida

Lo mejor es no utilizar var y solo utilizar let, y si nunca tenemos que reasignar la variable utlicemos const

var: una vez que existe pues seguirá existiendo en todo el codigo
let: solo vivirá en su localidad. fuera de ahí ya no existe más.
const: para valores que serán constantes y para objetos que se pueden modificar pero no reasignar denuevo

Hice el ejercicio del for con el let y si me la toma valida, ósea que al parecer, el valor de let ahora ya no solo se queda en su bloque de código

este video de Sacha en su canal de YouTube Sobre Var,Let y Const es Sensacional
https://www.youtube.com/watch?v=bvkY9ey83yY

Que buen curso, los temas de asincronismo se pasaron algo superficiales, pero hay un curso especifico de ello, para ya programadores que busquen incursionar en web o específicamente en JavaScript muy recomendado, mas que el básico.

excelente clase!

Var realmente sirve para mantener en memoria una variable y let la elimina una vez deja de utilizarse.

Porque no pone ; en el codigo :?

ahora si me queda muchísimo mas claro , grande Sacha 😄

Importante información.

Exelente Clase
Comparto mis apuntes

<script>
    var jos = {
        nombre:'Josadec',
        apellido:'Pedraza',
        edad: 36
    }
    const EDAD = 18
    //Usando var para declarar variables
    function var_mayorDeEdad(persona){
      var mensaje //hosting se declara la variable vacia arriba del codigo 
      if(persona.edad >= EDAD){
         mensaje = `${persona.nombre} ${persona.apellido} Es Mayor de Edad Tiene: ${persona.edad} años`
      }else{
         mensaje = `${persona.nombre} ${persona.apellido} Es Menor de Edad Tiene: ${persona.edad} años`
      }
    console.log(mensaje)//termina la variable
    }
    //Usando let para declarar variables
    function let_mayorDeEdad(persona){
      let mensaje_let //en let funciona 
      if(persona.edad >= EDAD){
         mensaje_let = `${persona.nombre} ${persona.apellido} Es Mayor de Edad Tiene: ${persona.edad} años`
      }else{
         mensaje_let = `${persona.nombre} ${persona.apellido} Es Menor de Edad Tiene: ${persona.edad} años`
      }
      console.log(mensaje_let)
    }

    //Usando const para declarar variables
    function const_mayorDeEdad(persona){
      let mensaje_const
      const MAYORIA_DE_EDAD = 18
      //MAYORIA_DE_EDAD = 21
      if(persona.edad >= MAYORIA_DE_EDAD){
        mensaje_const = `${persona.nombre} ${persona.apellido} Es Mayor de Edad Tiene: ${persona.edad} años`
      }else{
        mensaje_const = `${persona.nombre} ${persona.apellido} Es Menor de Edad Tiene: ${persona.edad} años`
      }
      console.log(mensaje_const)
    }

    var_mayorDeEdad(jos)
    let_mayorDeEdad(jos)
    const_mayorDeEdad(jos)

      for(let i = 0; i < 10; i++){
        console.log(i)
      }
      console.log(`termino el siclo for, el valor de i es ${i}`)



    const numeros = [1,2,3,4,5,7] // no se puede hacer modificar el asignar el array a otro valor numeros = [1,2]
    numeros.push(8,9,10) //aumentar el Array despues declarado

  </script>

Reducir al mínimo los alcances de las variables.

Var realmente sirve para mantener en memoria una variable y let la elimina una vez deja de utilizarse.

muy bueno el curso!! me enseño y aclaro muchas cosas

IDEAS CLAVES

=> Reduce al minimo el alcance de cada una de las variables a menos que tenga un objetivo concreto
=> ¿por que?
=> porque evitaremos bugs como que una variable tenga un valor por defecto cuando no deberia tener
=> Porque el bloque de codigo no afectara otros bloques de codigo directamente

=> utiliza let por defecto si tienes que reasignar la variable
=> si nunca es necesario reasginar usa const
=> ¿ Evitamos var ?

Entendido

Muy buena explicación.

var, let y const

buenas clases

<code>

código JS variables —> NOTA: utilizar let antes que var y si vamos a tener una variable que solo se define una vez y no se necesita volver a modificar utilizar const

var jeison={

    nombre: 'Jeison',
    apellidod: 'Ruiz',
    edad: 22

}


function esMayordeEdad(persona){
    var mensaje
    //let mensaje
    const MAYORIA_DE_EDAD =18
   if(persona.edad > MAYORIA_DE_EDAD){
     mensaje = 'Es mayor de edad'
   }else{
    mensaje = 'Es menor de edad'
   }
   console.log(mensaje)

}

esMayordeEdad(jeison)

for( let i=0; i<10;i++){
    console.log(i)
}
console.log(`Termino el for y el valor de i es: ${i}`)

Excelente material , tenia un poco de dudas sobre esto

Le diré adiós al var

Excelente curso.

NO es por nada…pero muy bien esplicado

A mi me gusta usar el ‘let’ como en matematicas. Cuando dices por ejemplo: let y = x^2, solve for x. Y la ‘y’ solo es igual a x^2 dentro de la pregunta. Es como que se le asigna a la y un valor momentaneamente.

Y const es por ejemplo el numero e o pi, que siempre son los mismos

alguien me dice como hace para comentar varias lineas a la vez??
siempre lo hace y lo veo muy util … pero nunca dijo como hacerlo …
diganme ese comando … 😄

Genail el curso, profesor sabe del tema, bien por plazi

Lo mejor entonces es priorizar el uso de const, luego de let, y si no hay opción usamos var

Let a diferencia de var reduce su alcance solamente al bloque de código donde es utilizado

Excelente curso, muy claro

Muy claro!

var persona = {
	nombre: "Felipe",
	apellido: "Smitham",
    altura: 1.7,
    edad: 18
};



function es_mayor_de_edad(persona) {
    let mensaje;
    const MAYORIA_DE_EDAD = 18;

	if (persona.edad >= MAYORIA_DE_EDAD) {
		mensaje = "es mayor de edad";
	} else {
		mensaje = "es menor de edad";
	}
	console.log(mensaje);
}

//es_mayor_de_edad(persona);

for (let i = 0; i < 10; i++) {
    console.log(i)
}
console.log(`Termino el for ${i}`)

muy bueno el curso

Excelente curso he aprendido algunas cosas que no tenia claro

Genial! Siempre tuve estas dudas!

Gracias por las recomendaciones.

Gracias, mejores ejemplos para aclarar a const, let y var no se pudieron dar, me queda claro y reconozco la,importancia que tiene esto para mi código!!

Muy buena aclaración .

wow

Muchas Gracias Sache, excelente curso

Muy buena la explicación

¿Qué es mejor utilizar: var, let o const?


console.log(miguel.edad);
var fernando = {
  nombre:'Fernando',
  apellido: 'Huaman',
  edad:18
}
function esMayorEdad(persona) {
  const MAYORIA_DE_EDAD = 18
  let mensaje
  if(persona.edad >= MAYORIA_DE_EDAD){
    mensaje = 'Es mayor de edad'
  } else {
    mensaje = 'Es menor de edad'
  }
  console.log(mensaje)
}

esMayorEdad(fernando)

for (var i = 0; i < 10; i++) {
  console.log(i)
}
console.log(`termino el for, el valor de i es ${i}`);```

Excelente clase Bonus, gracias por aclarar los conceptos.

Muy buen curso, muy completo!

Ahora si entendí la diferencias!
Var: Alcance global
Let: Alcance unicamente en el bloque de codigo en que se declaró
Const: Similar a Let pero esta variable nunca podrá ser modificada

Mucho más claro, Gracias!!

““var”” es la manera más antigua de declarar variables. No es muy estricta en cuanto al alcance, ya que al declarar variables de esta forma, dichas variables podrán ser accedidas, e incluso modificaddas, tanto dentro como fuera de los bloques internos en una función.

Con ““let”” por otra parte, el alcance se reduce al bloque (las llaves) en el cual la variable fue declarada. Fuera de este bloque la variable no existe. Una vez declarada la variable con let, no se puede volver a declarar con en ninguna otra parte de la función.