¿Cuál es la diferencia entre var y let?
Capítulo 5: Diferencia entre var y let - console.log y convenciones de nombrado de identificadores
En este quinto capítulo te voy a explicar el motivo por el cual tenemos dos formas de declarar variables en JavaScript, var y let. Además, aprovecho para enseñarte también las convenciones para escribir nombres de identificadores.
Diferencia entre var y let de JavaScript
Bien, puede que te hayas preguntado que porque hay dos palabras reservadas diferentes para declarar variables. Cuando se creó javascript solo existía la palabra var para crear variables. Las variables con var van a funcionar y a día de hoy son correctas, pero tienen un problema en la forma en que trabajan. Con var podemos redeclarar una variable tantas veces como queramos utilizando la palabra reservada delante del identificador, tal y como puedes ver en la siguiente mala práctica:
// El siguiente código es una mala práctica.
var color1 = "Rojo";
console.log(color1);
var color1 = "Azul";
console.log(color1);
Aquí lo que está pasando es que estoy redeclarando dos veces la misma variable. Esto es posible con var. No ocurre lo mismo con let.
Palabra del lenguaje nº 5 encontrada.
console es un objeto que nos permite acceder a la consola de depuración de los navegadores.
Palabra del lenguaje nº 6 encontrada.
log es un método perteneciente al objeto console. Muestra un mensaje en la consola.
Lo de console.log es algo nuevo. Se trata del objeto console llamando al método log de este. De forma que lo entiendas mejor, estamos indicando algo a la consola de javascript, en este caso, que nos muestre un mensaje en ella misma. Mostrará cualquier cosa que le pongamos, al igual que ocurre en el alert().
En el propio documento html no se ve nada, ninguna ventanita ni nada escrito en el <body>. Si abres la consola de JavaScript podrás ver lo que devuelve. En este caso, aparece en la sección info . Si fuese un error, aparecería en la sección de errores.
Ahora que ya conoces este método (ya explicaré lo que es un método), puedes usarlo más a menudo que la función alert() (también explicaré lo que es una función). La función alert(), más que para hacer pruebas como hemos estado haciendo, está destinada a informar al usuario de algo, por ejemplo, un usuario que introduce en un login un usuario o una contraseña incorrecta y la página le informa en ese momento de su error.
Dicho esto, puedes escribir alert() para hacer pruebas igualmente, pero es más práctico utilizar un console.log() para no tener que hacer click en el botón aceptar de la ventanita.
Comprobemos si efectivamente me deja redeclarar variables con let.
// El siguiente código es erróneo.
let color1 = "Rojo";
console.log(color1);
let color1 = "Azul";
console.log(color1);
En este caso no funciona nada, en info de la consola no aparece nada y todo queda en un error de sintaxis en la línea 3 que dice que el identificador color1 ya está declarado. Efectivamente, estamos redeclarando una variable ya declarada. Algo totalmente erróneo.
Puedes llegar a la conclusión de que se ha añadido let para sustituir a var. Ya sabes, utiliza siempre mejor let.
Convenciones de escritura de nombres en JavaScript
¿Qué es camelCase?
camelCase es la práctica de escribir varias palabras sin espacios o puntuación, dejando la primera letra de cada palabra en mayúscula, excepto la primera (hay excepciones, ahora las explico).
Este nombre está inspirado en las jorobas de un camello.
Hay dos tipos de camelCase:
- UpperCamelCase: tal y como se escribe su nombre, la primera letra de cada palabra en mayúsculas incluida la primera.
- JavaScript
- NumeroUno
- EdadUsuario
- NumeroTelefono
- PalabrasEnMayusculas
- lowerCamelCase: lo mismo, excepto que la primera letra de la primera palabra va en minúsculas.
- javaScript
- numeroUno
- edadUsuario
- numeroTelefono
UpperCamelCase es lo mismo que PascalCase.
Es mucho más frecuente ver la escritura en JavaScript en lowerCamelCase y en UpperCamelCase. No obstante, no es incorrecto si lo escribes de otra forma, por ejemplo, con barras bajas (snake_case). No obstante, no estarás utilizando la convención de JavaScript.
¿Qué es PascalCase?
PascalCase se trata de escribir los nombres sin separar, con la primera letra de cada palabra en mayúsculas, incluida la primera, igual que UpperCamelCase.
- JavaScript
- NumeroUno
- EdadUsuario
- NumeroTelefono
¿Qué es snake_case?
snake_case es escribir todo en minúsculas y hacer separación de palabras con un guion bajo (lo que llamo barra baja).
Esto está inspirado en una serpiente con su zigzagueo.
snake_case no crea errores pero no sigue la convención de JavaScript.
- java_script
- numero_uno
- edad_usuario
- numero_telefono
¿Qué es dot.case?
dot.case es escribir los nombres en minúsculas separadas por puntos. Algo totalmente ilegal en JavaScript, así que ya sabes, no lo intentes.
dot.case no se puede utilizar en JavaScript ya que no cumple con las normas para nombres de JavaScript.
- java.script
- numero.uno
- edad.usuario
- numero.telefono
¿Qué es kebab-case?
kebab-case es como snake_case con la única diferencia en que las palabras se separan con un guión y no con barra baja.
kebab-case no se puede utilizar en JavaScript ya que no cumple con las normas para nombres de JavaScript.
- java-script
- numero-uno
- edad-usuario
- numero-telefono
¿Qué es el estilo de nombrado húngaro?
Este estilo es como UpperCamelCase pero con un prefijo siempre en minúsculas, por ejemplo, n para número, fn para una función, etc. Este prefijo indica el tipo de dato que contiene la variable.
Este sistema se puede utilizar pero no cumple con la convención de JavaScript.
- nNumero
- nEdadUsuario
- strNumeroTelefono
En conclusión, utiliza lo que más te guste y se permita teniendo en cuenta que por convención en JavaScript se utiliza lowerCamelCase para nombres de objetos, funciones e instancias (variables incluidas) y PascalCase o UpperCamelCase para los nombres de clase y constructores.
Hay muchos otros sistemas más que no voy a poner para no alargar excesivamente este capítulo.
Ejercicios de JavaScript
- Di en qué sistema de nombres está escrita cada una de las siguientes variables:
nombre-usuarioDireccioncolorUnokebab_caseJavaScript
La solución la encontrarás aquí: Soluciones de ejercicios de JavaScript.
Comentarios
Si te quedan dudas sobre el temario, sobre JavaScript o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.
