Tutorial de Javascript y las mejoras desde ES6 (ES2015) hasta ES10 (ES2019) – Parte 1 (Fundamentos)

Javascript desde hace unos años se ha convertido en el lenguaje de programación mas usado para el desarrollo web.

Esto es debido en gran parte a la potencia y variedad de dispositivos que existen hoy en día donde se puede ver una página web.

Con este cambio se ha trasladado parte del trabajo y complejidad que se desarrollaba en el servidor (backend) hacia el navegador (frontend).

Todos estos cambios han llevado a la aparición de múltiples frameworks, librerías y herramientas que han ayudado y continúan ayudando a Javascript a ser un lenguaje de programación muy potente.

Aunque todos esos frameworks, librerías y herramientas aportan un gran valor y potencia a Javascript, sin una evolución y mejoras sobre el propio lenguaje estaremos arrastrando carencias.

Por donde empezamos

Bien, para comenzar a programar en Javascript necesitamos usar un navegador web, por ejemplo Google Chrome y un editor de código como puede ser Visual Studio Code.

Con el navegador y el editor  de código instalado, ya podemos comenzar a programar.

Para usar Javascript en nuestra página web necesitaremos crear una página html y añadir nuestro código Javascript, ya sea mediante un enlace a un fichero externo de Javascript o añadiendo nuestro código entre las etiquetas <script></script>.

example1.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ejemplo 1</title>
</head>
<body>
    <h1>Hola mundo con nuestro código Javascript en el HTML</h1>
    <script>
        console.log('Hola mundo');
    </script>
</body>
</html>

example2.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ejemplo 1</title>
</head>
<body>
    <h1>Hola mundo con nuestro código Javascript en un fichero externo</h1>
    <script src="./example2.js"></script>
</body>
</html>

example2.js

console.log('Hola mundo');

Ahora que tenemos preparado el entorno de trabajo y sabemos como incluir el código en nuestra página, ya podemos empezar a programar en Javascript.

Mientras preparaba la documentación para este curso me di cuenta de lo extenso que podía llegar a ser, así que estoy creando una guía de referencia que sirva como base para poder conocer Javascript, desde lo básico hasta lo mas nuevo que nos ofrece.

Comencemos con la guía de referencia de Javascript

Comentarios

Añadir comentarios en nuestro código es bastante útil, ya que nos permite tener el código documentado tanto para ti como para los futuros programadores.

En Javascript se pueden añadir comentarios de dos formas:

  • Usando //, para añadir comentarios en una sola linea.
    • // saveForm(), este método nos permite almacenar los datos del formulario
  • Usando /* */, para añadir comentarios en múltiples lineas.
    • /* 
    • loadForm()
    • Este método nos permite cargar los datos al formulario
    • */

Usar comentarios ofrece otras ventajas adicionales, ya que si lo combinamos con herramientas externas como JSDoc podemos tener documentado todo nuestro código y consultar desde fuera sin necesidad de acceder al código fuente.

Declaración de variables

La variables en Javascript se usan para almacenar valores, y para declararlas debemos seguir estas pautas:

  • Deben crearse con nombre únicos llamados identificadores.
  • Es recomendable usar nombres descriptivos
  • Solo pueden contener letras, números, $ y _
  • Siempre deben empezar con una letra, aunque en ocasiones se pueden usar $ 0 _
  • Son sensibles a las mayúsculas y minúsculas.
  • No se pueden usar ciertas palabras reservadas del propio lenguaje
    • await, break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, finally, for, function, if, import, in, instanceof, new, return, super, switch, this, throw, try, typeof, var, void, while, with, let, static, null, true, false

Para declarar las variables se puede usar una de las siguiente palabras reservadas, var, let o const. 

Aunque todavía se sigue usando var, en la medida de lo posible se deberá usar let const.

Cuando definimos una variable usando const, el valor no se podrá reasignar salvo que el tipo de dato que asignemos sea ‘mutable’, por ejemplo un array o un objeto.

Otro tema importante cuando declaramos variables, es saber el ámbito que estas tienen.

En la siguiente imagen podemos comprobar el ámbito de una variable.

La variable msn dentro de la función hi tendrá un ámbito local, en este caso se limita a la función hi.

Por el contrario, la variable msn declarada fuera de la función sera de ámbito global.

Para finalizar otro ejemplo usando la variable global.

Como podemos ver, dentro de la función hi el contenido de la variable global se esta imprimiendo.

El modo estricto, ‘use strict’

El modo estricto (strict mode), es una característica de ES5 que permite aplicar a una función y/o contexto un modo mas riguroso al propio lenguaje.

Tenemos que saber que el modo estricto no esta soportado en navegadores antiguos.

En el modo estricto nos lanzara un error, si intentamos asignar un valor a una variable no declarada previamente.

Intentar eliminar una variable en modo estricto, también lanzara un error

Tampoco esta permitido duplicar el nombre de los parámetros

Como había comentado al principio no quiero extenderme, así que si quieres profundizar sobre el modo estricto de Javascript puedes usar la siguiente url.

Tipos de datos en Javascript

JavaScript es un lenguaje tipado dinámico, esto significa que no es necesario declarar el tipo de variable.

Con esta característica, el tipo será determinado automáticamente cuando comience a ser procesado.

Existen 5 tipos de datos primitivos y Object:

  • Boolean: true / false
  • Null: null
  • Undefined: variable que no tiene asignado ningún valor
  • Number: 1, 1.4, -1.4, etc.
  • String: Texto
  • Symbol

Aunque son pocos tipos de datos comparados con otros lenguajes de programación, javacript nos permite almacenar diferentes valores dependiendo del contenido que almacenemos en esas variables.

Algunos de los tipos number que se pueden almacenar son los siguientes:

Binario

Octal

Hexadecimal

Ademas de los anteriores valores, también se pueden almacenar los valores enteros y decimales.

El tipo de dato number también ofrece otras características que nos facilitan ciertas tareas, por ejemplo:

Esto es solo una pequeña parte de los métodos que ofrece Javascript con los tipos de datos numéricos. Si necesitas conocer mas sobre este tema u otros de Javascript , en la siguiente url podrás encontrar mucha información.

Los tipos string nos permiten almacenar texto fijo o de forma dinámica.

Otra forma de mostrar el texto, es usando una nueva característica de ES6 llamada template String.

Permite hacer uso de plantillas directamente sin usar ninguna librería y/o framework, ademas podemos evaluar su contenido.

Para los tipos boolean en Javascript ocurre algo curioso, cualquier variable que tenga un valor esta nos devolverá true, pero si lo que declaramos no tiene valor entonces nos devolverá false.

Otro dato importante sobre los tipos de datos primitivos y object, es que los tipos primitivos (Boolean, Null, Undefined, Number, String y Symbol(ES6)) se asignan por valor (copia) y los tipos object (Object, Array Function) se asignan por referencia.

Primitivos

Object

Interacción básica desde Javascript

Javascript nos ofrece una serie de sentencias con las que podemos interaccionar con el usuario, sin necesidad de usar HTML.

Con las sentencias alert, confirm prompt conseguimos realizar esa interacción, y aunque es bastante básica nos puede servir para algún caso de uso particular.

alert(mensaje): Mostramos una pequeña modal con un botón y un mensaje.

confirm(mensaje): Muestra una pequeña modal con los botones aceptar y cancelar. Como tiene dos posibles opciones, podemos guardar el valor del confirm con el resultado de la acción, aceptar es true y cancelar es false.

prompt(mensaje, texto defecto): Muestra una pequeña modal con una caja de texto, y los botones aceptar y cancelar. La acción de esta modal nos mostrará como resultado el texto que escribamos en la ventana modal.

Con esto terminamos la parte de fundamentosen la siguiente parte hablaremos sobre los operadores en Javascript.