Diferencia entre var y let - console.log y convenciones de nombrado de identificadores - Curso de JavaScript de cero a máster - Capítulo 5


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:

Archivo JS

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

Resultado en la consola

console.log JavaScript
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.

Archivo JS

 // El siguiente código es erróneo.

let color1 = "Rojo";
console.log(color1);
let color1 = "Azul";
console.log(color1);

Resultado en la consola

Error consola sintax javascript

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.

Camelcase javascript

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
    • CadaPalabraSeEscribeEnMayusculasLaPrimeraLetraParaDistinguirlas
  • 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 guión bajo (lo que llamo barra baja).
Esto está inspirado en una serpiente con su zigzagueo.

snake_case javascript
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

  1. Di en qué sistema de nombres está escrita cada una de las siguientes variables:
    • nombre-usuario
    • Direccion
    • colorUno
    • kebab_case
    • JavaScript

La solución la encontrarás aquí: Haz click aquí.

Capítulos


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


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.