materials

Sintaxis

Variables

Javascript es un lenguaje débilmente tipado. Esto significa que no se indica de qué tipo es una variable al declararla e incluso puede cambiar su tipo a lo largo de la ejecución del programa. Ejemplo:

let miVariable;         // declaro miVariable y como no se asigno un valor valdrá undefined
miVariable='Hola';      // ahora su valor es 'Hola', por tanto contiene una cadena de texto
miVariable=34;          // pero ahora contiene un número
miVariable=[3, 45, 2];  // y ahora un array
miVariable=undefined;   // para volver a valer el valor especial undefined

EJERCICIO: Ejecuta en la consola del navegador las instrucciones anteriores y comprueba el valor de miVariable tras cada instrucción (para ver el valor de una variable simplemente ponemos en la consola su nombre: miVariable

Ni siquiera estamos obligados a declarar una variable antes de usarla, aunque es recomendable para evitar errores que nos costará depurar. Podemos hacer que se produzca un error si no declaramos una variable incluyendo al principio de nuestro código la instrucción

'use strict'

Las variables de declaran con let (lo recomendado desde ES2015), aunque también pueden declararse con var. La diferencia es que con let la variable sólo existe en el bloque en que se declara mientras que con var la variable existe en toda la función en que se declara:

if (edad < 18) {
  let textoLet = 'Eres mayor de edad';
  var textoVar = 'Eres mayor de edad';
} else {
  let textoLet = 'Eres menor de edad';
  var textoVar = 'Eres menor de edad';
}
console.log(textoLet);  // mostrará undefined porque fuera del if no existe la variable
console.log(textoVar);  // mostrará la cadena

Cualquier variable que no se declara dentro de una función (o si se usa sin declarar) es global. Debemos siempre intentar NO usar variables globales.

Se recomienda que Los nombres de las variables sigan la sintaxis camelCase (ej.: miPrimeraVariable).

Desde ES2015 también podemos declarar constantes con const. Se les debe dar un valor al declararlas y si intentamos modificarlo posteriorment se produce un error.

NOTA: en la página de Babel podemos teclear código en ES2015 y ver cómo quedaría una vez transpilado a ES5.

Funciones

Se declaran con function y se les pasan los parámetros entre paréntesis. La función puede devolver un valor usando return (si no tiene return es como si devolviera undefined).

Puede usarse una función antes de haberla declarado por el comportamiento de Javascript llamado hoisting: el navegador primero carga todas las funciones y mueve las declaraciones de las variables al principio y luego ejecuta el código.

EJERCICIO: Haz una función que te pida que escribas algo y muestre un alert diciendo ‘Has escrito…’ y el valor introducido. Pruébala en la consola (pegas allí la función y luego la llamas desde la consola)

Parámetros

Si se llama una función con menos parámetros de los declarados el valor de los parámetros no pasados será undefined:

function potencia(base, exponente) {
    console.log(base);            // muestra 4
    console.log(exponente);       // muestra undefined
    let valor=1;
    for (let i=1; i<=exponente; i++) {
      valor=valor*base;
    }
    return valor;
}

potencia(4);    // devolverá 1 ya que no se ejecuta el for

Podemos dar un valor por defecto a los parámetros por si no los pasan asignándoles el valor al definirlos:

function potencia(base, exponente=2) {
    console.log(base);            // muestra 4
    console.log(exponente);       // muestra 2 la primera vez y 5 la segunda
    let valor=1;
    for (let i=1; i<=exponente; i++) {
      valor=valor*base;
    }
    return valor;
}

console.log(potencia(4));         // mostrará 16 (4^2)
console.log(potencia(4,5));       // mostrará 1024 (4^5)

NOTA: En ES5 para dar un valor por defecto a una variable se hacía

function potencia(base, exponente) {
    exponente = exponente || 2;       // si exponente vale undefined se la asigna el valor 2
...

También es posible acceder a los parámetros desde el array arguments[] si no sabemos cuántos recibiremos:

function suma () {
    var result = 0;
    for (var i=0; i<arguments.length; i++)
        result += arguments[i];
    return result;
}

console.log(suma(4, 2));                    // mostrará 6
console.log(suma(4, 2, 5, 3, 2, 1, 3));     // mostrará 20

En Javascript las funciones son un tipo de datos más por lo que podemos hacer cosas como pasarlas por argumento o asignarlas a una variable:

const cuadrado = function(value) {
  return value * value
}
function aplica_fn(dato, funcion_a_aplicar) {
    return funcion_a_aplicar(dato);
}

aplica_fn(3, cuadrado);     // devolverá 9 (3^2)

A este tipo de funciones se llama funciones de primera clase y son típicas de lenguajes funcionales.

Funciones anónimas

Como acabamos de ver podemos definir una función sin darle un nombre. Dicha función puede asignarse a una variable, autoejecutarse o asignasrse a un manejador de eventos. Ejemplo:

let holaMundo = function() {
    alert('Hola mundo!');
}

holaMundo();        // se ejecuta la función

Como vemos asignamos una función a una variable de forma que podamos “ejecutar” dicha variable.

Arrow functions (funciones lambda)

ES2015 permite declarar una función anónima de forma más corta. Ejemplo sin arrow function:

let potencia = function(base, exponente) {
    let valor=1;
    for (let i=1; i<=exponente; i++) {
      valor=valor*base;
    }
    return valor;
}

Al escribirla con la sintaxis de una arrow function lo que hacemos es:

El ejemplo con arrow function:

let potencia = (base, exponente) => {
    let valor=1;
    for (let i=1; i<=exponente; i++) {
      valor=valor*base;
    }
    return valor;
}

Otro ejemplo, sin arrow function:

let cuadrado = function(base) {
    return base * base;
}

conn arrow function:

let cuadrado = base => base * base;

EJERCICIO: Haz una arrow function que devuelva el cubo del número pasado como parámetro y pruébala desde la consola. Escríbela primero en la forma habitual y luego la “traduces” a arrow function.

Estructuras y bucles

Estructura condicional: if

El if es como en la mayoría de lenguajes. Puede tener asociado un else y pueden anidarse varios con else if.

if (condicion) {
    ...
} else if (condicion2) {
    ...
} else if (condicion3) {
    ...
} else {
    ...
}

Ejemplo:

if (edad < 18) {
    console.log('Es menor de edad');
} else if (edad > 65) {
    console.log('Está jubilado');
} else {
    console.log('Edad correcta');
}

Se puede usar el operador ? : que es como un if que devuelve un valor:

let esMayorDeEdad = (edad>18)?true:false;

Estructura condicional: switch

El switch también es como en la mayoría de lenguajes. Hay que poner break al final de cada bloque para que no continúe evaluando:

switch(color) {
    case 'blanco':
    case 'amarillo':    // Ambos colores entran aquí
        colorFondo='azul';
        break;
    case 'azul':
        colorFondo='amarillo';
        break;
    default:            // Para cualquier otro valor
        colorFondo='negro';
}

Javascript permite que el switch en vez de evaluar valores pueda evaluar expresiones. En este caso se pone como condición true:

switch(true) {
    case age < 18:
        console.log('Eres muy joven para entrar');
        break;
    case age < 65:
        console.log('Puedes entrar');
        break;
    default:
        console.log('Eres muy mayor para entrar');
}

Bucle while

Podemos usar el bucle while…do

while (condicion) {
    // sentencias
}

que se ejecutará 0 o más veces. Ejemplo:

let nota=prompt('Introduce una nota (o cancela para finalizar)');
while (nota) {
    console.log('La nota introducida es: '+nota);
    nota=prompt('Introduce una nota (o cancela para finalizar)');
}

O el bucle do…while:

do {
    // sentencias
} while (condicion)

que al menos se ejecutará 1 vez. Ejemplo:

let nota;
do {
    nota=prompt('Introduce una nota (o cancela para finalizar)');
    console.log('La nota introducida es: '+nota);
} while (nota)

EJERCICIO: Haz un programa para que el usuario juegue a adivinar un número. Obtén un número al azar (busca por internet cómo se hace o simplemente guarda el número que quieras en una variable) y ve pidiendo al usuario que introduzca un número. Si es el que busca le dices que lo ha encontrado y si no le mostrarás si el número que busca el mayor o menor que el introducido. El juego acaba cuando el usuario encuentra el número o cuando pulsa en ‘Cancelar’ (en ese caso le mostraremos un mensaje de que ha cancelado el juego).

Bucle: for

Tenemos muchos for que podemos usar.

Bucle: for con contador

Creamos una variable contador que controla las veces que se ejecuta el for:

let datos=[5, 23, 12, 85]
let sumaDatos=0;

for (let i=0; i<datos.length; i++) {
    sumaDatos += datos[i];
}  
// El valor de sumaDatos será 125

EJERCICIO: El factorial de un número entero n es una operación matemática que consiste en multiplicar ese número por todos los enteros menores que él: n x (n-1) x (n-2) x … x 1. Así, el factorial de 5 (se escribe 5!) vale 5! = 5 x 4 x 3 x 2 x 1 = 120. Haz un script que calcule el factorial de un número entero.

Bucle: for…in

El bucle se ejecuta una vez para cada elemento del array (o propiedad del objeto) y se crea una variable contador que toma como valores la posición del elemento en el array:

let datos=[5, 23, 12, 85]
let sumaDatos=0;

for (let indice in datos) {
    sumaDatos += datos[indice];     // los valores que toma indice son 0, 1, 2, 3
}  
// El valor de sumaDatos será 125

También sirve para recorrer las propiedades de un objeto:

let profe={
    nom:'Juan', 
    ape1='Pla', 
    ape2='Pla'
}
let nombre='';

for (var campo in profe) {
   nombre += profe.campo + ' '; // o profe[campo];
}  
// El valor de nombre será 'Juan Pla Pla '

Bucle: for…of

Es similar al for…in pero la variable contador en vez de tomar como valor cada índice toma cada elemento. Es nuevo en ES2015:

let datos = [5, 23, 12, 85]
let sumaDatos = 0;

for (let valor of datos) {
    sumaDatos += valor;       // los valores que toma valor son 5, 23, 12, 85
}  
// El valor de sumaDatos será 125

También sirve para recorrer los caracteres de una cadena de texto:

let cadena = 'Hola';

for (let letra of cadena) {
    console.log(letra);     // los valores de letra son 'H', 'o', 'l', 'a'
}

EJERCICIO: Haz 3 funciones a las que se le pasa como parámetro un array de notas y devuelve la nota media. Cada una usará un for de una de las 3 formas vistas. Pruébalas en la consola

Tipos de datos básicos

Para saber de qué tipo es el valor de una variable tenemos el operador typeof. Ej.:

En Javascript hay 2 valores especiales:

También hay otros valores especiales relacionados con operaciones con números:

Casting de variables

Como hemos dicho las variables pueden contener cualquier tipo de valor y, en las operaciones, Javascript realiza automáticamente las conversiones necesarias para, si es posible, realizar la operación. Por ejemplo:

Además comentar que en Javascript todo son ojetos por lo que todo tiene métodos y propiedades. Veamos brevemente los tipos de datos básicos.

EJERCICIO: Prueba en la consola las operaciones anteriores y alguna más con la que tengas dudas de qué devolverá

Number

Sólo hay 1 tipo de números, no existen enteros y decimales. El tipo de dato para cualquier número es number. El carácter para la coma decimal es el . (como en inglés, así que 23,12 debemos escribirlo como 23.12).

Tenemos los operadores aritméticos +, -, *, / y % y los unarios ++ y – y existen los valores especiales Infinity y -Infinity (23 / 0 no produce un error sino que devuelve Infinity).

Podemos usar los operadores artméticos junto al operador de asignación = (+=, -=, *=, /= y %=).

Algunos métodos útiles de los números son:

Podemos forzar la conversión a número con la función Number(valor). Ejemplo Number('23.12')devuelve 23.12

Otras funciones útiles son:

OJO: al sumar floats podemos tener problemas:

console.log(0.1 + 0.2)    // imprime 0.30000000000000004

Para evitarlo redondead los resultados (o (0.1*10 + 0.2*10) / 10).

EJERCICIO: Modifica la funciónque quieras de calcular la nota media para que devuelva la media con 1 decimal

EJERCICIO: Modifica la función que devuelve el cubo de un número para que compruebe si el parámetro pasado es un número entero. Si no es un entero o no es un número mostrará un alert indicando cuál es el problema yndevolverá false.

String

Las cadenas de texto van entre comillas simples o dobles, es indiferente. Podemos escapar un caràcter con \ (ej. 'Hola \'Mundo\'' devuelve Hola ‘Mundo’).

Para forzar la conversión a cadena se usa la función String(valor) (ej. String(23) devuelve ‘23’)

El operador de concatenación de cadenas es +. Ojo porque si pedimos un dato con prompt siempre devuelve una cadena así que si le pedimos la edad al usuario (por ejemplo 20) y se sumamos 10 tendremos 2010 (‘20’+10).

Algunos métodos y propiedades de las cadenas son:

Podemos probar los diferentes métodos en la página de w3schools.

EJERCICIO: Haz una función a la que se le pasa un DNI (ej. 12345678w o 87654321T) y devolverá si es correcto o no. La letra que debe corresponder a un DNI correcto se obtiene dividiendo la parte numérica entre 23 y cogiendo de la cadena ‘TRWAGMYFPDXBNJZSQVHLCKE’ la letra correspondiente al resto de la divisón. Por ejemplo, si el resto es 0 la letra será la T y si es 4 será la G. Prueba la función en la consola con tu DNI

Template literals

Desde ES2015 también podemos poner una cadena entre ` (acento grave) y en ese caso podemos poner dentro variables y expresiones que serán evaluadas al ponerlas dentro de ${}. También se respetan los saltos de línea, tabuladores, etc que haya dentro. Ejemplo:

let edad=25;

console.log(\`El usuario tiene:
${edad} años\`)

Mostrará en la consola:

El usuario tiene:

25 años

Boolean

Los valores booleanos son true y false. Para convertir algo a booleano se usar Boolean(valor) aunque también puede hacerse con la doble negación (!!). Cualquier valor se evaluará a true excepto 0, NaN, null, undefined o una cadena vacía (‘’) que se evaluarán a false.

Los operadores lógicos son ! (negación), && (and), || (or).

Para comparar valores tenemos == y ===. La triple igualdad devuelve true si son igual valor y del mismo tipo. Como Javascript hace conversiones de tipos automáticas conviene usar la === para evitar cosas como:

También tenemos 2 operadores de diferente: != y !== que se comportan como hemos dicho antes.

Los operadores relacionales son >, >=, <, <=. Cuando se compara un número y una cadena ésta se convierte a número y no al revés (23 > '5' devuelve true, aunque '23' > '5' devuelve false)

Manejo de errores

Si sucede un error en nuestro código el programa dejará de ejecutarse por lo que el usuario tendrá la sensación de que no hace nada (el error sólo se muestra en la consola y el usuario no suele abrirla nunca). Para evitarlo debemos intentar capturar los posibles errores de nuestro código antes de que se produzcan.

En javascript (como en muchos otros lenguajes) el manejo de errores se realiza con sentencias

try {
    ...
} 
catch(error) {
    ...
}

Dentro del bloque try ponemos el código que queremos proteger y cualquier error producido en él será pasado al bloque catch donde es tratado. Opcionalmente podemos tener al final un bloque finally que se ejecuta tanto si se produce un error como si no. El parámetro que recibe catch es un objeto con las propiedades name, que indica el tipo de error (SyntaxError, RangeError, … o el genérico Error), y message, que indica el texto del error producido.

En ocasiones podemos querer que nuestro código genere un error. Esto evita que tengamos que comprobar si el valor devuelto por una función es el adecuado o es un código de error. Por ejemplo tenemos una función para retirar dinero de una cuenta que recibe el saldo de la misma y la cantdad de dinero a retirar y devuelve el nuevo saldo, pero si no hay suficiente saldo no debería restar nada sino mostrar un mensaje al usuario. Sin gestión de errores haríamos:

function retirar(saldo, cantidad) {
  if (saldo < cantidad) {
    return false
  }
  return saldo - cantidad
} 

// Y donde se llama a la función_
...
resultado = retirar(saldo, importe)
if (resultado === false
  alert('Saldo insuficiente')
} else {
  saldo = resultado
...

Se trata de un código poco claro que podemos mejorar lanzando un error en la función. Para ello se utiliza la instrucción throw:

  if (saldo < cantidad) {
    throw 'Saldo insuficiente'
  }

Por defecto al lanzar un error este será de clase Error pero (el código anterior es equivalente a throw new Error('Valor no válido')) aunque podemos lanzarlo de cualquier otra clase (throw new RangeError('Saldo insuficiente')) o personalizarlo.

Siempre que vayamos a ejecutar código que pueda generar un error debemos ponerlo dentro de un bloque try por lo que la llamada a la función que contiene el código anterior debería estar dentro de un try. El código del ejemplo anterior quedaría:

function retirar(saldo, cantidad) {
  if (saldo < cantidad) {
    throw "Saldo insuficiente"
  }
  return saldo - cantidad
} 

// Siempre debemos llamar a esa función desde un bloque _try_
...
try {
  saldo = retirar(saldo, importe)
} catch(err) {
  alert(err)
}
...

Podemos ver en detalle cómo funcionan en la página de MDN web docs de Mozilla.

Buenas prácticas

Javascript nos permite hacer muchas cosas que otros lenguajes no nos dejan por lo que debemos ser cuidadosos para no cometer errores de los que no se nos va a avisar.

‘use strict’

Si ponemos siempre esta sentencia al principio de nuestro código el intérprete nos avisará si usamos una variale sin declarar (muchas veces por equivocarnos al escrbir su nombre). En concreto fuerza al navegador a no permitir:

Variables

Algunas de las prácticas que deberíamos seguir respecto a las variables son:

También es conveniente, por motivos de eficiencia no usar objetos Number, String o Boolean sino los tipos primitivos (no usar let numero = new Number(5) sino let numero = 5) y lo mismo al crear arrays, objetos o expresiones regulares (no usar let miArray = new Array() sino let miArray = []).

Errores

No se debería estar comprobando lo devuelto por una función para ver si se ha ejecutado correctamente o ha devuelto algún código de error. Si algo es erróneo no debemos devolver un código sino lanzar un error y quien ha llamado a esa función debería hacerlo dentro de un try...catch para capturar dicho error. Por ejemplo:

function muestraDatos(datos) {
   ...
   const nombreMes = getNombreMes(datos.mes);
   if (nombreMes === false) {
       alert('El mes ' + datos.mes + ' es erróneo');
   }
   ...
}

function getNombreMes(mes) {
  const meses = new Array("Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic")

  if (isNaN(mes) || mes < 1 || mes > 12) {
    return false
  }
  return meses[mes - 1]
}

function muestraDatos(datos) {
   ...
   try {
      var nombreMes = getNombreMes(datos.mes);
   } catch(err) {
      alert(err)
   }
   ...
}

function getNombreMes(mes) {
  const meses = new Array("Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic")

  if (isNaN(mes) || mes < 1 || mes > 12) {
       throw 'El mes ' + mes + ' es erróneo'
  }
  return meses[mes - 1]
}

Otras

Algunas reglas más que deberíamos seguir son:

Clean Code

Estas y otras muchas recomendaciones se recogen el el libro Clean Code de Robert C. Martin y en muchos otros libros y articulos. Aquí tenéis un pequeño resumen traducido al castellano:

This site is open source. Improve this page.