No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Uso correcto de var, let y const

4/24
Recursos

Aportes 24

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

Recomiendo este curso breve donde se explica muy clarito tambi茅n las diferencias entre 鈥渧ar鈥, 鈥渓et鈥 y 鈥渃onst鈥 y las caracter铆sticas a profundidad de c/u: https://platzi.com/cursos/javascript-closures-scope/

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

// sale ReferenceError: Cannot access 鈥榓ge鈥 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

var - no respeta ambitos de bloque

let - si respeta ambitos de bloque

const - valores que no cambian NUNCA

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
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.

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

//var => No respeta 谩mbitos de bloque y se puede volver a declarar
var age1 = 28

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

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

//let => Respeta 谩mbitos de bloque y no se puede volver a declarar
let age2 = 28

{
    console.log("Valor dentro del bloque ", age2); //Cannot access 'age2' before initialization
    let age2 = 29
}

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


//const => Respeta 谩mbitos de bloque y no puede cambiar de valor
const PI = 3.14159;
PI = PI * 2; // Assignment to constant variable.
console.log("Valor cambiado", PI); // no se ejecuta
28
29
58

\## Que es el scope ES el alcance que determina la accesibilidad de las variables. \#### Tipos de scope \- \[\[Global scope]] \- \[\[Function scope]] \- \[\[Block scope]] \### JavaScript Variables En JavaScript, los objetos y las funciones tambi茅n son variables EL \_scope\_ determina la accesibilidad de variables, objetos y funciones desde diferentes partes del c贸digo. ## Block scope. let and const have a block scope ### assignation and declaration La re-declaraci贸n es volver a declarar una variable, y la reassignment es volver a asignar un valor. \- Una variable declarada con聽`var`聽puede ser re-declarada y reasignada. \- Una variable declarada con聽`let`聽puede ser reasignada, pero no re-declarada. \- Una variable declarada con聽`const`聽no puede ser re-declarada, ni reasignada. Su declaraci贸n y asignaci贸n debe ser en una l铆nea, caso contrario habr谩 un error. Existe un curso de聽[ECMAScript 6+](https://platzi.com/cursos/ecmascript-6/)聽para que descubras las nuevas caracter铆sticas que agregan al lenguaje. ## Que es un closure Tienes una closure cuando una function cualquiera accede a una variable fuera de su contexto y la recuerda un closure Permite acceder al ambit de una function exterior desde una function interior. En JavaScript, los closures de crean cada vez que una function es creada. A diferencia de lo otros conceptos los closures no son siempre utilizados. ```js // lexical const myGlobal = 0; function myFunction(){ const myNumber = 1; console.log(myGlobal) function parent(){ // intern Function const inner = 2; console.log(myNumber,myGlobal) function child(){ console.log( inner, myNumber, myGlobal) } return child(); } return parent(); } myFunction() ```### Asi seria un uso practico de closures ```js function moneyBox(){ let saveCoins = 0; function countCoins(coins){ saveCoins += coins; console.log(`MoneyBox: ${saveCoins}`) } return countCoins; } const myMoneyBox = moneyBox(); myMoneyBox(5); myMoneyBox(30); // output = 35 ```**Me canse de editar esto solo tomen el curso de closures y scope de javascript. si aun no lo an tomado aunque tecnicamente ya debieron hacerlo.**
summary don't use (var)



La principal caracter铆stica de var es que tiene un alcance de funci贸n, lo que significa que su valor puede filtrarse fuera de los bloques de c贸digo donde se declar贸. Esto podr铆a causar problemas de legibilidad y mantenimiento.

Usa let cuando quieras declarar una variable que puede cambiar su valor.
Usa const cuando quieras declarar una constante con un valor que no cambiar谩.
Evita usar var en favor de let y const, ya que let es m谩s seguro y predecible.

<code> 

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 鈥渂loque鈥, 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 鈥渁ge鈥 existe en memoria desde antes de que se ejecute cualquier l铆nea de c贸digo. A esta variable se le da un valor de 鈥渦ndefined鈥. 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 鈥渦ndefined鈥, por lo que no nos da ning煤n tipo de error.

28
29
58

Un tips aprendido en el curso de TypeScript es qu茅, se puede activar el analizador de c贸digo est谩tico en JavaScript puro colocando en el inicio del script js el siguiente c贸digo:

//@ts-check

Esto nos permitir谩 detectar errores comunes y dificiles de visualizar a simple vista antes de subir nuestro c贸digo al server.

En el ejercicio se imprime:

Valor dentro del bloque 28
Valor fuera del bloque 29
Valor cambiado 58

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.

Vaya no sabia que usando clg directamente imprimia el console.log en Vscode鈥 el dia ya valio la pena.

28
29
58

Valor dento del bloque 28
Valor fuera del bloque 29
Valor cambbiado 58

Imprime:

  • Valor dentro del bloque 28
  • Valor fuera del bloque 29
  • Valor cambiado 58