Aprende JavaScript: guía definitiva

En esta guía vamos a ver todo lo que necesitas saber del lenguaje de programación JavaScript, comenzando desde lo más simple. Muchas guías intentan cubrir en detalle todos y cada uno de los elementos de un tema, cuando en realidad necesitas conocer una pequeña parte, siendo el resto un accesorio al que poder recurrir una vez finalizado el aprendizaje.

Este tutorial está destinado a gente que nunca haya usado un lenguaje de programación, aunque es recomendable tener ciertos conocimientos previos básicos de HTML y de CSS.

JavaScript es un lenguaje que se utiliza principalmente del lado del cliente, es decir, que se ejecuta en tu navegador. Es por ello que no necesitarás instalar nada, bastando cualquier navegador como Chrome, Firefox, Opera o Safari. Sin embargo, para probar scripts básicos, es recomendable usar alguna herramienta online como por ejemplo CodePen o JSFiddle, que te permitirán practicar con el lenguaje y ejecutar pequeños scripts con facilidad, pudiendo ver el resultado de inmediato.

Primero veremos qué es JavaScript, además de ciertos conceptos básicos relacionados con este lenguaje. Seguidamente te familiarizarás con la sintaxis del lenguaje y con ciertos conceptos básicos de JavaScript, para luego continuar con conceptos más avanzados.

Introducción

JavaScript es uno de los lenguajes de programación más populares del mundo. Fue creado en 1995 y ha sufrido una infinidad da cambios y mejoras desde entonces.

JavaScript fue el primer lenguaje de programación soportado por los navegadores de forma nativa, además de ser el único. Inicialmente fue usado pada crear animaciones básicas gracias a lo que entones se conocía como DHTML.

Con el tiempo y con las nuevas necesidades de las aplicaciones web, JavaScript creció en consonancia, pasando a convertirse en uno de los ecosistemas más amplios del mundo del desarrollo de aplicaciones.

Muchas de las funcionalidades de JavaScript fueron agregadas gracias a la inclusión de APIs en los navegadores que extendían las posibilidades del lenguaje, permitiendo que interactuase con el sistema del usuario. Sin embargo, el lenguaje también sufrió grandes cambios, mejorando año tras año.

Gracias a Node.js, JavaScript también se utiliza en otros ámbitos, como por ejemplo en los servidores, como lenguaje backend. De este modo, JavaScript pasó también a competir con una cuota de mercado en crecimiento con lenguajes como PHP, Java o Python.

JavaScript también es el lenguaje que se utiliza en varios sistemas de bases de datos. También se utiliza para crear aplicaciones móviles o aplicaciones destinadas a televisiones y otros dispositivos. JavaScript es actualmente el lenguaje de programación más popular.

Qué es JavaScript

El lenguaje JavaScript ha crecido enormemente en los últimos años gracias a sus entornos de ejecución y a sus centenas de librerías, por lo que puede ser confuso diferenciar lo que es JavaScript puro de lo que no lo es.

Vamos a dar una definición de JavaScript que haga referencia a todas las características que definen a este lenguaje. JavaScript es un lenguaje de programación con las siguientes características:

• JavaScript es un lenguaje de alto nivel: JavaScript proporciona una abstracción de la máquina sobre la que se ejecuta, gestionando la memoria y el recolector de basura automáticamente, de modo que te puedas centrar en el código en lugar de preocuparte por las posiciones de memoria. Además, también incluye estructuras avanzadas que te permitirán trabajar con objetos y colecciones de valores.
• JavaScript es un lenguaje interpretado: JavaScript no necesita ser compilado antes de ejecutar el código, a diferencia de otros lenguajes como C, Java o Go, que sí necesitan ser compilados. En realidad, los navegadores compilan el código JavaScript antes de ser ejecutado, pero se realiza de forma transparente, sin que exista un paso de compilación explícito.
• JavaScript es un lenguaje dinámico: Los lenguajes dinámicos como JavaScript realizan en tiempo de ejecución muchas de las tareas que los lenguajes estáticos realizan en tiempo de compilación. Esto provoca que el código no se ejecute tan rápido, pero tiene también sus ventajas, como el tipado dinámico, el enlazamiento tardío o late binding, la reflexión, la alteración de objetos en tiempo de ejecución, las clausuras o closures o la programación funcional.
• JavaScript es un lenguaje de tipado dinámico: Las variables en JavaScript no fuerzan un tipo, por lo que no es necesario definirlo cuando son declaradas. Puedes reasignar un valor de cualquier tipo a una variable, como por ejemplo un número o una cadena de texto.
• JavaScript es un lenguaje de tipado débil: Al contrario que los lenguajes de tipado fuerte, los lenguajes de tipado débil no fuerzan el tipo de un objeto, siendo más flexibles. Sin embargo, delegan en el programador la responsabilidad de comprobar el tipo de los objetos. Esto es algo que librerías como Flow o lenguajes como TypeScript han intentado mejorar.
• JavaScript es un lenguaje multiparadigma: JavaScript no fuerza al desarrollador a seguir un tipo fijo de paradigma como sí hace Java, que fuerza el programador a una la programación orientada a objetos. En JavaScript puedes usar programación funcional o seguir un estilo de programación imperativo como en lenguajes como C. También puedes seguir la filosofía orientada a objetos y usar prototipos o también clases introducidas en la versión ES6  de JavaScript.

Algo que puede que confunda a algunas personas es la inclusión de la palabra Java en el nombre del lenguaje, cuando JavaScript no tiene nada que ver con Java. Simplemente se trata de una mala decisión a la hora de escoger el nombre del lenguaje cuando fue creado.

JavaScript se ha convertido en un lenguaje multipropósito usado para crear sitios web, aplicaciones web y aplicaciones del lado del servidor gracias a Node.js. Sin embargo, JavaScript también se ha comenzado a usar en otros ámbitos, ya que también te servirá para crear aplicaciones móviles mediante herramientas como React Native o Vue Native, e incluso para crear microcontroladores o aplicaciones para smartwatches.

Qué no es JavaScript

Tal y como hemos comentado, JavaScript ha sido extendido gracias a las APIs que puedes encontrar en los navegadores, que permiten que el lenguaje interactúe con el navegador y con el sistema. Sin embargo, estos componentes no forman parte de JavaScript.

Por ejemplo, la función console.log() que encontrarás en casi cualquier ejemplo de código JavaScript no forma parte de este lenguaje, sino de una de las librerías del navegador. En el servidor, cuando usas Node.js, también te encontrarás con funcionalidades del lenguaje que forman parte del entorno de Node.js, pero no de JavaScript. Las funcionalidades y componentes que forman parte de JavaScript estarán disponibles en cualquier entorno, ya sea en Node.js o en tu navegador.

Del mismo modo, te encontrarás con montones de componentes y funcionalidades cuando uses frameworks como React, Svelte o Vue que forman parte de estas librerías, pero no del lenguaje JavaScript. Cuando JavaScript no usa funciones del entorno en el que se ejecuta ni de ningún framework, recibe el nombre de Vanilla JavaScript.

Versiones de JavaScript

JavaScript sigue el estándar ECMAScript, también conocido como ES. JavaScript es una implementación de dicho estándar, siendo el motivo de que las diferentes versiones de JavaScript reciban el nombre de ES6, ES2015, ES2016, ES2017 o ES2018.

Para saber más cosas acerca del estándar ECMAScript y sus diferentes versiones, consulta la siguiente guía:

• Aprende más cosas de EcmaScript: Guía definitiva de ECMAScript

Durante mucho tiempo, la versión de JavaScript que usaban los navegadores fue la versión ECMAScript 3. Nunca existió la versión ECMAScript 4, puesto que fue cancelada. Luego apareció ES5, que fue una gran actualización, a la que siguió la versión ES2015 de JavaScript, también conocida como ES6, que incorporaba un montón de funcionalidades que a día de hoy cualquier desarrollador de JavaScript debería conocer.

Desde entonces ha aparecido una nueva versión de JavaScript por año, evitando que se agreguen de golpe demasiadas funcionalidades. Las últimas versiones han sido ES2016, ES2017, ES2018, ES2019 y finalmente ES2020.

Sintaxis de JavaScript

En este apartado vamos a ver ciertos conceptos básicos que dan forma a la sintaxis de JavaScript, que son los identificadores, los literales, los comentarios y el uso de los espacios en blanco y de las mayúsculas.

Comentarios en JavaScript

Un comentario es una anotación que se realiza en el código fuente, por lo que no se tendrá en cuenta cuando el motor encargado de procesar el código JavaScript lo ejecute. Existen dos tipos de sintaxis diferentes que puedes usar con los comentarios:

• Comentarios de una sola línea: Para agregar un comentario de una sola línea debes agregar dos barras inclinadas // seguidos del comentario que quieras añadir.
• Comentarios multilínea: Un comentario que abarque varias líneas se escribe con una barra inclinada y un asterisco /* como elemento de inicio y con un asterisco y una barra inclinada */ como elemento de finalización.

A continuación puedes ver un ejemplo de ambos tipos de sintaxis:

// Esto es un comentario de una sola línea.

/* Este comentario puede abarcar
   varias líneas. */

Resulta muy habitual comentar líneas o porciones de código para excluirlas, de modo que no se ejecuten:

// const x = 2; Esta declaración no se ejecutará

Variables en JavaScript

Una variable es un elemento utilizado para almacenar valores o datos. Las variables se crean mediante las declaraciones var o let, seguido del nombre de la variable. Una variable que ha sido creada pero a la que no se le ha asignado un valor, tendrá el valor undefined.

Nombre de las variables

Puedes asignar diferentes tipos de datos a una variable, ya que las variables en JavaScript carecen de tipos. Por ejemplo, puedes asignar números, cadenas de texto, objetos o elementos booleanos. Una variable puede tener cualquier nombre que contenga exclusivamente letras, símbolos de dólar $, guiones bajos _ o números, aunque en ningún caso podrá comenzar por un número. Además, el nombre de una variable no podrá coincidir con alguna de las palabras reservadas en JavaScript.

Notación de las variables

Por convención, los nombres de las variables deberían seguir el tipo de notación camelCase, que implica que la primera palabra esté en minúsculas, pero que la primera letra del resto de palabras que conformen el nombre de la variable esté en mayúscula. Esto no significa que no puedas usar otros nombres, aunque siempre es recomendable seguir los estándares para evitar malas prácticas.

Sintaxis de una variable

En el siguiente ejemplo declaramos una variable siguiendo la notación camelCase y le asignamos un valor:

var miPerro = 'Zar'; // Declaramos la variable y le asignamos un valor

Lo que hecho es usar la sentencia var, que indica que lo que viene a continuación es el nombre de una variable. Seguidamente hemos usado miPerro como nombre de la variable. Luego hemos usado el símbolo = para asignar el valor 'Zar', cuyo valor va entre comillas porque se trata de una cadena de texto. Finalmente hemos finalizado la sentencia usando un punto y coma ;, aunque es opcional.

Tipos de datos en JavaScript

Los tipos de datos de JavaScript incluyen cadenas, números, booleanos, objetos y los tipos undefined «indefinido» y null «nulo». Cualquier tipo de dato que no sea un objeto es un tipo primitivo. Existen diferentes funciones que te permitirán saber de qué tipo es un valor en JavaScript, pudiendo así evitar errores que de otro modo serían impredecibles. A continuación vamos a ver una descripción de los diferentes tipos de datos:

Números

Un número es un valor numérico de hasta 15 dígitos, pudiendo ser tanto enteros como decimales. Además también podrás ser tanto positivos como negativos. Los tipos de datos numéricos no pueden contener fracciones y tampoco deben contener comas. Las funciones matemáticas pueden utilizarse, aunque se asignará el resultado de las mismas.

var numero = 10; // Asignamos el valor 10 a la variable numero
var numeroNegativo = -10; // Asignamos el valor -10 a la variable numero
var numeroDecimal = 2.4; // Asignamos el valor 2.4 a la variable numero
var suma = 2 + 2; // La variable contendrá el valor 4

Además, también existe la palabra reservada NaN «Not a Number», que indica que un valor no es un número, aunque en realidad se trata de un tipo de dato numérico. Este tipo suele ser el resultado de operaciones aritméticas con elementos que no contienen valores numéricos.

var noEsPosible = 2 / 'cadena'; // Si dividimos 2 entre 'cadena' obtenemos NaN.

Existen ciertas funciones que puedes usar para saber si una variable o un valor son un número es JavaScript.

Cadenas

Una cadena son una serie de caracteres. Los valores de tipo cadena se declaran entre comillas simples ' o comillas dobles ". Ambas notaciones son aceptables siempre y cuando la cadena comience y termine con el mismo tipo de comillas.

// A continuación asignamos una cadena entre comillas simples a una variable
var miTexto = 'Todo este texto es una cadena';

// Ahora asignamos una cadena entre comillas dobles a una variable
var miTexto = "Todo este texto es una cadena";

En caso de que quieras usar comillas en una cadena, tenemos un problema, aunque disponemos de varias formar de solucionarlo. Por ejemplo, puedes agregar el tipo opuesto de comillas usadas en la cadena:

"Usando una comilla ' dentro de una cadena con comillas dobles"
'Usando una comilla " dentro de una cadena con comillas simples'

En caso de que quieras usar comillas dobles en una cadena declarada con comillas dobles o comillas simples dentro de una cadena declarada con comillas simples, debes escapar la comilla usando una barra invertida \ tal que así:

"Usando una comilla \" dentro de una cadena con comillas dobles"
'Usando una comilla \' dentro de una cadena con comillas simples'

Booleanos

Un booleano es un valor que puede tener los valores true «verdadero» o false «falso»:

var meDivierto = true;
var meAburro = false;

Además, también podemos asignar los números 1 o 0, que son equivalentes a los valores true y false respectivamente.

var meDivierto = 1;
var meAburro = 0;

Undefined

Un tipo de dato undefined es aquel que ha sido declarado pero cuyo valor no ha sido definido. Por ejemplo, si declaramos una variable y luego mostramos su valor, no estará definida:

var varaibleIndefinida; // Variable declarada pero no definida.

Una variable está declarada cuando hemos usado las sentencias var o let con ella. La siguiente variable no estaría declarada:

variableNoDeclarada // Variable declarada pero no definida

Null

El valor null o nulo es la ausencia de un valor en un elemento. A diferencia del tipo de dato undefined, el valor null representa a la nada, sin proporcionarnos información adicional:

var inexistente = null; // La variable está definida pero es nula

Si todavía no lo tienes claro, consulta el siguiente tutorial, en donde explico en profundidad las diferencias entre los tipos null y undefined.

• Diferencias entre null y undefined: Cuál es la diferencia entre null y undefined en JavaScript.

Objetos

Un objeto es una colección de pares de elementos que están formado por una clave y y respectivo valor. Los valores de la claves pueden corresponderse tanto con propiedades como con métodos. Una propiedad es una característica del objeto, y un método es una tarea o función que el objeto realiza. Sin embargo, si todavía no conoces las funciones de JavaScript, es mejor que primero consultes cómo se utilizan antes de adentrarte en los métodos de un objeto.

El contenido de un objeto se declara entre corchetes { ... }, con comas que separan cada uno de los pares de elementos. A la lista de pares de valores separada por comas también se le puede denominar literal de un objeto.

var miObjeto = {} // Definimos un objeto y lo inicializamos con un literal vacío.

// A continuación definimos un objeto y lo inicializamos con dos propiedades
var persona = {
  nombre: 'Edu',
  edad: 35
}

En el ejemplo superior, el objeto es la variable persona, mientras que nombre y edad son claves del mismo y 'Edu' y 35 sus respectivos valores. Para obtener el valor de un objeto puedes usar el nombre del objeto seguido de un punto . y el nombre de la calve que deseas obtener. Por ejemplo, vamos a asignar el contenido de la clave edad que hemos definido en nuestro ejemplo anterior a otra variables:

var miEdad = persona.edad // La variable miEdad contendrá el valor 35.

Existen diferentes métodos que puedes usar en JavaScript para saber si una propiedad de un objeto existe. Para conocerlos, consulta el tutorial en donde explico cómo saber se una propiedad existe en JavaScript.

Tal y como has podido comprobar, las diferencias entre los tipos primitivos son considerables. Si quieres, puedes consultar el siguiente tutorial, en donde explico en detalle cuáles son las diferencias entre los tipos primitivos y los objetos en JavaScript.

Arrays

Un array permite almacenar múltiples valores en una sola variable. Un array es un tipo objeto que puede contener múltiples tipos de datos diferentes en una lista. El contenido de un array se expresa entre corchetes [], con comas que separan cada uno de sus elementos.

// Creamos e inicializamos el array con un literal vacío
var miArray = [];

// Creamos un array y lo inicializamos con varios valores
var frutas = ['manzana', 'naranja', 'pera'];

Cada valor del array incluye un índice que comienza de 0 para el primero valor y se incrementa en una unidad con cada uno de los valores sucesivos. Un array es en el fondo un objeto que incluye índices numéricos en lugar de propiedades. El índice del elemento manzana del array frutas de nuestro ejemplo sería 0, el del elemento naranja sería 1 y el del elemento pera sería 2.

Para acceder a los elementos del array tendremos que indicar su índice numérico entre corchetes. En el siguiente ejemplo vamos a asignar el elemento manzana del array anterior a una nueva variable.

var mejorFruta = frutas[0];

Existen ciertas funciones que puedes usar para saber si un elemento es un array en JavaScript.

La consola de JavaScript

La consola de JavaScript te permite interactuar directamente con el navegador, además de poder consultar los errores JavaScript y de poder ver los mensajes que imprimas por ella.

Muchos lenguajes de programación incluyen una sentencia que te permite mostrar o imprimir contenido por pantalla. Estas sentencias suelen recibir el nombre de print o echo, pero JavaScript carece de ellas. Cuando comienzas a programar con JavaScript, lo mejor que puedes hacer es escribir aquellos que quieras mostrar directamente en el documento mediante el método document.write, aunque lo más habitual es usar el método console.log para mostrarlo por la consola.

A continuación vamos a ver un ejemplo en el que declaramos una variable, le asignamos una cadena y la mostramos tanto por la consola del navegador como en el documento:

var saludo = "Hola!";

// Mostramos el saludo en el documento
document.write(saludo);

// Mostramos el saludo por la consola
console.log(saludo);

Esto ha sido todo por ahora. Esta guía se irá ampliando progresivamente.

---