Con ES2015 (ES6) aparecieron muchas características nuevas y brillantes. Y ahora, desde 2020, se supone que muchos desarrolladores de JavaScript se han familiarizado con estas funciones y han comenzado a utilizarlas.
Si bien esta suposición puede ser parcialmente cierta, aún es posible que algunas de estas características sigan siendo un misterio para algunos desarrolladores.
Una de las características que vino con ES6 es la adición de lety const, que se puede usar para la declaración de variables. La pregunta es, ¿qué los hace diferentes de los buenos varque hemos estado usando? Si aún no tienes claro esto, este artículo es para ti.
En este artículo, vamos a discutir var, lety const con respecto a su alcance, el uso y la elevación. Mientras lees, toma nota de las diferencias entre ellos que señalaré.
Var
Antes de la llegada de ES6, imperaban las vardeclaraciones. Sin varembargo, existen problemas asociados con las variables declaradas con . Por eso fue necesario que surgieran nuevas formas de declarar variables. Primero, comprendamos varmás antes de discutir esos temas.
Alcance de var
Alcance esencialmente significa dónde estas variables están disponibles para su uso. varlas declaraciones tienen un alcance global o función / alcance local.
El alcance es global cuando una varvariable se declara fuera de una función. Esto significa que cualquier variable que se declare varfuera de un bloque de funciones está disponible para su uso en toda la ventana.
vares una función dentro del ámbito cuando se declara dentro de una función. Esto significa que está disponible y solo se puede acceder a él dentro de esa función.
Para comprender mejor, mire el ejemplo a continuación.
var greeter = "hey hi"; function newFunction() { var hello = "hello"; } Aquí, greetertiene un alcance global porque existe fuera de una función mientras que hellotiene un alcance de función. Entonces no podemos acceder a la variable hellofuera de una función. Entonces, si hacemos esto:
var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined Obtendremos un error que se debe a que hellono está disponible fuera de la función.
Las variables var se pueden volver a declarar y actualizar
Esto significa que podemos hacer esto dentro del mismo alcance y no obtendremos un error.
var greeter = "hey hi"; var greeter = "say Hello instead"; y esto tambien
var greeter = "hey hi"; greeter = "say Hello instead"; Izado de var
Hoisting es un mecanismo de JavaScript donde las variables y declaraciones de funciones se mueven a la parte superior de su alcance antes de la ejecución del código. Esto significa que si hacemos esto:
console.log (greeter); var greeter = "say hello" se interpreta así:
var greeter; console.log(greeter); // greeter is undefined greeter = "say hello" Entonces, las varvariables se elevan a la parte superior de su alcance y se inicializan con un valor de undefined.
Problema con var
Hay una debilidad que acompaña var. Usaré el siguiente ejemplo para explicar:
var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" Entonces, dado que times > 3devuelve verdadero, greeterse redefine en "say Hello instead". Si bien esto no es un problema si desea greeterser redefinido a sabiendas , se convierte en un problema cuando no se da cuenta de que una variable greeterya se ha definido antes.
Si lo ha utilizado greeteren otras partes de su código, es posible que se sorprenda del resultado que pueda obtener. Es probable que esto cause muchos errores en su código. Por eso lety constson necesarios.
Dejar
letahora se prefiere para la declaración de variables. No es ninguna sorpresa, ya que se trata de una mejora de las vardeclaraciones. También resuelve el problema varque acabamos de cubrir. Consideremos por qué es así.
let tiene alcance de bloque
Un bloque es un fragmento de código delimitado por {}. Un bloque vive entre llaves. Cualquier cosa entre llaves es un bloque.
Entonces, una variable declarada en un bloque con let solo está disponible para su uso dentro de ese bloque. Déjame explicarte esto con un ejemplo:
let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined Vemos que usar hellofuera de su bloque (las llaves donde se definió) devuelve un error. Esto se debe a que las letvariables tienen un alcance de bloque.
let se puede actualizar pero no volver a declarar.
Al igual que var, una variable declarada con letse puede actualizar dentro de su alcance. A diferencia var, una letvariable no se puede volver a declarar dentro de su alcance. Entonces, mientras esto funcionará:
let greeting = "say Hi"; greeting = "say Hello instead"; esto devolverá un error:
let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared Sin embargo, si la misma variable se define en diferentes ámbitos, no habrá error:
let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" ¿Por qué no hay ningún error? Esto se debe a que ambas instancias se tratan como variables diferentes, ya que tienen ámbitos diferentes.
This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.
Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not happen.
Hoisting of let
Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.
Const
Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.
const declarations are block scoped
Like let declarations, const declarations can only be accessed within the block they were declared.
const cannot be updated or re-declared
This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:
const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. nor this:
const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared Every const declaration, therefore, must be initialized at the time of declaration.
This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:
const greeting = { message: "say Hi", times: 4 } while we cannot do this:
const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable. we can do this:
greeting.message = "say Hello instead"; This will update the value of greeting.message without returning errors.
Hoisting of const
Just like let, const declarations are hoisted to the top but are not initialized.
So just in case you missed the differences, here they are:
vardeclarations are globally scoped or function scoped whileletandconstare block scoped.varvariables can be updated and re-declared within its scope;letvariables can be updated but not re-declared;constvariables can neither be updated nor re-declared.- They are all hoisted to the top of their scope. But while
varvariables are initialized withundefined,letandconstvariables are not initialized. - While
varandletcan be declared without being initialized,constmust be initialized during declaration.
Got any question or additions? Please let me know.
Thank you for reading :)