Las funciones de JavaScript están definidas con el Palabra clave función
.
Puede utilizar una función declaración o una función expresión.
Anteriormente en este tutorial, aprendiste que las funciones se declaran con el siguiente sintaxis:
function functionName(parameters) {
// code to be executed
}
Las funciones declaradas no se ejecutan inmediatamente. Se "guardan para su uso posterior", y serán ejecutados más tarde, cuando sean invocados (llamados).
function myFunction(a, b) {
return a * b;
}
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Call a function which performs a calculation and returns the result:</p>
<p id="demo"></p>
<script>
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Los puntos y comas se utilizan para separar declaraciones ejecutables de JavaScript.
Dado que una declaración de función no es una declaración ejecutable, es No es común terminarlo con punto y coma.
Una función de JavaScript también se puede definir mediante una expresión.
Una expresión de función se puede almacenar en una variable:
const x = function (a, b) {return a * b};
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>A function can be stored in a variable:</p>
<p id="demo"></p>
<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Después de que una expresión de función se haya almacenado en una variable, la variable puede utilizarse como función:
const x = function (a, b) {return a * b};
let z = x(4, 3);
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>After a function has been stored in a variable,
the variable can be used as a function:</p>
<p id="demo"></p>
<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>
La función anterior es en realidad una función anónima (una función sin nombre).
Las funciones almacenadas en variables no necesitan nombres de función. Ellos estan siempre invocado (llamado) usando el nombre de la variable.
La función anterior termina con un punto y coma porque es parte de una declaración ejecutable.
Como has visto en los ejemplos anteriores, las funciones de JavaScript se definen con la palabra clave función
.
Las funciones también se pueden definir con un constructor de funciones JavaScript integrado llamado Función()
.
const myFunction = new Function("a", "b", "return a * b");
let x = myFunction(4, 3);
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>JavaScript has an built-in function constructor.</p>
<p id="demo"></p>
<script>
const myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
En realidad, no es necesario utilizar el constructor de funciones. El ejemplo anterior es lo mismo que escribir:
const myFunction = function (a, b) {return a * b};
let x = myFunction(4, 3);
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p id="demo"></p>
<script>
const myFunction = function (a, b) {return a * b}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
La mayoría de las veces, puedes evitar el uso de la palabra clave new
en JavaScript.
Anteriormente en este tutorial, aprendió sobre "elevación" (JavaScript Hoisting).
Izar es el comportamiento predeterminado de JavaScript de mover declaraciones a la parte superior de la alcance actual.
El levantamiento se aplica a declaraciones de variables y declaraciones de funciones.
Debido a esto, las funciones de JavaScript se pueden llamar antes de declararlas:
myFunction(5);
function myFunction(y) {
return y * y;
}
Las funciones definidas mediante una expresión no se elevan.
Las expresiones de funciones se pueden hacer "autoinvocadas".
Una expresión autoinvocada se invoca (inicia) automáticamente, sin ser llamada.
Las expresiones de función se ejecutarán automáticamente si se sigue la expresión. por().
No puede autoinvocar una declaración de función.
Tienes que agregar paréntesis alrededor de la función para indicar que es una expresión de función:
(function () {
let x = "Hello!!"; // I will invoke myself
})();
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<p>Functions can be invoked automatically without being called:</p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! I called myself";
})();
</script>
</body>
</html>
La función anterior es en realidad una función anónima de autoinvocación (función sin nombre).
Las funciones de JavaScript se pueden utilizar como valores:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Functions can be treated as values:</p>
<p>x = myFunction(4,3) or x = 12</p>
<p>In both cases, x becomes a number with the value of 12.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Las funciones de JavaScript se pueden utilizar en expresiones:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Functions can be used in expressions.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
El operador typeof
en JavaScript devuelve "función" para funciones.
Pero las funciones de JavaScript se pueden describir mejor como objetos.
Las funciones de JavaScript tienen propiedades y métodos.
La propiedad arguments.length
devuelve el número de argumentos recibidos cuando la función fue invocada:
function myFunction(a, b) {
return arguments.length;
}
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<p>The arguments.length property returns the number of arguments received by the function:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
El método toString()
devuelve la función como una cadena:
function myFunction(a, b) {
return a * b;
}
let text = myFunction.toString();
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>
<p>The toString() method returns the function as a string:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>
Una función definida como propiedad de un objeto se llama método para el objeto.
Una función diseñada para crear nuevos objetos se llama constructor de objetos.
Las funciones de flecha permiten una sintaxis corta para escribir expresiones de funciones.
No necesita la palabra clave función
, la palabra clave return
y la llaves.
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>
<p>Arrow functions are not supported in IE11 or earlier.</p>
<p id="demo"></p>
<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
Las funciones de flecha no tienen su propio this
. No son muy adecuados para definir métodos de objetos.
Las funciones de flecha no están elevadas. Deben definirse antes de ser utilizados.
Usando const
es más seguro que usar var
, porque una expresión de función es valor siempre constante.
Solo puede omitir la palabra clave return
y las llaves si la función es una declaración única. Por este motivo, puede ser una buena costumbre conservarlos siempre:
const x = (x, y) => { return x * y };
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<p>Arrow functions are not supported in IE11 or earlier.</p>
<p id="demo"></p>
<script>
const x = (x, y) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
Las funciones de flecha no son compatibles con IE11 o versiones anteriores.