Hola Habr! Les presento la traducción del artículo
"var vs let vs const en JavaScript" por Tyler McGinnis.
En este artículo, aprenderá 2 nuevas formas de crear variables en Javascript (ES6), let y const. A lo largo de este artículo, analizaremos las diferencias entre
var ,
let y
const , así como temas relacionados como: "alcance de función versus alcance de bloque", variables de "elevación" e inmunidad.
Si prefiere un video, mire esto (original en inglés):
ES2015 (o ES6) nos presentó a 2 nuevas formas de crear variables,
let y
const . Pero antes de profundizar en las diferencias entre
var ,
let y
const , hay algunos temas que debe conocer primero. Estas son la declaración de variables y su inicialización, alcance (un alcance especial de la función) y "elevación".
Declarando e inicializando variables
Una declaración variable introduce un nuevo identificador.
var declaration
Arriba creamos un nuevo identificador que llamamos "declaración". En Javascript, cuando se crean, las variables se inicializan con un valor
indefinido . Esto significa que si intentamos generar nuestra variable de
declaración , quedaremos
indefinidos .
var declaration console.log(declaration)
Y así, inferimos la variable de
declaración y quedamos
indefinidos .
En comparación con la declaración de una variable, inicializar una variable es la primera vez que establece el valor de esta variable.
var declaration console.log(declaration)
Y así, aquí inicializamos la variable de
declaración escribiendo una cadena en ella.
Esto nos lleva al siguiente concepto, alcance.
Alcance
Un alcance describe dónde se puede acceder a la variable y las funciones dentro de nuestro programa. En Javascript, hay 2 tipos de ámbitos: el ámbito global y el ámbito de una función . De acuerdo con la especificación oficial,
"Si se produce una declaración de variable dentro de una declaración de función, la variable se define en el ámbito local de esta función ..."
Esto significa que si crea una variable usando var , el alcance de esta variable será la función en la que se creó y estará disponible solo dentro de esta función o cualquier otra función anidada.
function getDate () { var date = new Date() return date } getDate() console.log(date)
Arriba, intentamos acceder a la variable desde fuera de la función en la que se declaró. Dado que el alcance de la variable de fecha es la función getDate , está disponible solo dentro de esta función o en cualquier otra función anidada en getDate (como se muestra a continuación).
function getDate () { var date = new Date() function formatDate () { return date.toDateString().slice(4)
Ahora echemos un vistazo a un ejemplo más avanzado. Digamos que tenemos una variedad de precios y necesitamos una función que tome esta matriz, así como una variable de descuento , y nos devuelva una nueva variedad de precios con descuentos. El objetivo final puede verse más o menos así:
discountPrices([100, 200, 300], .5)
Y la implementación podría verse más o menos así:
function discountPrices (prices, discount) { var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } return discounted }
Parece bastante simple, pero ¿qué tiene esto que ver con el alcance del bloque? Echa un vistazo a esto para loop. ¿Las variables declaradas dentro de él son accesibles fuera de él? Resulta disponible.
function discountPrices (prices, discount) { var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i)
Si JavaScript es el único lenguaje de programación que conoce, es posible que no tenga que preocuparse tanto. Sin embargo, si llegó a JavaScript desde otro lenguaje de programación, en particular un lenguaje de programación que bloquea el alcance, probablemente esté un poco preocupado por lo que está sucediendo aquí.
No está roto, simplemente funciona un poco extraño. Realmente no hay razón para tener acceso a i , discountPrice y finalPrice fuera del ciclo for . No nos hace ningún bien e incluso puede hacernos daño en algunas situaciones. Sin embargo, dado que las variables se declaran usando var , caen dentro del alcance de la función y puede acceder a ellas.
Ahora hemos discutido la declaración e inicialización de variables, así como el alcance, otra cosa que debemos tratar antes de sumergirnos en las diferencias entre let y const , esto es "elevar".
"Ascensor"
Recuerde, se dijo anteriormente: "En Javascript, cuando se crean, las variables se inicializan con el valor indefinido". Resulta que significa "elevar". El intérprete de JavaScript establece las variables declaradas como indefinidas durante una fase llamada "Creación".
Para un estudio más detallado de la fase de Creación, “Aumento” y alcances, lea este artículo: “La guía definitiva para elevar, alcances y cierres en JavaScript” .
Echemos un vistazo al ejemplo anterior y veamos cómo lo afecta el "levantamiento".
function discountPrices (prices, discount) { var discounted = undefined var i = undefined var discountedPrice = undefined var finalPrice = undefined discounted = [] for (var i = 0; i < prices.length; i++) { discountedPrice = prices[i] * (1 - discount) finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i)
Tenga en cuenta que todas las variables declaradas se han establecido en indefinido . Es por eso que si intentas acceder a uno de ellos antes de que se anuncie, simplemente no estás definido .
function discountPrices (prices, discount) { console.log(discounted)
Ahora que sabe todo lo que necesita sobre var , ahora hablemos finalmente sobre el objetivo principal para el que estamos aquí: ¿cuál es la diferencia entre var , let y const ?
var, let o const
Para comenzar, comparemos var y let . La diferencia clave entre var y let es que let, aparte del alcance global y el alcance de la función, le permite definir variables en el alcance del bloque. Esto significa que la variable creada con la palabra clave let está disponible dentro del "bloque" donde se creó, así como dentro de los bloques anidados. Cuando dije "bloquear", me refería a algo rodeado de llaves {}, como un bucle for o una declaración if .
Entonces, volvamos a nuestra función discountPrices por última vez.
function discountPrices (prices, discount) { var discounted = [] for (var i = 0; i < prices.length; i++) { var discountedPrice = prices[i] * (1 - discount) var finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i)
Recuerde que tenemos derecho a generar i , discountPrice y finalPrice fuera del ciclo for , ya que se declararon usando var , y las variables declaradas usando la palabra clave var están limitadas al alcance de la función. Pero, ¿qué sucede ahora si cambiamos var para dejar que intentemos ejecutar nuestro código?
function discountPrices (prices, discount) { let discounted = [] for (let i = 0; i < prices.length; i++) { let discountedPrice = prices[i] * (1 - discount) let finalPrice = Math.round(discountedPrice * 100) / 100 discounted.push(finalPrice) } console.log(i)
Tenemos ReferenceError: i no está definido . Lo que nos dice que la variable declarada con let está limitada al alcance del bloque, no a la función. Intente llamar a i (o precio con descuento o precio final ) fuera del "bloque" donde se declararon, y esto nos dará un error de llamada, como acabamos de ver.
var VS let var: let:
Las siguientes diferencias están relacionadas con la "elevación". Anteriormente dijimos que la definición de "elevación" es: "El intérprete de JavaScript establece las variables declaradas como indefinidas durante la fase llamada" Crear "." También vimos esto en acción llamando a la variable antes de que fuera declarada (quedó indefinido ).
function discountPrices (prices, discount) { console.log(discounted)
No puedo recordar un solo caso de uso cuando realmente desea acceder a una variable antes de declararla. Parece que obtener un ReferenceError sería mejor que no estar definido .
De hecho, esto es lo que deja hacer. Si intenta acceder a una variable antes de su declaración con let , en lugar de quedar indefinido (como lo fue al declarar con var ), obtendrá un Error de referencia .
function discountPrices (prices, discount) { console.log(discounted)
var VS let var: undefined . let: ReferenceError .
dejar o const
Ahora entiendes la diferencia entre var y let, ¿qué pasa con const? Resulta que const es casi lo mismo que let. Sin embargo, hay una diferencia: si una vez asignó un valor usando const, no puede cambiarlo a otro.
let name = 'Tyler' const handle = 'tylermcginnis' name = 'Tyler McGinnis'
La conclusión de lo anterior es que las variables declaradas con let pueden sobrescribirse y las variables declaradas con const no.
Genial, ahora que desea que su variable sea inmutable, puede declararla con const . O no realmente. El hecho de que una variable se haya declarado usando const no significa que sea inmutable, todo lo que eso significa es que no se puede sobrescribir. A continuación se muestra un buen ejemplo.
const person = { name: 'Kim Kardashian' } person.name = 'Kim Kardashian West'
Tenga en cuenta que cambiar la propiedad de un objeto no es una sobrescritura, por lo que incluso si el objeto se declara usando const , esto no significa que no pueda cambiar ninguna de sus propiedades. Solo significa que no puede sobrescribir este objeto.
Ahora, la pregunta más importante que aún no se ha respondido: ¿qué debo usar var , let o const ? La opinión más popular, y a la que me adhiero, es usar siempre const hasta que sepas si la variable cambiará. La razón de esto es que al usar const, usted deja en claro para usted y para los futuros desarrolladores que deberían leer su código que esta variable no debe cambiarse. Si necesita cambiarlo (por ejemplo, en un bucle for ), simplemente use let .
No quedan muchos casos entre las variables que cambian y las variables que no cambian. Esto significa que nunca más tendrás que usar var .
Ahora, la opinión impopular, aunque todavía tiene justificación, es que nunca debes usar const , aunque estás tratando de demostrar que esta variable es inmutable, como vimos anteriormente, esto no es del todo cierto. Los desarrolladores que sostienen esta opinión siempre usan let siempre que no haya variables que sean realmente constantes, como _LOCATION_ = ....
Hagamos un resumen de lo anterior, var está limitado por el alcance de la función y si intenta acceder a dicha variable antes de su declaración, quedará indefinido . const y let están limitados por el alcance del bloque, y si intenta acceder a estas variables antes de declararlas, obtendrá un Error de referencia . Y la diferencia entre const y let es que el valor asignado a const no se puede sobrescribir, a diferencia de let .
var VS let VS const var: undefined . let: ReferenceError . const: ReferenceError .
Este artículo fue publicado originalmente en tylermcginnis.com como parte del curso Modern JavaScript .
Gracias por leer esta traducción, espero que hayas encontrado algo nuevo y útil para ti. Estaré encantado de ver los comentarios!