Palabras reservadas y clave - Identificadores y la consola - Curso de JavaScript de cero a máster - Capítulo 4


Vamos a ver varias cosas en este capítulo, los identificadores, las palabras reservadas y las palabras clave (keywords) del lenguaje y la consola de JavaScript.

Identificadores JavaScript

Un identificador es solo un nombre que identifica algo. Son nombres asignados a objetos, variables, funciones…

Obligatoriamente los identificadores deben comenzar o bien con una letra (a), con una barra baja(_) o con el símbolo dólar ($). No podremos utilizar números como primer carácter del nombre de un identificador u otros símbolos que no sean el del dólar o la barra baja.

Los otros caracteres del identificador pueden estar compuestos por un guión bajo (_), un signo de dólar ($), letras (a) o números (1) , pero no pueden ser otros símbolos. Tampoco puedes dejar espacios en medio del nombre.

Los siguientes ejemplos son válidos para identificadores:

Código JavaScript 

let variable1;
let _variable2;
let $variable3;
let varia$ble4;
let varia$ble_5;
let _v8aria$ble_6_;

Aunque unos identificadores más confusos que otros, son todos válidos. Puedes hacer la prueba con un alert(). Si te devuelve el valor undefined quiere decir que es correcto, ya que estas variables no tienen un valor defined (definido). En cambio, si las inicializas con un valor, debería salirte el valor en lugar del undefined.

Valor JavaScript undefined
Palabra del lenguaje nº 4 encontrada.
undefined es un valor primitivo asignado automáticamente a variables que solo han sido declaradas y no iniciadas.

Buenas y malas prácticas con identificadores

Ten en cuenta que debes intentar siempre poner nombres de identificadores lo más sencillos e identificativos posible. Aquí tienes unos buenos ejemplos:

Código JavaScript 

 let numero1 = 100;
 let numero_2 = 500;
 let nombre = "Alba García";
 let edad_usuario = 23;
 let vidaEnemigo = 100;
 let telefono_1 = "657483930";
 let telefono2 = "647389220";

Estos son unos malos ejemplos que no debes escribir:

Código JavaScript 

 let cien = 100;
 let n2 = 500;
 let n_us = "Alba García";
 let eUsuario = 23;
 let vida$e = 100;
 let tel1 = "657483930";
 let t_2 = "647389220";

¿Ves la gran diferencia? mientras que en los primeros ejemplos tenemos unos nombres de variable (identificadores) muy entendibles, en los malos ejemplos cuesta mucho más saber que es cada cosa. Piensa que vas a declarar estas variables, les darás un valor y después tendrás que ir utilizándolas en el código. Cuando tengas muchas variables, vas a tener que ir subiendo a donde declaraste las variables para ver que valor inicial tienen y para que son. También, si otros editan tu código, tendrán que revisarlo mucho para averiguar lo que hace cada cosa.

Si utilizas acentos o la letra ñ en los nombres de identificadores funciona correctamente, al menos en las versiones de JavaScript que he probado. De todas formas, no lo recomiendo en absoluto.

Palabras reservadas de JavaScript

Las palabras reservadas del lenguaje son identificadores reservados, es decir, tienen algún significado en el propio lenguaje y no las puedes utilizar para dar nombre a identificadores corrientes, por ejemplo en variables.

Listado de palabras reservadas y clave de JavaScript - Incluye futuras palabras reservadas

Puedes hacer click para ir al capítulo donde aparecen por primera vez estas palabras, con su respectiva información.

abstract arguments await boolean
break byte case catch
char class const continue
debugger default delete do
double else enum eval
export extends false final
finally float for function
goto if implements import
in instanceof int interface
let long native new
null package private protected
public return short static
super switch synchronized this
throw throws transient true
try typeof var void
volatile while with yield

Validador de nombres de JavaScript

Aquí tienes una magnífica herramienta para saber si el nombre de identificador que le quieres dar a una variable, una función, etc. es correcto.

Validador de identificadores de JavaScript

Es muy fácil de utilizar, aquí tienes una mini leyenda según los colores que te devuelve:

  • En color verde significa que valida. Todo ok.
  • En color amarillo quiere decir que se puede utilizar pero está desaconsejado su uso.
  • En color rojo significa que no valida y que incumple las normas de nomenclatura de los identificadores en JavaScript.
Nombre de identificador válido
Nombre de identificador no recomendado
Nombre de identificador inválido

La consola de JavaScript

La consola de JavaScript es extremadamente útil. Nos va a acompañar siempre para poder depurar los errores en el código y para poder ejecutar directamente ciertas sentencias para hacer pruebas sobre la página cargada en el navegador.

Abrir la consola de JavaScript en Chrome

Para acceder a la consola en Chrome pulsa la tecla F12 y ve a la pestaña Console. También puedes acceder pulsando las teclas CTRL + SHIFT + I.

Consola de JavaScript error en Chrome

En la parte de la izquierda muestra secciones de error, advertencias, información, etc. A la derecha muestra el contenido de la sección seleccionada. En esta imagen puede verse un error de sintaxis generado en el archivo test.js, línea 1. Esto lo indica con test.js:1.

Seguiremos utilizando la consola durante todo el curso, así que es importante que empieces a utilizarla.

Veamos como se abre en otros navegadores.

Abrir la consola de JavaScript en Firefox

Para abrirla en Firefox pulsa la tecla F12 o las teclas CTRL + SHIFT + I y también CTRL + SHIFT + J para que aparezca en una nueva ventana.

Consola de JavaScript en Firefox

En este caso, aparece la consola en la parte inferior y además, nos indica en qué caracter de la línea empieza el error detectado.

Abrir la consola de JavaScript en Opera

Para abrirla en Opera, la tecla F12 no fuunciona. Si que lo hacen las teclas CTRL + SHIFT + I y también CTRL + SHIFT + J. En este caso, la consola aparece igualmente incrustada en la misma ventana, no como en Firefox.

Consola de JavaScript en Opera

Abrir la consola de JavaScript en Edge

En Edge tenemos todas las opciones anteriores. La tecla F12, las teclas CTRL + SHIFT + I y CTRL + SHIFT + J.

Consola de JavaScript en Edge

Hay muchísimos navegadores. He puesto los 4 más usados, pero si tienes alguno que no funcione con estas teclas, déjame un comentario y te ayudaré.

Ejercicios de JavaScript

  1. ¿Son correctos los siguientes nombres de variables?

    2. Te recomiendo que lo intentes primero siguiendo las normas que te he dado y que luego lo valides con el validador, de forma que puedas probar si lo has entendido correctamente.

  • _programacion_facil_
  • programacion*facil
  • $programacionfacil
  • 4rto_capitulo
  • programacion facil
  • $_$
  • *_*
  • _70_
  • programacion-facil

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.