En esta página te puedes decargar el Manual Javascript de Manual Web en dos modalidades. Por un lado te puedes descargar el manual tal cual está hoy o bien descargarte el manual y estar actualizado todos los meses con las novedades que se vayan incorporando al manual.

También puedes buscar descargarte uno a uno el resto de manuales que tenemos publicados en Manual Web.

Incluso puedes descargarte todos los manuales que tenemos publicados, así como mantenerte actualizado mes a mes con las actualizaciones que estos manuales tengan e incluso la incorporación de nuevos manuales incluida en el precio.

Descargar Manual Javascript

let cadena = "Soy una cadena";
let otra_cadena = 'Yo también soy una cadena';

Es importar que en estos momentos las variables que hemos creado son del tipo primitivo “string”, lo cual podremos comprar ejecutando un sencillo typeof sobre la variable.

Concatenar Cadenas de texto

Si queremos concatenar cadenas de texto Javascript podemos recurrir al operador +, el cual, a parte de servirnos para sumar números nos permite concatenar las cadenas de texto.

Por ejemplo podríamos utilizarlo de la siguiente manera:

let nombre = "Víctor";
let saludo = "Hola, " + nombre + "!";

Cadenas de Texto Multi-línea

En el caso de que estemos manejando cadenas de texto Javascript muy largas podemos codificarlas como cadenas de texto multi-línea. Es decir, podremos distribuir su contenido en varias líneas.

Para ello tenemos tres alternativas. La primera consiste en utilizar una barra invertida al final de cada línea de texto. Quedaría de la siguiente forma:

let cadena = "En un lugar de la Mancha, \
de cuyo nombre no quiero acordarme, \
no ha mucho tiempo que vivía \
un hidalgo de los de lanza en astillero, \
adarga antigua, rocín flaco y galgo corredo";

La segunda opción consiste en concatenar cadenas de texto Javascript como hemos visto en el apartado anterior. En este caso, nuestro código, quedaría de la siguiente forma:

let cadena = "En un lugar de la Mancha, " +
"de cuyo nombre no quiero acordarme, " +
"no ha mucho tiempo que vivía " +
"un hidalgo de los de lanza en astillero, " + 
"adarga antigua, rocín flaco y galgo corredo";

La última opción que tendríamos sería utilizando la comilla simple invertida, esto nos permite poner directamente el contenido en varias líneas sin utilizar un operador o carácter por medio. Por lo que queda más claro.

En este caso el código quedaría de la siguiente forma:

let cadena = `En un lugar de la Mancha,
de cuyo nombre no quiero acordarme, 
no ha mucho tiempo que vivía 
un hidalgo de los de lanza en astillero,  
adarga antigua, rocín flaco y galgo corredo`;

Es importante saber que en este caso los saltos de línea son guardados como tal, por lo que tendremos que tenerlo en cuenta a la hora de procesar este tipo de cadenas.

Cadenas de Texto con Plantillas

La definición de cadenas de texto Javascript mediante la comilla simple invertida nos da la posibilidad también de utilizar plantillas que inserten variables en mitad del texto. De esta manera podremos evitar el realizar concatenaciones del contenido de varias cadenas.

Las variables que queramos insertar dentro de la plantilla se reflejarán mediante la estructura ${variable}.

El código que hemos representado anteriormente para poder concatenar cadenas quedaría, mediante en uso de plantillas en cadenas de texto, de la siguiente manera:

let nombre = "Víctor";
let saludo = `Hola, ${nombre}!`;

El objeto String

En Javascript, además del tipo de cadena primitivo, existe el objeto String. Así podremos definir cadenas de texto mediante este objeto, y lo que es más interesante, podremos manipularlas mediante sus propiedades y métodos.

Así podemos crear un objeto String de la siguiente forma:

let cadena = new String("cadena de texto");

Es importante saber que si aplicamos el operador typeof sobre un tipo de dato primitivo cadena nos devolverá “string”. Pero silo hacemos mediante un objeto String, nos devolverá “object”

Tamaño de una cadena de texto

El objeto String tiene una propiedad llamada .length que nos devuelve el tamaño de la cadena de texto. Su sintaxis es la siguiente:

.length

De esta forma podríamos mostrar el tamaño de una cadena por consola mediante el siguiente código:

let cadena = "Soy una cadena";
console.log(`El tamaño de ${cadena} es de ${cadena.length}`);

Las promesas en Javascript son un tipo de objeto sofisticado y poderoso que representa la terminación o el fracaso eventual de una operación asíncrona.

Este concepto es crucial en el mundo del desarrollo de Javascript, especialmente cuando se trata de operaciones asíncronas que tardan un tiempo en completarse, como puedes ser el caso de la lectura de archivos o las solicitudes de red.

Las promesas nos aportan una estructura y una organización muy necesarias, permitiendo a los desarrolladores manejar estas operaciones asíncronas de una manera mucho más intuitiva, fácil de entender y manejable.

Lo hacen proporcionando una forma sistemática de adjuntar callbacks para el éxito o el fracaso de las operaciones asíncronas, mejorando así la legibilidad y la mantenibilidad del código.

Estados de una Promesa

Es esencial que comprendamos los diferentes estados por los que puede pasar una Promesa cuando tratamos de gestionarla en el desarrollo de software. Estos estados son una parte fundamental del ciclo de vida de una Promesa y pueden influir significativamente en cómo se maneja la Promesa en el código. Los estados por los que puede pasar una Promesa son los siguientes:

• Pending (pendiente), este es el estado inicial de una Promesa. En este estado, la Promesa aún no se ha resuelto ni rechazado. Esencialmente, la tarea que la Promesa representa todavía está en curso.
• Fullfilled (cumplida), este es el estado que indica que la Promesa se ha resuelto con éxito. En otras palabras, la tarea que la Promesa representaba se ha completado de manera satisfactoria.
• Rejected (rechazada), este estado indica que ha ocurrido un error en la tarea que la Promesa representaba. En este caso, la Promesa se ha rechazado debido a este error.

Definir una Promesa

Para definir una promesa simplemente deberemos de crear un nuevo objeto de tipo Promise.

Una promesa en Javascript se define utilizando la palabra clave new seguida de la clase Promise. La clase Promise acepta una función como argumento, que a su vez acepta dos parámetros: resolve y reject.

const promesa = new Promise((resolve,reject))

Estos parámetros son funciones que se invocan para indicar el éxito o el fracaso de la operación asíncrona.

De esta manera podríamos definir la siguiente promesa:

let promesa = new Promise((resolve, reject) => {
    let numero = Math.floor(Math.random()*6+1);
    if (numero == 3) {
        resolve({"mensaje":"Número Correcto","numero":numero});
    } else {
        reject({"mensaje":"Número Incorrecto","numero":numero});
    }
});

En este ejemplo, la promesa simula el lanzamiento de un dado y nos devolverá una condición correcta mediante resolve si el dado ha sacado un 3 y si no nos devolverá una condición errónea mediante reject.

¿Cómo se consume una promesa en Javascript?

Una vez que ya sabemos definir una promesa mediante el objeto Promise vamos a ver cómo se consume. Para ello tenemos que saber que existen tres métodos principales para su gestión: .then() que nos permite indicar una función para el éxito y otra para el fracaso de la promesa, .catch() que nos permite gestionar un error en la ejecución de la operación de la promesa y .finally() que será el último método en ejecutarse y que nos permitirá realizar gestiones de cierre o eliminación de los recursos en la operación.

Pero vamos a ver estos métodos un poco más en detalle:

.then()

El método .then() se encadena a la promesa y toma dos argumentos: una función de devolución de llamada para el éxito y otra para el fracaso de la promesa. Es decir, la función de devolución de llamada de éxito se ejecuta cuando se resuelve la promesa, mientras que la de fracaso se ejecuta cuando se rechaza.

La sintaxis del método .then()

p.then(onFulfilled[, onRejected]);
p.then(value => { // fulfillment }, reason => { // rejection });

De esta manera podemos utilizar el método .then() dentro de nuestro ejemplo de promesa anterior de la siguiente forma para gestionar una situación de cumplimiento:

promesa.then(valor => {console.log(valor.mensaje)});

O bien mediante el código:

promesa.then(valor => {console.log(valor.mensaje)},
             rechazo => {console.log(rechazo.mensaje)});

Para gestionar tanto la situación de cumplimiento como la situación de rechazo.

.catch()

El método .catch() se utiliza para manejar cualquier error que pueda ocurrir durante la ejecución de la operación asíncrona. Es similar al segundo argumento del método .then(), pero tiene la ventaja de poder manejar errores de varias promesas en una cadena de promesas.

La sintaxis del método .catch() es la siguiente:

p.catch(onRejected); 
p.catch(function(reason) { // rejection });

Si aplicamos el método .catch() en la promesa que habíamos definido al principio tendremos lo siguiente:

promesa.catch(valor => {console.log(valor.mensaje + " " + valor.numero)});

.finally()

Por último, .finally() es un método que se ejecuta siempre, independientemente de si la promesa se resolvió o se rechazó. Esto es útil para limpiar o finalizar cualquier recurso que se haya utilizado durante la operación asíncrona.

La sintaxis del método .finally() es la siguiente:

p.finally(onFinally);
p.finally(function() { // settled (fulfilled or rejected) });

En nuestro código no es que tengamos que liberar muchos recursos, pero si que podemos indicar que se ha terminado de procesar la promesa.

promesa.finally(()=>console.log("Fin ejecución de la promesa"));

Esto lo puedes comprobar mediante el siguiente código:

function sumar (numero1, numero2) {
  // Ignoramos siempre el primer número
  numero1 = 0;
  return numero1 + numero2;
}

let n1 = 2;
let n2 = 3;

console.log(sumar(2,3));
console.log(n1);

Pero, si pasamos un objeto a una función, este sí que podrá verse modificado su contenido. Lo puedes comprobar con el siguiente código:

function cambiar (persona) {
  persona.nombre = "Luis";
}

let persona = {
  "nombre":"Víctor",
  "edad":42
};

console.log("Antes de invocar");
console.log(persona.nombre);  // Saldrá Víctor

cambiar(persona);
console.log("Después de invocar");
console.log(persona.nombre); // Saldrá Luís

Parámetros Opcionales

Una de las cosas que tenemos que sabes es que al llamar a una función no es necesario pasarle todos los parámetros que tiene en su definición, ya que, todos por defecto son opcionales. En el caso de que un parámetro no tenga un valor de invocación aparecerá con un valor de undefined.

Por lo que los parámetros opcionales tendremos que controlarlos en el código de nuestra función:

function suma (a,b){
	if (a == undefined) a=0;
  if (b == undefined) b=0;

  return a+b;
}

let n1=2;
console.log(suma(n1));

Parámetros por defecto

A partir de ECMA 2015 podemos controlar los parámetros opcionales mediante parámetros por defecto. La idea es que en este caso el parámetro tendrá asignado un valor por defecto en el caso de que el parámetro no llegue.

Lo que haremos será dar un valor al parámetro en la definición de la función. La signatura en este caso sería la siguiente:

function nombre_funcion (argumento = valor_por_defecto) {
  sentencias;
  return valor_retorno;
}

Y si lo aplicamos a nuestra función de suma lo codificaremos de la siguiente forma:

function suma (a=0,b=0){
  return a+b;
}

let n1=2;
console.log(suma(n1));

Parámetro Resto

Otra opción para gestionar los parámetros es utilizar el parámetro resto. Esto nos permite el poder definir una función con un conjunto de parámetros fijos y un conjunto de parámetros variables, lo que denominaríamos resto.

En este caso la sintaxis de la función sería la siguiente:

function nombre_funcion (argumento, ...resto) {
  sentencias;
  return valor_retorno;
}

Vemos que el argumento resto va con el operador spread que es representado por los tres puntos … más el nombre de la variable.

Lo que podremos hacer en el cuerpo de la función es acceder de forma iterativa sobre dicha variable.

Por ejemplo, podríamos crear una operación que preguntase por el tipo de operación que quieres hacer con un número fijo y el resto de los números pasados de forma variable como respuesta. Sería algo así:

function operar(operacion,valor_inicial, ...args){
    let valor = valor_inicial;

    switch (operacion) {
        case "suma":
            for (let x=0;x<args.length;x++)
                valor += args[x];
            break;
        case "resta":
            for (let x=0;x<args.length;x++)
                valor -= args[x];
            break;
        case "multiplicacion":
            for (let x=0;x<args.length;x++)
                valor *= args[x];
            break;
        case "division":
            for (let x=0;x<args.length;x++)
                valor /= args[x];
            break;

    }
    
    return valor;
}

console.log(operar("suma",5,2));
console.log(operar("resta",5,2,3));
console.log(operar("multiplicacion",5,2,4,5));
console.log(operar("division",10,5));

Función Arguments

Otro elemento que tenemos que conocer para gestionar los parámetros de una función es la función arguments. Esta función contiene todos los parámetros con los que se ha invocado a la función, desde el primero al último. Por lo que podríamos decir que es un elemento iterable.

La función arguments contiene todos los parámetros que se le pasan a la función, mientras que el parámetro resto solo tiene la colección de los parámetros variables.

De esta manera la función puede iterar por la colección arguments para ver qué valores se le han pasado a la función.

Para acceder a un elemento en concreto de arguments escribiremos lo siguiente:

arguments[x];

Dónde x es la posición, empezando por el valor 0, que ocupa el parámetro en la invocación de la función.

Mediante la función arguments podríamos crear una función que sumase todos los números que le lleguen independiente del números que le indiquemos. El código quedaría como se ve a continuación:

function sumar(){
    let suma = 0;
    for (let x=0;x<arguments.length;x++)
        suma += arguments[x];

    return suma;
}

console.log(sumar(1,2));
console.log(sumar(1,2,3));
console.log(sumar(1,2,3,4,5));

Las funciones Javascript nos permiten definir y agrupar un conjunto de sentencias a las cuales podemos invocar en diferentes partes de nuestro programa. Es por ello que diferenciaremos la parte que nos permite definir la función de la parte que realiza la invocación a la función.

También hay que saber que el lenguaje Javascript nos ofrece un conjunto de funciones predefinidas que podremos utilizar en nuestros programas.

Definir funciones Javascript

Para definir funciones Javascript deberemos de saber que estas tienen la siguiente estructura:

function nombre_funcion (argumentos) {
  sentencias;
  return valor_retorno;
}

Los elementos que nos encontramos en la definición de las funciones Javascript son los siguientes:

• Lo primero que vemos es que utilizamos el literal function para definir la función.
• A continuación indicaremos el nombre que le queremos dar a la función.
• Entre paréntesis declararemos, separados por comas, los argumentos (o parámetros) que recibirá la función.
• Entre llaves incluiremos las sentencias que formarán parte de la función.
• En el caso de que queramos devolver algún valor de retorno en la función utilizaremos la sentencia return.

Con este conocimiento básico podemos definir nuestra primera función que realice una suma de dos elementos, la cual nos quedará de la siguiente forma:

function sumar (numero1, numero2) {
	let suma = numero1 + numero2;
  return suma;
}

Invocar funciones Javascript

Para invocar funciones Javascript valdrá con poner el nombre de la función y pasarle los parámetros que necesite. La estructura para invocar funciones Javascript será la siguiente:

nombre_funcion(parametros);

De esta forma podemos invocar a nuestra función Javascript de suma de números de la siguiente forma:

function sumar (numero1, numero2) {
	let suma = numero1 + numero2;
  return suma;
}

let n1 = 2;
let n2 = 3;

console.log(sumar(2,3)); // 5

Funciones anónimas

En la estructura general de las funciones hemos indicado que estas tienen que tener un nombre, el cual hemos visto que utilizamos para poder invocar a la función. Si bien, en Javascript, podemos definir funciones sin nombre, que es lo que se conoce como funciones anónimas.

Es decir, la estructura en este caso sería de la siguiente forma:

function (argumentos) {
  sentencias;
  return valor_retorno;
}

Pero si la función no tiene nombre, ¿cómo la invocamos? En este punto la idea de las funciones anónimas es que son funciones que solo van a ser utilizadas una vez o bien que las asignamos en una expresión de función (esto ya lo veremos más adelante).

Por lo cual las funciones anónimas serán funciones que asignemos a una variable, que será la que utilicemos para su invocación:

let sumar = function(a,b) {
  return a+b;
}

O bien como parámetro de una función, que serían las funciones callback. Esto lo encontramos en los modelos DOM para gestionar eventos. Seguro que has manejado alguna vez la función addEventListener y este código no te suena extraño:

let boton = document.getElementById("miboton");
boton.addEventListener("click", function() {
  console.log("Botón pulsado");
});

Vemos que la función asociada al evento click es una función anónima en Javascript ya que va a quedar únicamente asociada a dicho evento y no la vamos a reutilizar más.

Ámbito de una función

Cuando hablamos del ámbito de las funciones Javascript tenemos que saber que las variables de una función solo pueden ser accedidas dentro de la función. Si bien, desde la función podemos acceder al resto de variables globales definidas en nuestro código.

De esta manera, en el caso de que vayamos anidando funciones, estás podrán acceder a las variables definidas en sus funciones padres.

Esto lo podemos ver en el siguiente código:

let contador = 1;
function incremento() {
  let inc = 2;
  return contador+inc;
}

console.log(incremento());  // Devuelve 3
console.log(inc);  // Da un error

En el código vemos cómo la función incremento puede acceder a la variable global contador, pero que la variable inc definida dentro de la función incremento ya no se puede acceder de forma externa a la función.

Pero existe otra forma de declarar una función y esto se conoce como expresiones de función. La idea es declarar una función sobre una variable. De esta manera podremos, por ejemplo, mover la variable que tiene la función como parámetro de otras funciones.

Las sintaxis de las expresiones de función es la siguiente:

variable = function nombre () {
  sentencias;
  return valor;
}

Si bien el nombre o el devolver un valor son elementos opcionales. En el caso de no identificar un nombre será una función anónima.

Podemos definir nuestra función de suma como una expresión de función de la siguiente manera:

let suma = function(a,b) {
  return a+b;
}

console.log(suma(2,3));

También podríamos haber definido nuestra expresión de función con un nombre:

let suma = function sum(a,b) {
  return a+b;
}

console.log(suma(2,3));

En este caso el nombre sum no se puede utilizar para ejecutar la función. Pero nos valdrá para nombrarla y hacer seguimiento de ella en el caso de que estemos depurando nuestro código fuente.

Como hemos comentado las expresiones de función se pueden pasar como parámetro en otras funciones. De esta forma, si tenemos una función que te calcule el cuadrado de un número:

const square = function (x) { return Math.pow(x,2)};

La podremos pasar como parámetro a otra función que sume un listado de números aplicando esta función. Lo que quedaría de la siguiente forma:

const sumador = function (operacion,elementos){
    let resultado = 0;
    for (let x=0;x<elementos.length;x++)
        resultado += operacion(elementos[x])
    return resultado;
}

Para invocar a la función lo haremos así:

let numeros = [1,2,3,4,5];
console.log(sumador(square,numeros)); // 55

Pero es que a esta misma función le podríamos pasar una operación que calculase el cubo de un número, es decir, elevarlo a su tercera potencia.

const cube = function (x) { return Math.pow(x,3)};

Y pasárselo a la misma función:

let numeros = [1,2,3,4,5];
console.log(sumador(cube,numeros)); // 225

Pero, podríamos ir mucho más allá y en nuestra función principal indicar que esperamos una función, pero que si no viene no hacemos nada con los números y solo los sumamos. Así, que tal como vimos en la definición de valores por defecto la codificaríamos de la siguiente forma:

const sumador = function (operacion = (x)=>x,elementos){
    let resultado = 0;
    for (let x=0;x<elementos.length;x++)
        resultado += operacion(elementos[x])
    return resultado;
}

Por lo que podríamos llamarla sin pasar una función, es decir, indicando el valor undefined.

let numeros = [1,2,3,4,5];
console.log(sumador(undefined,numeros)); // 15

Funciones anidadas

Antes de entra en detalle sobre los closures Javascript lo primero que tenemos que saber es que las funciones en Javascript se pueden anidar. Es decir, podemos definir una función dentro de otra función.

function exterior(parametros) {
  function interior(parametros) {
     sentencias;
     return interior;
   }
   return exterior;
}

exterior(parametros);

En esta estructura tenemos una función interna que por un lado puede acceder a la información que tiene la función exterior. De forma externa solo podemos invocar a la función exterior, pero nunca a la interior.

Por ejemplo, si queremos definir una función que sume dos números elevados al cuadrado podríamos tener el siguiente código:

function addSquare(a,b) {
    function square (x) {
        return x*x;
    }
    return square(a)+square(b);
}

console.log(addSquare(2,3)); // 13
console.log(square(2));      // No se puede invocar

Como podemos ver la función externa addSquare tiene una función interna que se llama square que es invocada y utilizada para devolver un valor. Además, mediante el código, vemos que la función square no puede ser invocada de forma externa.

Closures Javascript

En esta anidación de funciones los closures Javascript se producen cuando la función retorna una función y el contexto asociado a dicha función.

Por ejemplo vamos a definir una función anidada la cual contenga en un primer nivel la información de la persona que queremos saludar y que anide una función que realice el saludo a dicho nombre. Esta función va a devolver tanto la función que saluda, como el contexto asociado, es decir, la variable que contiene el nombre.

Definiremos el closure Javascript de la siguiente forma:

function saludo() {
    let texto = 'Buenos días';
    function saludoDia(){
        console.log(texto);
    }
    return saludoDia;  
}

let saludar = saludo();
saludar();  // Buenos días

Podemos apreciar que la función interna tiene acceso a los valores declarados en la función externa, los cuales se retornan y permanecen creados mientras exista la función.

Los contextos asociados se pueden entender mejor si modificamos la función externa para poder pasarle el mensaje de saludo y la interna para pasarle el nombre de la persona a saludar, quedando de la siguiente manera:

function saludo(mensaje) {    
    function saludoNombre(nombre){
        console.log(`${mensaje}, ${nombre}`);
    }
    return saludoNombre; 
}

Podemos crear diferentes contextos con el mensaje del saludo de la siguiente manera:

let saludarTarde = saludo("Buenas tardes");
let saludarNoche = saludo("Buenas noches");
let nombre="Víctor";

saludarTarde(nombre);  // Buenas tardes, Víctor
saludarNoche(nombre);  // Buenas noches, Víctor

El contexto demarcado por la variable saludo perdura durante toda la función.

Vemos que la función es la misma, pero con contextos diferentes marcados por el parámetro de la función externa. Es aquí dónde tenemos nuestros closures Javascript.

Además podríamos invocar a la función pasándole tanto el parámetro externo como el parámetro interno.

saludo("Buenos días")("Luis");

Hipotenusa en Javascript

El objeto Math nos permite realizar operaciones trigonométricas. Para ello lo primero que podemos hacer es calcular la hipotenusa de un triángulo. El método Math.hypot() nos permite hacer ese cálculo. Para ello simplemente tendremos que pasar el valor de los catetos a la función.

Si queremos calcular la hipotenusa de un triángulo con dos lados de tamaño 3 y 4 haríamos lo siguiente:

let lado1 = 3;
let lado2 = 4;

console.log(Math.hypot(lado1,lado2)); // 5

Senos, cosenos y tangentes

Lo siguiente sería saber que podemos calcular los senos, cosenos y tangentes mediante los métodos Math.sin(), Math.cos() y Math.tan(). Estos métodos reciben como parámetro el valor del ángulo en radianes.

Para convertir grados a radianes, hay que multiplicar los grados por el número π y dividirlo por 180

De esta manera podemos calcular el seno, coseno y tangente de un ángulo de 90º de la siguiente forma:

let grado = 90;
let radian = (grado*Math.PI)/180;

console.log(Math.sin(radian));
console.log(Math.cos(radian));
console.log(Math.tan(radian));

Arcoseno, arcocoseno y arcotangente

Si queremos conocer el ángulo tenemos métodos que nos calculan el arcoseno, arcocoseno y arcotangente que son Math.asin(), Math.acos() y Math.atan().

Esto nos puede ayudar a conocer los ángulos de un triángulo. Por ejemplo, si tenemos un triángulo rectángulo de lados 3m y 4m cuanto mide su hipotenusa y sus ángulos ą y ß.

De esta manera, lo primero será calcular la hipotenusa mediante Math.hypot()

let a = 4;
let b = 3;
let hipotenusa = Math.hypot(a,b);

Ahora calculamos el seno de ą y el seno de ß. Los cuales se calculan por el tamaño del lado opuesto entre la hipotenusa.

let seno_alpha = b/hipotenusa;
let seno_beta = a/hipotenusa;

Ya solo nos quedará el calcular los arcoseno de estos senos con Math.asin() para saber los ángulos

let alpha = Math.asin(seno_alpha);
let beta = Math.asin(seno_beta);

console.log(`El angulo alpha es de ${(alpha*180)/Math.PI} grados`);
console.log(`El angulo beta es de ${(beta*180)/Math.PI} grados`);

Pues encontrar más ejemplos de matemáticas en Mates Fácil

También podríamos haber obtenido el ángulo utilizando la arcontangente mediante Math.atan() sin necesidad de haber calculado la hipotenusa. Ya que a la arcotangente se le pasa la división del lado opuesto con el adyacente. En este caso el código sería de la siguiente manera:

let a = 4;
let b = 3;

let alpha = Math.atan(b/a);
let beta = Math.atan(a/b);

console.log(`El angulo alpha es de ${(alpha*180)/Math.PI} grados`);
console.log(`El angulo beta es de ${(beta*180)/Math.PI} grados`);

Angulos en un plano

Otra forma de obtener el arcotangente es mediante la función Math.atan2() la cual no recibe un ángulo en radianes, si no que recibe el punto x,y en un sistema de coordenadas de un plano con origen 0,0.

Es importante saber que al método Math.atan2() se le pasan las coordenadas de forma inversa, es decir en formato y,x. Así su sintaxis es Math.atan2(y,x)

De esta forma podemos volver a reescribir el anterior código que nos calculaba los ángulos ą y ß de la siguiente forma:

let a = 4;
let b = 3;

let alpha = Math.atan2(b,a);
let beta = Math.atan2(a,b);

console.log(`El angulo alpha es de ${(alpha*180)/Math.PI} grados`);
console.log(`El angulo beta es de ${(beta*180)/Math.PI} grados`);

Senos, cosenos y tangentes hiperbólicas

Además de las funciones trigonométricas, dentro del objeto Math también disponemos de funciones hiperbólicas. En este caso las funciones hiperbólicas no son periódicas si no que son exponenciales.

De esta manera tenemos son senos, cosenos y tangentes hiperbólicas que se obtienen mediante los métodos Math.sinh(), Math.cosh() y Math.tanh() con los que podemos calcular el seno, coseno y tangente hiperbólica de un ángulo de 90º mediante el siguiente código:

let grado = 90;
let radian = (grado*Math.PI)/180;

console.log(Math.sinh(radian));
console.log(Math.cosh(radian));
console.log(Math.tanh(radian));

Así mismo podemos calcular los arcosenos, arcocosenos y arcotangente hiperbólicas con los métodos Math.acosh(), Math.asinh(), Math.atanh().

Raíces cuadradas

Lo primero que vamos a ver es cómo realizar una raíz cuadrada sobre un número. La raíz cuadrada es la inversa de la potencia de 2 de un número. Para poder calcular la raíz cuadrada tenemos el método Math.sqrt(). Este método recibe como parámetro el número del cual queremos calcular la raíz cuadrada.

Podemos ver cómo funcionaría en código de la siguiente manera:

let numero = 4;
console.log(`La raíz cuadrada de ${numero} es ${Math.sqrt(numero)}`);

Complementando el cálculo de la raíz cuadrada, en el objeto Math en Javascript nos ofrece la posibilidad de calcular la raíz cúbica de un número. La raíz cúbica de un número es la inversa de una potencia de 3 de un número.

En este caso el método que necesitamos es Math.cbrt(), el cual podemos utilizar en código de la siguiente forma:

let numero = 8;
console.log(`La raíz cúbica de ${numero} es ${Math.cbrt(numero)}`);

No se pueden calcular raíces cuadradas de números negativos, si lo intentamos el valor que nos devuelva el método Math.sqrt() será NaN. Si bien, si que se pueden calcular raíces cúbicas de número snegativos.

Además, el objeto Math nos ofrece dos propiedades relacionadas con las raíces cuadras, estas propiedades son: Math.SQRT1_2 y Math.SQRT2. En el caso de Math.SQRT1_2 se representa al valor de la matriz cuadrada de 1/2 que sería algo así como “0.7071067811865476”. Y en el caso de Math.SQRT2 se representa a la matriz cuadrada de 2, que viene a ser un valor de “1.4142135623730951”.

Máximos y mínimos

Una de las utilidades interesantes que tiene el objeto Math es la posibilidad de saber cuales son los valores máximos y mínimos de una lista de valores. Para ello tenemos los métodos Math.max() y Math.min() los cuales reciben un array de valores.

Si queremos obtener el valor máximo de una lista de números lo codificaríamos de la siguiente forma:

console.log(Math.max(12,45,78)); // 78

Y si queremos obtener el valor mínimo:

console.log(Math.min(12,45,78)); // 12

Podemos observar que tanto Math.max() como Math.min() reciben una lista de números. En el caso de que los valores los tengamos listados en un array, y aunque todavía no hayamos hablado de arrays, podríamos utilizar el operador … para convertir el array en una lista de números.

En este caso el código quedaría de la siguiente forma:

let numeros = [12,56,2,59,98,3,45,11];
console.log(`Número máximo ${Math.max(...numeros)}`);
console.log(`Número mínimo ${Math.min(...numeros)}`);

Multiplicaciones de Enteros de 32 bits con signo

Como ya vimos cuando hablábamos de los números en Javascript, este implementa el formato en coma flotante de doble precisión de 64 bits IEEE 754.

Pero puede ser que necesitemos hacer multiplicaciones de números como si estos fuesen números de 32 bits con signo. Lenguajes como C utilizan este tipo de formatos en sus enteros. En ese caso el objeto Math nos ofrece el método Math.imul() el cual tratará los números como si fuesen números de 32 bits con signo.

De esta manera tenemos que saber que para 32 bits con signo, el número -1 sería el valor 0xffffffff o en decimal el 4294967295.

En los números de 32 bits con signo van del 0 al 2147483648 (o 0x80000000) y del 2147483649 hasta el 4294967295 (o 0xffffffff) irían los números negativos. Por eso el 0xffffffff representa el número -1.

Lógicamente si realizamos la multiplicación normal:

let numero = **0xffffffff**;
console.log(numero*2); // 8589934590

Pero si queremos que se multipliquen como si fuesen números de 32 bits utilizamos Math.imul()

let numero = **0xffffffff**;
console.log(Math.imul(numero,2)); // -2

Si por lo que sea hemos realizado la multiplicación normal, siempre podemos convertir a nuestro número en un entero de 32 bits con signo de la siguiente forma utilizado los operadores de bits.

let numero = **0xffffffff**;
let multiplicacion = numero * 2; // 8589934590
console.log(multiplicacion | 0); // -2 

La web https://www.rapidtables.com/convert/number nos permite realizar conversiones entre números de una forma muy útil.

Si bien es verdad que esto solo funciona cuando el número resultado está dentro de rango, si no, no funciona.

Ceros en números binarios

Otro método que nos encontramos en el objeto Math es el método Math.clz32(). En este caso, método Math.clz32() nos permite saber cuántos ceros hay al inicio de un número binario de 32 bits sin signo.

Al método Math.clz32()se le pasa el número como parámetro.

// 00000000000000000000000000001100
let n1 = 12;   

// 00000000000000000000010011010010
let n2 = 1234; 

console.log(Math.clz32(n1)); // 28
console.log(Math.clz32(n2)); // 21

Otra de las capacidades que encontramos con el objeto Math es poder calcular logaritmos. Un logaritmo es el exponente al que hay que elevar un número base para obtener otro número determinado.

Potencias

La potencia de un número se consigue multiplicando la base por si misma tantas veces como indique el exponente y se expresa de la forma:

base^{exponente}

De esta forma una base de exponente 2 se multiplicará por si misma dos veces.

En Javascript el objeto Math nos ofrece el método Math.pow(base,exponente), el cual recibe dos parámetros, la base y el exponente, retornando el valor de la potencia.

Por lo tanto, para codificar una potencia de una base de 2 elevado a la potencia de 5 lo expresaríamos de la siguiente forma.

console.log(Math.pow(2,5));

A partir de ES20016 aparece el operador ** que viene a realizar la misma operación de cálculo de potencias que Math.pow()

Así, el anterior código se podría escribir de la siguiente forma:

console.log(2 ** 5);

Una forma más sencilla de calculas potencias en Javascript.

Número PI

Una propiedad interesante del objeto Math es la propiedad Math.PI y es que la propiedad Math.PI representa el valor del número PI (π), es decir 3,14159…

Simplemente nos valdrá con referirnos a la propiedad para obtener su valor.

console.log(Math.PI); // 3,14159

De esta manera podremos utilizar el valor de PI(π) para calcular cosas como el área de un círculo. y es que recordemos que el área de un círculo a partir de su radio es:

area = π*r^{2}

Por lo que codificándolo nos quedaría de la siguiente forma:

let radio = 2;
let area = Math.PI * Math.pow(radio,2);

console.log(`El área de un círculo de rádio ${radio} es de ${area}`);

Signo

Mediante el método Math.sign() podemos conocer el signo de un valor pasado como parámetro. De tal manera que el método Math.sign() devuelve el valor de 1 si el valor es positivo o -1 si el valor es negativo.

Si pasamos un valor de 0 o de -0 al método Math.sign(), este nos devuelve el valor sin procesar, es decir 0 y -0.

Así podríamos hacer las siguientes comparaciones de signo en Javascript:

let n1 = 10;
let n2 = -37;
let n3 = 0;

switch (Math.sign(n1)) {
    case 1:
        console.log("Positivo");
        break;
    case -1: 
        console.log("Negativo");
        break;
    default:
        console.log("Has puesto un 0");

}

Redondeando números

Si estamos trabajando con números decimales vamos a necesitar, en ciertas ocasiones, el redondear el número. Para ello, el objeto Math nos ofrece un conjunto de métodos.

Podemos realizar un redondeo simple, de tal manera que obtengamos el número entero más cercano, mediante el método Math.round(). Es decir, decimales por encima del 5 redondean hacía arriba y decimales por debajo del 5 redondean hacía abajo.

Por lo que podríamos tener este código de redondeo con el método Math.round():

let numero = 14.436;
console.log(Math.round(numero)); // 14

Pero nos podría interesar redondear de forma superior, es decir, al número más alto de los decimales. Para ello tenemos el método Math.ceil(). En este caso el código fuente quedaría de la siguiente manera:

let numero = 14.436;
console.log(Math.ceil(numero)); // 15

O, por el contrario, redondear al número más bajo. Aquí nos da igual el valor que tengan los decimales y lo cerca o lejos que esté el número superior. Para redondear de forma inferior contamos con el método Math.floor(). Al igual que los anteriores dos métodos vemos como codificarlo:

let numero = 14.436;
console.log(Math.floor(numero)); // 14

También disponemos de la opción de poder redondear con precisión los números decimales. En este caso el método Math.fround() nos devuelve el número decimal en 32 bits representando que represente el número.

let numero 5.05;
console.log(Math.fround(numero)); // 5.050000190734863

Hay que tener cuidado ya que la representación en 32 bits puede tener depreciaciones y por eso salen estos números.

La última opción de redondeo que tenemos con el objeto Math es el método Math.trunc() el cual directamente trunca la parte decimal, independientemente de su valor, y se queda con la parte entera.

let numero = 14.436;
console.log(Math.trunc(numero)); // 14

Números aleatorios

Si queremos generar números aleatorios tenemos el método Math.random() que genera, cada vez que se invoca, un número aleatorio entre 0 y 1 con 16 posiciones decimales.

Este valor entre 0 y 1 nos sirve para poder generar cualquier número aleatorio. Para ello simplemente tendremos que multiplicar el valor que nos devuelva Math.random() por el valor del número máximo, incrementando en una unidad, del que queramos la aleatoriedad.

De esta manera para sacar un número aleatorio entre 0 y 4

aleatorio = Math.random()*5

Este código nos devolverá un número aleatorio de tipo decimal, por lo que si queremos obtener solo el valor entero deberemos de redondearlo mediante el método Math.floor(), por lo que nuestro código se convertirá en:

aleatorio = Math.floor(Math.random()*5);

Si por lo que fuese queremos un número aleatorio que empezase por 1, simplemente valdrá con sumarle 1 a la operación y solo multiplicarle por el valor límite.

eatorio = Math.floor(Math.random()*4+1);

Valores absolutos

Si queremos obtener valores absolutos en Javascript, el objeto Math nos ofrece el método Math.abs(), el cual devuelve el valor absoluto del número pasado como parámetro.

Vemos cómo podemos pasar diferentes valores al método Math.abs() y ver su resultado en la consola.

let n1 = 4;
let n2 = -3;

console.log(Math.abs(n1));  // 4
console.log(Math.abs(n2));  // 3