Uso correcto de var, let y const

Clase 4 de 24 • Curso de Clean Code y Buenas Prácticas con JavaScript

LEONARD CUENCA

student•

Clase 4: Uso correcto de var, let y const

Notas

ECMAScript 6 2015 -> introducjo let y const
var -> no respeta ambitos de bloque
let -> si respeta ambitos de bloque
const -> valores que no cambian NUNCA pero pueden cambiar por referencia, pero la constante en sí no puede ser reasignada

// var
var age = 28;
{
  console.log("Valor dentro del bloque", age); // 28
  var age = 29;
}

console.log("Valor fuera del bloque", age); // 29
age = age * 2;
console.log("Valor cambiado", age); // 58

// let
let age = 28;
{
  console.log("Valor dentro del bloque", age); // error
  let age = 29;
}

console.log("Valor fuera del bloque", age); // 28
age = age * 2;
console.log("Valor cambiado", age); // 56

// const
const PI = 3.14159;
PI = PI * 2; // error
console.log("Valor cambiado", PI); // no se ejecuta

Maria Alejandra Luna Tito

student•

const tmb respeta el ambito de bloque, lo que no se es si es recomendable repetir el nombre de la constante en un bloque

´´´js

const age = 28;console.log("valor: ", age); { const age = 30; console.log("valor: ", age);} console.log("valor: ", age);age = age * 2; console.log("valor: ", age);

´´´

Kevin Ivan Garcia Hernandez

student•

Es bueno señalar que en let respeta el ámbito de bloque, pero esto no evita que no se pueda acceder a una variable letra desde dentro de un bloque. El error que lanza aquí es que hay una variable let con el mismo nombre dentro de ese bloque, pero si la quitamos, el primer console.log podría acceder a la primer variable age que se declara en el ámbito global. Los bloques definidos por los corchetes pueden acceder a variables externas si no cuentan con una del mismo nombre, pero desde afuera no se puede acceder a las variables declaradas o inicializadas dentro de los bloques

Carina Payleman

student•

Recomiendo este curso breve donde se explica muy clarito también las diferencias entre "var", "let" y "const" y las características a profundidad de c/u: https://platzi.com/cursos/javascript-closures-scope/

Paulina Ignacio Sanvicente

student•

var - no respeta ambitos de bloque

let - si respeta ambitos de bloque

const - valores que no cambian NUNCA

Billy Torres

student•

Es importante recordar que los valores almacenados en una constante pueden cambiar por referencia, pero la constante en sí no puede ser reasignada. Ojo con eso, que es pregunta tipica de entrevistas

Maday Choque

student•

let age = 28
{    
    console.log('valor dentro del bloque', age);
    let age = 29;
}

// sale ReferenceError: Cannot access 'age' before initialization

El primer console.log no imprime el valor 28 porque ocurre un hoisting en JavaScript. El hoisting es un comportamiento donde las declaraciones de variables (pero no las asignaciones) se mueven al principio del ámbito en el que se encuentran. Debido al hoisting, la declaración de la segunda variable age se mueve al principio del bloque, por lo que cuando se ejecuta la línea 2 del console.log dentro del bloque, la variable age todavía no ha sido asignada y su valor es undefined

Alan Dell Oso

student•

Me parece importante aclarar que en el ejemplo de let, cuando se llama a la variable variable global dentro del bloque y da error, es porque se está declarando otra variable con el mismo nombre dentro del bloque (después del console.log). Podríamos tranquilamente acceder al valor de una variable let declarada globalmente desde adentro de un bloque, siempre y cuando no volvamos a declararla dentro del mismo.

Sandra Rosa Arroyo Paredes

student•

Exacto! Entrega un referenceError para el caso de let y const, ya que no se inizializan. En el caso de var entregaria undefined, ya que a estas su kas inicializa.

Oscar Agustin Flores Arana

student•

El valor dentro del bloque será siempre el que se le asigne el valor fuera del bloque imprimirá el valor del primer let y como resultado del valor cambiado será el producto de 28

Brandon Lee Aguero Fernandez

student•

Hola, veo que estas respondiendo a los ejercicios de clase, creo. Si es así, esto debería de estar en la sección de APORTES de la clase.

Alex Condori Condori

student•

Alguien sabe la tipografia o theme que esta usando en el vscode??

Alex Camacho

teacher•

Es una variante de AYU con Victor Mono como fuente.

Reinaldo Mendoza

student•

Ya decia yo que me parecia ayu

Irving Juárez

student•

let y var, aunque parezcan muy diferentes, realmente no lo son. Son exactamente lo mismo, solo que el engine de JS las trata de manera distinta. . Toma en cuenta los siguientes bloques de código

{
  console.log("Value inside the block:", age); // Error ❌
  let age = 22;
}

{
  console.log("Value inside the block:", age); // undefined
  var age = 22;
}

Lo que pasa por debajo, es que cada que se crea un nuevo "bloque", se crea un nuevo contexto de ejecución, justo como el que se crea de manera global. Entonces, este contexto lo que hace es primero, agregar todas las variables y funciones en la memoria, por esta razón ocurre el hoisting. . En el ejemplo de arriba, en ambos contextos de ejecución, la variable "age" existe en memoria desde antes de que se ejecute cualquier línea de código. A esta variable se le da un valor de "undefined". Sin embargo, el engine de JS trata a las variables de manera distinta, según si fueron declaradas con let o con var. . En case de que fueron declaradas con let, el engine de JS no deja que se pueda acceder a esta variable antes de que haya sido declarada explicitamente en el código, por eso nos da un error. . En el caso de var, si nos deja acceder a esta variable, que es "undefined", por lo que no nos da ningún tipo de error.

Karen Benites Segura

student•

Quisiera dar una pequeña aclaración, ya que al menos a mí me ayudó a entender mejor. "Declarar explícitamente" lo entiendo como escribir directamente:

 let myVariable;
```Independientemente de si asignamos un valor o no a esa variable en esa línea. Recordemos que podría simplemente declarar una variable y asignarle un valor después. Si hacemos eso con **let**, JS por defecto interpreta el valor de esa variable como "no inicializado" si se declara con **let** o **const**.

Si se declara con var, JS le asigna por defecto **undefined** a esa variable.

Entonces, cuando ocurre el hosting dentro del bloque, JS mueve SÓLO las declaraciones de las variables arriba del bloque, no mueve sus valores. Entonces,&#x20;

```js
{
  console.log('age');
  let age =29;
}
```es lo mismo que decir:

```js
{
  let age;
  console.log(age);
  age = 29;
}
```Asi, al ejecutar ese código, js lo ejecuta por orden; y en la linea 3, age no tiene ningun valor asignado y por lo tanto para JS es "no inicializado". Por eso sale el error.

Ahora, si se hace con var:

```js
{
  console.log(age);
  var age =29;
}
```seria lo mismo que:

```js
{
  var age; // age = undefined
  console.log(age);
  age =28;
}
```Asi, al ejecutar la linea 3, age si tiene un valor por defecto: undefined. Por eso, se imprime el valor sin problemas.

Israel Blas

student•

Como recomendaciones:

Nunca usen var.
Usen let cuando vayan a redeclarar el valor en la variable.
Usen const para constantes, cuando no es necesario redeclarar la variable. Por ejemplo: Al usar librerías, al crear funciones u objetos, etc.

Andrés Buelvas

student•

Como var no tiene en cuentas los bloques o scopes, en este ejemplo imprime: 28 29 58 Primer comment en un curso 😁

Stiven Trujillo

student•

Que tipografia utilizas en el editor?

Johan Sebastian

student•

// Uso de let
let age1 = 28

{
    // Este console log imprime error.
    console.log('valor dentro del bloque', age1);
    let age1 = 29
}

// Este consolo log imprime 28.
console.log('valor fuera del bloque', age1)
age1 = age1 * 2;

// Este console log imprime 56
console.log('valor cambiado', age1)

Johan Sebastian

student•

var age = 28
{
  // Este console log imprime 28.
  console.log('valor dentro del bloque', age);
  var age = 29
}
// Este consolo log imprime 29
console.log('valor fuera del bloque', age)
age = age * 2;
// Este console log imprime 58
console.log('valor cambiado', age)

Oscar Agustin Flores Arana

student•

¿Por qué, si la función dice "crearGato"? al asignarle otros parámetros como se ve en el código, el sistema responde y no genera error function crearGato(nombre, edad) { var perro = { nombre: nombre, edad: edad, meow: function() { return "Meow!"; } }; return perro; }

Francisco Ponce

student•

Es posible asignarle cualquier nombre de parámetro a una función en JavaScript, independientemente del nombre de la función en sí. En el código que proporcionaste, la función se llama "crearGato", pero los parámetros que recibe son "nombre" y "edad", lo que podría generar cierta confusión.

En este caso, la función "crearGato" simplemente crea un objeto "perro" (por qué quieres un perro si tu función está creando un gato) que tiene una propiedad "nombre" y "edad", y un método "meow" que retorna "Meow!". Aunque el nombre de la función es "crearGato", esto no afecta la lógica del código.

Por lo tanto, asignar los parámetros "nombre" y "edad" a la función "crearGato" no generará un error, ya que son simplemente variables que se utilizan para definir las propiedades del objeto "perro" que se está creando dentro de la función. Sin embargo, es una buena práctica nombrar los parámetros de una función de manera coherente con su propósito, para que sea más fácil de entender y mantener el código en el futuro.

El código no lo haces para ti, sino para ser leído por los demás. El código como lo tienes va a generar más preguntas por tu futuro equipo.

David Elias Gatica Morales

student•

Mi suposición es que el primero console imprime 28, el segundo 28 tambien y el tercero el doble de 28

Kyb3r Cipher

student•

Imprimira:

Ana Rotela Cabrera

student•

Ejemplo de uso de var - age

Miguel Enrique Velásquez Millán

student•

Pensé que el console.log de la línea 5 no daría error y mostraría simplemente 28 ya que, si bien estamos declarando una variable age en la línea de debajo... La variable age de la línea 2 está declarada de forma global por lo que cualquiera debería poder usarla incluso si se encuentra dentro de otro bloque de código.

Por lo visto, si en el bloque de código estamos declarando una nueva variable con el mismo nombre que una variable global de fuera, dentro del bloque de código la que se usa es la que se declara dentro incluso cuando la usamos antes de la declaración en sí misma.

En otras palabras, si el código no tuviera la declaración de la variable age en la línea 6, no daría error y se imprimiría 28, pero como la tiene, ese bloque en concreto asume que el age que se está llamando en el console.log es la declarada en la línea de abajo y no el age global de fuera.

Daniel Andres Rojas Paredes

student•

el ambito de bloque es lomismo que o entra dentro de la categoria de scope? o contexto? porque como lo entendi cuando estaba entendiendo el this en js es que var es para el contexto global y let para los scope locales, sin embargo habia entendido(la coscina del codigo se llama el canal de youtube) que estos contextos eran creados con el llamado o declaracion de una funcion, no con la instanciacion de objetos, pero lo planteado en esta clase me hace caer en cuenta que ambos, objetos y funciones son "delimitados " por {llaves} de ahi mi duda . el ambito de bloque es lomismo que o entra dentro de la categoria de scope? o contexto?

// var
var age = 28;
{
  console.log("Valor dentro del bloque", age); // 28
  var age = 29;
}

console.log("Valor fuera del bloque", age); // 29
age = age * 2;
console.log("Valor cambiado", age); // 58

// let
let age = 28;
{
  console.log("Valor dentro del bloque", age); // error
  let age = 29;
}

console.log("Valor fuera del bloque", age); // 28
age = age * 2;
console.log("Valor cambiado", age); // 56

// const
const PI = 3.14159;
PI = PI * 2; // error
console.log("Valor cambiado", PI); // no se ejecuta

 let myVariable;
```Independientemente de si asignamos un valor o no a esa variable en esa línea. Recordemos que podría simplemente declarar una variable y asignarle un valor después. Si hacemos eso con **let**, JS por defecto interpreta el valor de esa variable como "no inicializado" si se declara con **let** o **const**.

Si se declara con var, JS le asigna por defecto **undefined** a esa variable.

Entonces, cuando ocurre el hosting dentro del bloque, JS mueve SÓLO las declaraciones de las variables arriba del bloque, no mueve sus valores. Entonces,&#x20;

```js
{
  console.log('age');
  let age =29;
}
```es lo mismo que decir:

```js
{
  let age;
  console.log(age);
  age = 29;
}
```Asi, al ejecutar ese código, js lo ejecuta por orden; y en la linea 3, age no tiene ningun valor asignado y por lo tanto para JS es "no inicializado". Por eso sale el error.

Ahora, si se hace con var:

```js
{
  console.log(age);
  var age =29;
}
```seria lo mismo que:

```js
{
  var age; // age = undefined
  console.log(age);
  age =28;
}
```Asi, al ejecutar la linea 3, age si tiene un valor por defecto: undefined. Por eso, se imprime el valor sin problemas.

// Uso de let
let age1 = 28

{
    // Este console log imprime error.
    console.log('valor dentro del bloque', age1);
    let age1 = 29
}

// Este consolo log imprime 28.
console.log('valor fuera del bloque', age1)
age1 = age1 * 2;

// Este console log imprime 56
console.log('valor cambiado', age1)

var age = 28
{
  // Este console log imprime 28.
  console.log('valor dentro del bloque', age);
  var age = 29
}
// Este consolo log imprime 29
console.log('valor fuera del bloque', age)
age = age * 2;
// Este console log imprime 58
console.log('valor cambiado', age)

Uso correcto de var, let y const

Introducción al Clean Code

Deuda técnica y refactorización de código

Reglas del diseño simple

Qué es Clean Code

Nombre y uso de las variables

Uso correcto de var, let y const

Reglas para la nomenclatura

Cómo nombrar según el tipo de dato

Nombres de Variables y Funciones Correctos en JavaScript

Ámbito de las variables

Ámbito global

Ámbito local o de función

Ámbito de bloque

Ámbito estático

Hoisting

Funciones

Declaración y expresión de funciones

Parámetros y argumentos

Funciones de flecha y el this

Clases

POO con ES6 (constructores, métodos y herencia)

Herencia en JavaScript

Tamaño reducido (responsabilidad única)

Organización

Optimizaciones

Cuándo usar comentarios

Formato coherente (codear en equipos)

Principio DRY

Tipos de Algoritmos y Complejidad Big O en JavaScript

Cierre

Sigue aprendiendo JavaScript