Sintaxis

Te mostraré algunos ejemplos en un momento, pero antes de nada, vamos a ver la sintaxis formal de una función:

function nombreFuncion ( [parametro1]....[parametroN] )
{
     // instrucciones
     [return valor]
}

Fíjate que si nuestra función va a devolver algún valor emplearemos la palabra reservada return, para hacerlo.

Esta es la sintaxis tradicional para definir funciones, pero hoy día es más recomendable el uso del operador flecha (=>) para ello. Nosotros utilizaremos esta sintaxis para ir acostumbrándonos a ella ya que en muchos casos nos ahorrará líneas de código y hará nuestro código más legible. La sintaxis para utilizar el operador flecha es la siguiente:

const nombreFuncion = ([parametro1]...[parametroN]) => {
      // instrucciones
      [return valor]
}

Los nombres que puedes asignar a una función, tendrán las mismas restricciones que tienen los elementos HTML y las variables en JavaScript. Deberías asignarle un nombre que realmente la identifique, o que indique qué tipo de acción realiza. Puedes usar palabras compuestas como chequearCorreo o calcularFecha, y fíjate que las funciones suelen llevar un verbo, puesto que las funciones son elementos que realizan acciones.

Una recomendación que te hacemos, es la de que las funciones sean muy específicas, es decir que no realicen tareas adicionales a las inicialmente propuestas en esa función.

Para realizar una llamada a una función lo podemos hacer con:

nombreFuncion( );  // Esta llamada ejecutaría las instrucciones programadas dentro de la función.

Otro ejemplo de uso de una función que devuelve un valor y queremos recogerlo en una variable es utilizando una asignación:

variable = nombreFuncion( );  // En este caso la función devolvería un valor que se asigna a la variable.

Las funciones en JavaScript también son objetos, y como tal tienen métodos y propiedades. Un método, aplicable a cualquier función puede ser toString(), el cuál nos devolverá el código fuente de esa función.

Parámetros

Cuando se realiza una llamada a una función, muchas veces es necesario pasar parámetros (también conocidos como argumentos). Este mecanismo nos va a permitir enviar datos entre instrucciones.

Para pasar parámetros a una función, tendremos que escribir dichos parámetros entre paréntesis y separados por comas.

A la hora de definir una función que recibe parámetros, lo que haremos es, escribir los nombres de las variables que recibirán esos parámetros entre los paréntesis de la función.

Veamos el siguiente ejemplo:

const saludar = (nombre) => {
      alert(`Hola ${nombre}`);
}

Si llamamos a esa función desde el código:

saludar('Bob Esponja');      //Mostraría una alerta con el texto: Hola Bob Esponja.

Los parámetros que usamos en la definición de la función serán variables locales a la función, y se inicializarán automáticamente en el momento de llamar a la función, con los valores que le pasemos en la llamada. En el siguiente apartado entraremos más en profundidad en lo que son las variables locales y globales.

Otro ejemplo de función que devuelve un valor podría ser el siguiente:

const calcularMayor = (num1, num2) => {
    return (num1 > num2) ? num1 : num2;
}

Esta función la podemos invocar lo mismo que la anterior, simplemente que debemos tener en cuenta que devuelve un valor:

console.log(calcularMayor(7, 5));

Ámbito de las variables

Ha llegado la hora de distinguir entre las variables que se definen fuera de una función, y las que se definen dentro de las funciones.

Las variables que se definen fuera de las funciones se llaman variables globales. Las variables que se definen dentro de las funciones se llaman variables locales.

Una variable global en JavaScript tiene una connotación un poco diferente, comparando con otros lenguajes de programación. Para un script de JavaScript, el alcance de una variable global, se limita al documento actual que está cargado en la ventana del navegador. Sin embargo cuando inicializas una variable como variable global, quiere decir que todas las instrucciones de tu script (incluidas las instrucciones que están dentro de las funciones), tendrán acceso directo al valor de esa variable. Todas las instrucciones podrán leer y modificar el valor de esa variable global.

En el momento que una página se cierra, todas las variables definidas en esa página se eliminarán de la memoria para siempre. Si necesitas que el valor de una variable persista de una página a otra, tendrás que utilizar técnicas que te permitan almacenar esa variable.

En contraste a las variables globales, una variable local será definida dentro de una función. Antes viste que podemos definir variables en los parámetros de una función, pero también podrás definir nuevas variables dentro del código de la función.

El alcance de una variable local está solamente dentro del ámbito de la función. Ninguna otra función o instrucciones fuera de la función podrán acceder al valor de esa variable.

Reutilizar el nombre de una variable global como local es uno de los bugs más sutiles y por consiguiente más difíciles de encontrar en el código de JavaScript. La variable local en momentos puntuales ocultará el valor de la variable global, sin avisarnos de ello. Como recomendación, no reutilices un nombre de variable global como local en una función, y tampoco declares una variable global dentro de una función, ya que podrás crear fallos que te resultarán difíciles de solucionar.

Como ejemplo de ello puedes ver el siguiente ejemplo:

let nombre = 'Pepe';
const prueba = () => {
    let nombre = 'Pedro';
    console.log(nombre);      // Muestra por consola: Pedro
}
console.log(nombre);          // Muestra por consola: Pepe
prueba();
console.log(nombre);          // Muestra por consola: Pepe

Funciones anidadas

En JavaScript podemos anidar unas funciones dentro de otras. Es decir podemos programar una función dentro de otra función.

Cuando no tenemos funciones anidadas, cada función que definamos será accesible por todo el código, es decir serán funciones globales. Con las funciones anidadas, podemos encapsular la accesibilidad de una función dentro de otra y hacer que esa función sea privada o local a la función principal. Tampoco te recomiendo el reutilizar nombres de funciones con esta técnica, para evitar problemas o confusiones posteriores.

Una buena opción para aplicar las funciones anidadas, es cuando tenemos una secuencia de instrucciones que necesitan ser llamadas desde múltiples sitios dentro de una función, y esas instrucciones sólo tienen significado dentro del contexto de esa función principal. En otras palabras, en lugar de romper la secuencia de una función muy larga en varias funciones globales, haremos lo mismo pero utilizando funciones locales.

Ejemplo de una función anidada:

const calcularHipotenusa = (cateto1, cateto2) => {
   const calcularCuadrado = (x) => { return x * x; }
   return Math.sqrt(calcularCuadrado(cateto1) + calcularCuadrado(cateto2));
}
console.log(calcularHipotenusa(1, 2)); // Muestra por consola: 2.23606797749979 

Funciones predefinidas

Te mostraremos aquí una lista de funciones predefinidas, que se pueden utilizar a nivel global en cualquier parte de tu código de JavaScript. Estas funciones no están asociadas a ningún objeto en particular. Típicamente, estas funciones te permiten convertir datos de un tipo a otro tipo.

Funciones globales o predefinidas en JavaScript:

Definición

Para definir una clase, que será el molde que nos permitirá crear objetos de dicha clase, simplemente debemos utilizar la siguiente sintaxis:

class NombreClase {
      // Cuerpo de la clase
}

Para nombrar una clase comenzamos su identificador con la primera letra en mayúsculas.

Por ejemplo, pensemos que queremos gestionar una serie de contactos, para ello podríamos empezar por definir una clase para un Contacto genérico:

class Contacto {
      // Cuerpo de nuestra clase Contacto
}

Creación

Para crear objeto de una clase dada simplemente debemos utilizar el operador new seguido del nombre de la clase.

let pepe = new Contacto();
let juan = new Contacto();

En breve veremos qué estamos haciendo al realizar esta operación, pero por ahora nos quedamos con que de esta forma podemos crear nuevos objetos de dicha clase.

Propiedades

Pero una clase no tendría sentido sin tener unas propiedades que sean específicas de cada uno de los objetos. A eso se le suele llamar estado de un objeto, ya que las propiedades de un objeto dado serán diferentes a las de otro.

Para declarar propiedades dentro de una clase simplemente las podemos declarar en el cuerpo de la clase, aunque como veremos ahora mismo, lo ideal es hacerlo en el método constructor. Para referirnos a las propiedades debemos anteponer la palabra reservada this al nombre de la propiedad como veremos en breve.

class Contacto {
    nombre;
    correo;
}

Ahora podremos crear objetos de dicha clase e inspeccionar sus propiedades.

let juan = new Contacto();
console.log(juan);      // Muestra por consola: Object { nombre: undefined, correo: undefined }

Podemos acceder a las propiedades de un objeto utilizando el operador .

let juan = new Contacto();
console.log(juan.nombre);      // Muestra por consola: undefined
juan.nombre = 'Juan';
console.log(juan.nombre);      // Muestra por consola: Juan

Constructor

Como hemos comentado anteriormente, lo ideal es crear y asignar valores a las propiedades en el método constructor. El método constructor es una función especial que es llamada cuando utilizamos el operador new de dicha clase. Dicho método, si no es definido, es definido por defecto, pero lo ideal es que nosotros lo definamos y le demos la funcionalidad adecuada, que suele ser inicializar las propiedades.

class Contacto {
    constructor(nombre, correo) {
        this.nombre = nombre;
        this.correo = correo;
    }
}

En el siguiente ejemplo creamos dos objetos de la clase: en el primero utilizamos el constructor definido por nosotros mismos y en el segundo el constructor definido por defecto.

let pepe = new Contacto('Pepe', 'pepe@gmail.com');
console.log(pepe);      // Muestra por consola: Object { nombre: "Pepe", correo: "pepe@gmail.com" }
let juan = new Contacto();
console.log(juan);      // Muestra por consola: Object { nombre: undefined, correo: undefined }

Métodos

Los métodos son funciones definidas en la propia clase que determinan el comportamiento de los objetos creados.

Por ejemplo, podemos crear un método para nuestra clase encargado de devolver un mensaje de saludo que incluya los datos del objeto.

class Contacto {

    nombre;
    correo;

    constructor(nombre, correo) {
        this.nombre = nombre;
        this.correo = correo;
    }

    saludar() {
        return `Hola, soy ${this.nombre} y mi correo es ${this.correo}`;
    }
}

let pepe = new Contacto('Pepe', 'pepe@gmail.com');
console.log(pepe.saludar());   // Muestra por consola: Hola soy Pepe y mi correo es pepe@gmail.com

También podemos definir métodos que serán comunes a toda la clase. Son los llamados métodos estáticos y para declararlos debemos anteponer la palabra reservada static al nombre del método.

Herencia

En JavaScript también podemos crear jerarquías de clases mediante la herencia. Una clase puede heredar de otra previamente declarado y por lo tanto heredará su estructura y su comportamiento.

Por ejemplo, podríamos tener una clase para almacenar contactos telefónicos en la que queremos almacenar además del nombre y el correo, el número de teléfono. También queremos que el método saludar también devuelva información del teléfono.

class ContactoTelefonico extends Contacto {

    telefono;

    constructor(nombre, correo, telefono) {
        super(nombre, correo);
        this.telefono = telefono;
    }

    saludar() {
        return `${super.saludar()} y mi teléfono es ${this.telefono}`;
    }
}

let maria = new ContactoTelefonico('María', 'maria@gmail.com', '666112233');
console.log(maria.saludar());    // Muestra por consola: Hola soy María y mi correo es maria@gmail.com y mi teléfono es 666112233