JavaScript

Imprimir por pantalla

• console.log(valor) - Imprime en la consola el valor introducido.

Podemos concatenar strings y variables dentro del parámetro y se imprimirán como uno solo en la consola. Hay dos formas de hacerlo, usando el operador + o mediante plantillas de cadena e interpolación con los símbolos ${}.

console.log("Mi animal preferido es el " + animal + ".");
console.log(`Mi ${animal} se llama ${nombre}.`)

Devolvería:

Mi animal preferido es el perro.
Mi perro se llama Firuláis.

Comentar código

• // - Comenta toda la linea.
• /* código */ - Comenta todo dentro de los símbolos de inicio y de final, a pesar de que estén en diferentes líneas.

Tipos de datos

• Number - Un valor numérico, con o sin decimales.
• String - Una cadena de texto, si se introduce un número se tratará como caracter. Diferencia mayúsculas y minúsculas.
• Boolean - Valor binario (verdadero o falso).
• Null - Declara un valor vacío.
• Undefined - Declara un valor sin definir (No es lo mismo que null). Es el valor por defecto de las variables cuando no se les asigna un valor.
• Symbol - (REVISAR)
• Object - Objeto, que contiene métodos a los que podemos llamar, como la clase Console o Math.

Variables

• var nombreVariable = valor - Declara una variable genérica asignándole un nombre y un valor.
• let nombreVariable = valor - Declara una variable que permite cambiar el valor introducido.
• const nombreVariable = valor - Declara una variable que no permite cambiar el valor introducido. Si se intenta cambiar el valor devuelve un error TypeError: Assignment to constant variable.

var variableNormal = 5;
let variableDinámica = 2;
const variableFija = 8;

variableNormal = 7;
variableDinámica = 10;

Operadores Aritméticos y de Asignación

Además de los operadores ordinarios +, -, * y / JavaScript permite realizar asignaciones rápidamente con +=, -=, *= y /=. De esta forma sumaCinco += 5 es lo mismo que sumaCinco = sumaCinco + 5;. Existen además dos operadores especiales para incrementar o disminuir 1 de forma más rápida, ++ y --.

Operadores Condicionales

Podemos realizar comprobaciones que devuelven verdadero o falso mediante operadores condicionales. Se coloca una variable o valor antes y después de cada operador:

• Mayor que >
• Menor que <
• Mayor o igual que >=
• Menor o igual que <=
• Igual ===
• Diferente !==

Operadores Lógicos

Para combinar varias condiciones en un único valor verdadero/falso usamos estos operadores. Se colocan entre dos condiciones y devuelven verdadero o si cumplen las reglas de cada operador. Son:

• And && - Devuelve positivo únicamente cuando ambas condiciones se cumplan.
• Or || - Devuelve positivo cuando una de las condiciones se cumple.
• Not ! - Devuelve el valor contrario al obtenido. Se coloca delante de una condición.

const animal = 'perro';
const nombre = 'Firuláis';

console.log(animal === 'perro' && nombre === 'Firuláis');       //Imprime verdadero
console.log(!(animal === 'perro') && nombre === 'Firuláis');    //Imprime falso

Métodos String

• .length - Devuelve la cantidad de caracteres del string.
• .toUpperCase - Convierte en mayúsculas el string.
• .startsWith(caracter) - Devuelve verdadero si el primer carácter del string se corresponde con el carácter introducido.
• .trim() - Elimina espacios y tabulaciones al inicio y final del string.
• typeof - Comprueba el tipo de dato de la variable a su derecha y devuelve un string indicándolo.
• Mas métodos en la documentación Strings de JavaScript.

Métodos Math

La clase Math contiene métodos que nos permiten realizar operaciones matemáticas mas avanzadas.

• Math.random() - Devuelve un número aleatorio entre 0 y 1.
• Math.floor(valor) - Trunca el valor.
• Math.ceil(valor) - Devuelve el numero entero superior o igual mas cercano al valor introducido.
• Number.isInteger(valor) - Devuelve verdadero si el valor introducido es un entero.
• Mas métodos en la documentación Math de JavaScript y Number de JavaScript.

Sentencias condicionales

If-Else

Esta sentencia nos permite comprobar una o varias condiciones y ejecutar diferentes fragmentos de código según su resultado. La condición se coloca dentro de los paréntesis del if y los fragmentos de código dentro de las llaves.

var animal = 'perro';

if (animal === 'perro') {
    console.log('A mi también  me gustan los perros');
} else {
    console.log('Los perros son mejores');
}

Además de condiciones se pueden introducir variables. Devolverán positivo a pesar de no ser booleanos siempre que no contengan:

• 0
• null
• undefined
• NaN - (Not a Number, no es un número)
• '' o "" - String vacío

A estas evaluaciones se les suelen llamar Truthy values y Falsy values.

var mensaje = 'Hola mundo!';

if (mensaje) {
    console.log(mensaje);
} else {
    console.log('No hay mensaje.');
}

También podemos usarlos en asignaciones para reducir el código. El trozo de código siguiente de código realiza las mismas acciones que el ejemplo previo.

var mensaje = 'Hola mundo!';

console.log(mensaje || 'No hay mensaje.');

Else-If

Permiten simplificar código. Cuando queremos comprobar varias condiciones podemos indentar sentencias if unas dentro de otras. En lugar de eso utilizamos Else-If para comprobar más condiciones y ejecutar un trozo de código exclusivo para ellas.

var edad = 18;

if (edad<18) {
    console.log('Menor de edad');
} else {
    if (edad<65) {
        console.log("Mayor de edad");
    } else {
        if (edad<100) {
            console.log('Jubilado');
        } else {
            console.log("Centenario!");
        }
    }
}

El código siguiente realiza lo mismo que el anterior, pero resulta mas sencillo de leer y requiere menos líneas.

var edad = 18;

if(edad<18) {
    console.log('Menor de edad');
} else if(edad<65) {
    console.log("Mayor de edad");
} else if(edad<100){
    console.log('Jubilado');
} else {
    console.log("Centenario!");
}

Operadores Ternarios

Son similares al If-Else, utilizan la estructura condición ? código a ejecutar si es verdadero : código a ejecutar si es falso. La principal desventaja es que solo permiten ejecutar dos fragmentos de código para una condición.

var mensaje = 'Hola mundo!';

if (mensaje) {
    console.log(mensaje);
} else {
    console.log('No hay mensaje.');
}

El código siguiente realiza las mismas acciones que el anterior pero utilizando menos líneas.

var mensaje = 'Hola mundo!';

mensaje ? console.log(mensaje) : console.log('No hay mensaje.');

Switch

Para las variables con diferentes valores querremos comprobar esos valores sin repetir cada vez la condición. El switch toma la variable indicada y ejecuta el código correspondiente hasta encontrar break;. ¡Atención!, si no se coloca break; después de cada trozo de código se continuará ejecutando el fragmento siguiente a pesar de que no se corresponda el valor.

var corredor = 1;

switch(corredor) {
    case 1:
        console.log('Usain Bolt');
        break;
    case 2:
        console.log('Tyson Gay');
        break;
    case 3:
        console.log('Yohan Blake');
        break;
    case 4:
        console.log('Asafa Powell');
        break;
    case 5:
        console.log('Justin Gatlin');
        break;
}

Funciones

Utilizamos funciones cuando repetimos fragmentos de código varias veces. Si queremos calcular el área de varias habitaciones es preferible crear una función que nos devuelva el área cuando le introducimos las medidas de la casa. Para declarar una función usaremos la siguiente estructura function nombreFunción ( parámetros ) { código }. Se pueden introducir varios parámetros, que pueden estar iniciados a un valor predeterminado parámetro = valorPorDefecto. Se acepta como parámetro otra función, a la que se le llamará con el nombre del parámetro. Las funciones dan la posibilidad de devolver un valor, para eso deberemos incluir la sentencia return dentro del código seguida del valor a devolver.

function areaHabitacion(nombre = 'invitado', largo, ancho) {
    let area = largo*ancho;
    
    console.log('La habitación de ' + invitado + ' mide ' + area);
    
    return largo*ancho;
}

console.log(areaHabitacion('Pepito', 5, 4));

Podemos declarar funciones dentro de expresiones (variables) llamadas “Function expression”. Para hacerlo declaramos una variable y le asignamos una función sin nombre a la que se llama “Función anónima”. Para llamar a la función deberemos de usar el nombre de la variable en lugar del nombre de la función (ya que no tiene).

const areaHabitacion = function(nombre = 'invitado', largo, ancho) {
    let area = largo*ancho;
    
    console.log('La habitación de ' + invitado + ' mide ' + area);
    
    return largo*ancho;
};

console.log(areaHabitacion('Pepito', 5, 4));

Existe otra estructura para declarar funciones llamada “Arrow function” que consiste en declaración de variables = ( parámetros ) => { código };

const areaHabitacion = (nombre = 'invitado', largo, ancho) => {
    let area = largo*ancho;
    
    console.log('La habitación de ' + invitado + ' mide ' + area);
    
    return largo*ancho;
};

Las “Arrow functions” permiten eliminar los paréntesis () que rodean los parámetros en caso de que se utilice únicamente un parámetro, y las llaves {} cuando el código solo contiene una línea de código.

const saludar = nombre => console.log('Hola ' + nombre + '!');
saludar('Firuláis');

Alcance de Variables

En programación no podemos acceder a todas las variables según donde nos encontremos. Existen dos tipos:

• Global variables (Globales) - Son aquellas variables creadas en el cuerpo del programa, fuera de cualquier sentencia condicional o bucle. Son accesibles desde cualquier lugar del programa.
• Block variables (Locales) - Son aquellas variables creadas dentro del código a ejecutar de una sentencia condicional o bucle. Solo son accesibles desde el interior de dicha sentencia o bucle.

let animal = 'perro';           //Accesible desde todo el código.

if (animal === 'perro') {
    const nombre = 'Firuláis';  //Accesible solo desde el interior del if.
}

console.log(animal);            //Imprime "perro".
console.log(nombre);            //Devuelve el error "ReferenceError: region is not defined"

Arrays

Utilizamos arrays para almacenar paquetes de datos en una misma variable. Para declarar un array deberemos asignar al nombre de la variable todos los valores que queramos dentro de corchetes [] separados por comas , entre sí.

const dias = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];

Para acceder a los datos en su interior podremos acceder a todos a la vez o a uno en concreto, Para acceder a todos trataremos al array como una variable normal, pero si queremos acceder a un valor concreto deberemos añadir detras del nombre de la variable la posición del valor a obtener junto y entre corchetes [] empezando a contar desde 0.

console.log(dias);      //Imprime "['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo']".
console.log(dias[2]);   //Imprime "Miércoles".
console.log(dias[7]);   //Imprime undefined.

Los arrays declarados como let permiten cambiar valores específicos del array y volver a inicializarlos, en cambio los declarados con const solo permiten modificar los valores específicos y devuelven el error TypeError: Assignment to constant variable..

Los arrays pueden contener otros arrays en su interior. Para acceder a un valor concreto de este array deberemos indicad el nombre del array principal seguido de la ubicación del array secundario entre corchetes [] y la ubicación del elemento del array secundario entre otros corchetes [].

const array = [[1], [2, 3]];

console.log(array[1][0]);       //Devolverá 2

Métodos arrays

• .length - Devuelve el número de elementos contenidos en el array.
• .push(valores) - Añade al final los valores introducidos, aumentando la longitud del array.
• .pop() - Devuelve el último valor contenido y lo elimina, reduciendo la longitud del array.
• .join(separador) - Devuelve un string que contiene todos los elementos del array separados por el caracter indicado o coma , si no se especifica ninguno.
• .slice() - Devuelve un array que contiene unicamente los arrays contenidos en en intervalo indicado.
• .splice(inicio, nEliminar, valores) - Elimina el número de valores indicados despueés de la posición indicada y añade en su lugar los nuevos valores.
• .shift() - Devuelve el primer valor contenido y lo elimina, reduciendo la longitud del array.
• .unshift() - Añade un valor en la primera posición, aumentando la longitud del array.
• .concat(array) - Devuelve un array con los elementos del array sobre el que se aplica y el introducido como parámetro.
• Más métodos en la documentación Arrays de JavaScript

Bucles

For

El bucle for permite recorrer un fragmento de código un número concreto de veces. Sigue la estructura for ( inicialización de la variable ; condición ; variación ) { código }. En el ejemplo siguiente se definirá e inicializará la variable a 0, se ejecutará el bucle mientras que la variable sea menor que 4 e incrementara 1 su valor cada vez que se ejecute el código en su interior. La variación de la variable puede ser negativa, para que el bucle se recorra a la inversa. ¡Atención! se deberán cambiar también el resto de parámetros del for y dar la vuelta al operador de la condición < por >, y modificar los valores de la inicialización y condición.

for (let i = 0; i < 4; i++) {
  console.log(i);
}

Al ejecutar el código se imprimiría por pantalla:

0
1
2
3

En el caso de recorrerse un array se aconseja utilizar el método .length en la condición para parametrizar. Si estamos imprimiendo los valores de un array de longitud 3 y utilizamos este método como condición el bucle seguirá imprimiendo todos los valores aunque añadamos mas o eliminemos existentes.

const dias = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];

for (let i = 0; i < dias.length; i++) {
  console.log(dias[i]);
}

Podemos crear bucles unos dentro de otros. De esta manera podemos crear filtros fácilmente:

let peliculasPepe = ['Ex Machina','Ready Player One','The Martian','Interestelar'];
let peliculasJuan = ['Matrix','The Martian','Ready Player One'];

for (let i = 0; i < peliculasPepe.length; i++) {
  for (let j = 0; j < peliculasJuan.length; j++) {
    if (peliculasPepe[i] === peliculasJuan[j]) {
      console.log(peliculasPepe[i]);
    }
  }
}

El programa las películas que están en ambas listas:

Ready Player One
The Martian

While

El bucle while ejecuta el bloque de código mientras la condición se cumpla. Sigue la estructura while ( condición ) { código } . Primero se comprueba la condición y después se ejecuta el código.

let numero;

while(numero<50){
    numero = Math.random()*100;
}

console.log(numero);

Do-While

El bucle do while ejecuta el bloque de código mientras la condición se cumpla. Sigue la estructura do { código } while ( condición ) . Primero se ejecuta el código y después se comprueba la condición.

let numero;

do {
    numero = Math.random()*100;
} while(numero<50){

console.log(numero);

Palabra break

Nos permite romper un bucle instantáneamente. Si el código alcanza esta sentencia saldrá del buche como si ya no se cumpliese la condición.

Iteradores de Arrays

• .forEach(función) - Aplicado a un array ejecuta la función pasada como parámetro a cada valor del array.
• .map(función) - Aplicado a un array devuelve un array con los valores obtenidos al ejecutar la función pasada como parámetro a cada valor del array.
• .filter(función) - Aplicado a un array devuelve un array con los valores que cumplen las condiciones de la función booleana introducida como parámetro.
• .findIndex(función) - Devuelve el primer valor que cumple la condición de la función booleana introducida como parámetro.
• .reduce(función) - Este método espera una función de dos parámetros, que serán un acumulador y el valor actual de la iteración, y opcionalmente un valor externo que se utilizará para inicializar el acumulador de la función. Por defecto se asigna al acumulador el primer valor del array y el segundo al valor actual. Cada vez que se realiza una iteración se asigna al acumulador el valor devuelto por la función en la iteración anterior y el valor siguiente del array al otro parámetro.
• .some(función) - Devuelve verdadero si alguno de los elementos del array cumple la condición de la función.
• .every(función) - Devuelve verdadero si todos de los elementos del array cumple la condición de la función.
• Más métodos en la documentación Iteradores de JavaScript

const dias = ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo']

const diasPequenios = dias.filter(function(x){
    return x.length<=6
});

console.log(diasPequenios)

Imprimirá por pantalla los dias de seis y menos letras
´´´
lunes
martes
jueves
sábado
´´´

Objetos

JavaScript permite crear grupos de valores y acciones llamados objetos. Para declararlos se sigue la estructura let nombre = { contenido } ;

Propiedades

En JavaScript los objetos contienen grupos de parejas nombre-valor a los que accedemos a partir del nombre del objeto y la propiedad. Sigue la estructura nombre : valor, y los separamos entre comas si queremos definir más de uno.

let coche = {
    marca : 'Tesla',
    modelo : 'Model S3',
    color : 'negro'
};

Para obtener los valores almcaenados deberemos de acceder al objeto con nombreObjeto . nombrePropiedad o como en los arays con nombreObjeto [ nombrePropiedad ]. Si la propiedad no esta definiad o no tiene valor devolverá undefined.

console.log(coche.marca);           //Imprimirá "Tesla"
console.log(coche[matrícula]);      //Imprimirá "undefined"

Se pueden crear nuevas propiedades y cambiar los valores de las ya existentes asignando un valor después de la consulta.

coche.marca = 'Mercedes';
coche[modelo] = 'Clase A';

También se pueden eliminar propiedades con la palabra delete.

delete coche.color;

Métodos

Los métodos son acciones que realizan los objetos. Se declaran como las propiedades pero asignando como valor una función anónima.

let coche = {
    arrancar: function() {
        console.log('Arrancando vehículo');
    },
    arrancar: function() {
        console.log('Parando vehículo');
    },  
    aparcar: function() {
        console.log('Aparcando vehículo');
    }
};

Reasignar con funciones

Al pasar los objetos como parámetros no se transmite toda la información como datos sino que de indica la dirección de memoria en la que se encuentra, por lo tanto realizar cualquier cambio desde una función supondrá la modificación del objeto, pero no las reasignaciones. Imaginemos el siguiente caso:

1. Declaramos un objeto ‘coche’ con varios parámetros.
2. Declaramos una función que reasigna el objeto.
3. Declaramos una función que modifica las propiedades del objeto.
4. Llamamos la primera función sobre el objeto e imprimimos por pantalla.
5. Llamamos la segunda función sobre el objeto e imprimimos por pantalla.

let coche = {
    marca : 'Tesla',
    modelo : 'Model S3',
    color : 'negro'
};

function pintar1(obj) {
    obj = {
        color: 'amarillo chillón'
    }
};

function pintar2(obj) {
    obj.color = 'verde pistacho'
};

pintar1(coche);
console.log(coche);
pintar2(coche);
console.log(coche);

Observemos los resultados

{ marca: 'Tesla', modelo: 'Model S3', color: 'negro' }
{ marca: 'Tesla', modelo: 'Model S3', color: 'verde pistacho' }

La primera función deberia devolver haber cambiado el color de ‘negro’ a ‘amarillo chillón’, pero no lo ha hecho. El parametro enviado a la función contiene la dirección de memoria del objeto, por lo que al machacar el objeto con los nuevos datos, se pierde la referencia con el objeto original y no se llevan a cabo modificaciones, en cambio, con la segunda función se modifica el valor de la propiedad del obojeto asignado como parámetro.

Recorrer objetos

Los bucles for tienen un uso específico para recorrer objetos, siguiendo la estructura: for ( variable in objeto ) { código }.

let conductores = {
    Pedro: {
        dni: '12345678A',
        edad: 34
    },
    Juan: {
        dni: '12345678B',
        edad: 23
    },
    Perico: {
        dni: '12345678C',
        edad: 45
    },
};

for (let persona in conductores) {
    console.log(persona+':');
    console.log('   DNI: '+conductores[persona].dni);
    console.log('   Edad: '+conductores[persona].edad);
};

Imprime:

Pedro:
    DNI: 12345678A
    Edad: 34
Juan:
    DNI: 12345678B
    Edad: 23
Perico:
    DNI: 12345678C
    Edad: 45