Tema anterior: Curso de JavaScript | Bucles en JavaScript
Las funciones de JavaScript son bloques de código que se utilizan principalmente para realizar una función particular. Podemos ejecutar una función tantas veces como queramos llamándola (invocándola).
Para crear una función, usamos la declaración function(), como:
// anonymous function
function(){
// function...body
}
// function with a name
function displayMessage(){
// function..body
}
Las funciones en javascript pueden ser tanto anónimas como nombradas, depende totalmente de quién las esté escribiendo. Hacemos uso del nombre cuando queremos llamar (invocar) la función y usamos el valor que devuelven las funciones.
Ejemplo:
javascript
<script>
function displayMessage(){
alert('How you doin'?');
}
// calling the function twice
displayMessage();
displayMessage();
</script>
En el código anterior, simplemente escribimos una función que crea una ventana emergente de alerta simple con un mensaje simple dentro y la forma en que la ejecutamos es llamando al nombre de la función.
Variable local
Una variable que se declara dentro del cuerpo de la función solo está disponible dentro del bloque de funciones.
Ejemplo:
javascript
<script>
// local variable example
function displayMessage(){
let message = 'This is the message';
alert(message);
}
displayMessage();
alert(message); // gives an error
</script>
En el código anterior, declaramos una función llamada mostrarMensaje() y luego dentro de ella declaramos una variable y luego imprimimos esa variable y también intentamos imprimir esa variable fuera del bloque de funciones. Intentar usar una variable fuera de su bloque declarado dará como resultado un error.
Variable
externa Las variables externas nos permiten usarlas dentro del bloque de código de función y también fuera de él.
Ejemplo:
javascript
<script>
// Outer variable
let message = 'This is the message';
function displayMessage(){
alert('Listen '+message);
}
displayMessage();
alert(message);
</script>
Veamos otro ejemplo en el que aprendemos cómo la función también puede modificar el mensaje.
Ejemplo:
javascript
<script>
// modifying outer variable
let message = 'This is a message';
function displayMessage(){
message = 'This is the updated message';
alert('Listen '+message);
}
alert(message);
displayMessage();
alert(message);
</script>
La variable externa permanece sin cambios antes de que invoquemos la función, pero después de llamar a la función, el valor cambia y, por lo tanto, incluso la última función de alerta imprime el valor modificado en la pantalla.
Pasando parámetros
Podemos incluso datos arbitrarios a funciones usando parámetros.
Ejemplo:
javascript
<script>
// passing data using parameters
function sayHello(from, via){
alert('You have a message from ' + from + ' via '+ via);
}
sayHello('Mom', 'WhatsApp');
sayHello('Dad', 'Telegram');
</script>
En lo anterior, simplemente pasamos dos parámetros y los usamos dentro de la función principal. Si de alguna manera, uno o todos los parámetros no se proporcionan, javascript usa los parámetros predeterminados. En ese caso, básicamente imprime ‘indefinido’ en lugar del resultado esperado.
Ejemplo:
javascript
<script>
// no parameter assigned
function sayHello(from, via){
alert('You have a message from ' + from + ' via '+ via);
}
sayHello('Mom'); // default 2 parameter
</script>
También podemos hacer uso del parámetro predeterminado. Simplemente asignamos el valor en el cuerpo del argumento como:
Ejemplo
javascript
<script>
// using default parameter
function sayHello(from, via='not mentioned'){
alert('You have a message from ' + from + ' via '+ via);
}
sayHello('Mom');
</script>
Devolver un valor
Una función puede devolver un valor al código que la está llamando.
Ejemplo:
javascript
<script>
// simple function
function sum(a, b) {
return a + b;
}
let result = sum(5, 10);
alert( result ); // 15
</script>
En el código anterior, simplemente creamos una función y pasamos dos valores en los argumentos de la función y luego almacenamos el valor en un resultado variable y finalmente lo alertamos. Este es generalmente el escenario más utilizado en el que se utilizan funciones.
Tema siguiente: Curso de JavaScript | Objetos en JavaScript