Introducción a JavaScript

En este ejemplo se muestran ejemplos del manejo de funciones en JavaScript

Definición y acceso a los elementos

Sintaxis de definición de funciones

Se emplea function seguido del nombre y a continuación una parénteris (...), que pueden contener, o no, parámetros, y el código se debe encerrar entre llaves {...};

function name(parameter1, parameter2, parameter3) {
  // código a ejecutar
}

<script>

// La función devolverá la suma de p1 y p2
function miSuma(p1, p2) {
    return p1 + p2;  
}

// Tambíén…
let miSuma = function (p1, p2) {
    return p1 + p2;  
};

// O con la función flecha =>
let miSuma = (p1, p2) => {
    return p1 + p2;  
};

Una función se puede definir de diversas maneras


// La función devolverá la suma de p1 y p2
function miSuma(p1, p2) {
  return p1 + p2;  
}

// Tambíén…
let miSuma = function (p1, p2) {
  return p1 + p2;  
};

// O con la función flecha =>
let miSuma = (p1, p2) => {
  return p1 + p2;  
};

Emplear una función

Una función se puede definir de diversas maneras

<script>

Propiedades de las funciones

Su nombre se accede por la propiedad name y los parámetros por arguments por lo, aunque no se defina ninún parámetro, se pueden introducir los que se quiera y acceder a ellos.

<script>

function sumar() {
    let suma = 0;
    for (let s of arguments) {
        suma += parseInt(s);
    }
    return suma;
}

document.write("Se accede a la propiedad name:" + ecuacion2grado.name);

Tipos de declaración de funciones

Las funciones pueden ser declaradas con function, como expresiones y como funciones flecha. Algunos aspectos de su comportamiento depende la forma en la que se declaren.

Las funciones declaradas con function se añaden globalmente por lo que pueden ser usadas incluso por expresiones que se hayan escrito antes que su declaración. Esto no pasa si una función se declara como una expresión o como función flecha.

<script>


saluda(); //Se produce el saludo en consola porque se aplica hoisting a la declaracion de saluda()
    
function saluda() {
  document.write("Hola, soy una función declarada con <code>function nombre(){...}</code>");
}

try {
    otroSaludo(); //Dará un error ReferenceError.
} catch (error) {
    document.write("Como soy una función en una expresión, aún no me conocen y he dado un error:<code>" + error + "</code>");
}
    
let otroSaludo = function () {
    console.log("Buenos días, soy una función declarada en una expresión");
}
  
try {
    masSaludo(); // Tampoco se 
} catch (error) {
    document.write("Igual me pasa a mí al ser una función flecha, que he dado un otro error:<code>" + error + "</code>");
}

let masSaludo = () => document.write("Buenas tardes, soy una función flecha.");

Mira el código de las tres funciones:

Comportamiento del objeto `this`

<script>

window.nombre = "Ventana";
this.tipo = "Navegador";//También es el objeto Window

let objeto = {
    nombre: "Un objeto",
    tipo: "objeto",
    fun (){ document.write("fun() nombre="+this.nombre+"
")},
    fun2 : ()=>document.write("fun2() nombre="+this.nombre+"
"),
    fun3 (timeout = 1000) { 
        setTimeout(()=>console.log("fun3 nombre="+this.nombre),timeout);
    }
}

function usoThis() {
    document.write("Empleo this nombre:" + this.nombre + " tipo=" + this.tipo + "
");//La referencias van al objeto Window
}

usoThis();

objeto.usoThis = usoThis;
objeto.usoThis();//Ahora la referencia this es al objeto

let flecha = ()=> document.write("función flecha nombre="+this.nombre+" y tipo="+this.tipo+ "
");

objeto.flecha = flecha;

flecha();
objeto.flecha();//La función flacha mantiene el contexto donde se declaró
objeto.fun();//Como es una función regular muestra el contexto de llamada
objeto.fun2();//La función flecha no emplea el contexto de llamada sino el de definición.
objeto.fun3();//Abre la consola para ver el resultado

El objeto this se comporta de manera diferente si es dentro de una función estándar o en una función flecha:>

Función estándar: referencia al contexto dentro del cual la función está operando. Por ejemplo, si una función se llama dentro del ámbito global de la página, this apunta al objeto Window.
Función flecha: referencia al contexto dentro del cual se ha declarado la expresión con la función flecha. Esta característica se aprovecha, por ejemplo, en eventos o temporizadores cuya función de llamada (callback) no es el objeto que se espera que se emplee.

Inicio

Definición y acceso a los elementos

Sintaxis de definición de funciones

Emplear una función

Propiedades de las funciones

Tipos de declaración de funciones

Mira el código de las tres funciones:

Comportamiento del objeto this

Comportamiento del objeto `this`