Blog · Josetxu.com | Estructura básica de una función Javascript

Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta. Una de sus mayores ventajas es que se pueden reutilizar fácilmente.

La estructura básica de una función JavaScript se puede dividir en tres partes:

Nombre: el nombre de la función.
Argumentos: las variables o constantes a utilizar.
Sentencias: las instrucciones de la función (lo que queremos que haga).

En este artículo también veremos:

Declaraciones de funciones: (describir o definir la función).
Llamadas a funciones: (cuando y como dar la orden de que se ejecuten).

Estructura

Las funciones en JavaScript se declaran (se definen) mediante la palabra reservada function, seguida del nombre de la función. Después se añaden dos paréntesis () en cuyo interior irán los argumentos (si procede). Por último, las llaves { } que se utilizan para encerrar todas las sentencias ó instrucciones que vamos a ordenar que se ejecuten en nuestra función.

Algo así:

function nombre(argumentos){
  sentencias o instrucciones
}

function nombre(argumentos){

sentencias o instrucciones

}

Ahora veamos parte por parte…

Nombre

Hay algunas reglas a la hora de poner nombre a una función, próximamente veremos a fondo esta sección, pero para empezar vale con saber que:

El nombre debe empezar por una letra minúscula y no puede contener espacios.
No se pueden usar palabras reservadas para el lenguaje de programación que usemos.

Unos ejemplos de nombres que SI son válidos:

function sumar() { } //válido

function sumar_numeros() { } //válido, guiones bajos para separar palabras

function sumarNumeros() { }  //válido, mayúsculas para separar palabras

function sumar() { } //válido

function sumar_numeros() { } //válido, guiones bajos para separar palabras

function sumarNumeros() { } //válido, mayúsculas para separar palabras

Unos ejemplos de nombres que NO son válidos:

function sumar numeros() { } //NO válido, no puede haber espacios 

function 1suma() { } //NO válido, no puede empezar con un número 

function alert() { } //NO válido, "alert" es una palabra reservada de javascript

function var() { } //NO válido, "var" es una palabra reservada de javascript

function sumar numeros() { } //NO válido, no puede haber espacios

function 1suma() { } //NO válido, no puede empezar con un número

function alert() { } //NO válido, "alert" es una palabra reservada de javascript

function var() { } //NO válido, "var" es una palabra reservada de javascript

Es útil poner nombres descriptivos a las funciones pero ojo con pasarse…

Argumentos

Los argumentos son una serie de valores que no hemos definido dentro de la función, sino que se reciben de otra parte, de otra función u otro enunciado. Pueden ser números o cadenas de texto indistintamente. Se especifican entre los paréntesis ( ) que van detrás del nombre de la función y van separados por comas. No todas las funciones necesitan argumentos para funcionar, pero son una más de las útiles ventajas que ofrecen las funciones… y pronto lo veremos.

Ejemplos:

function sumar(num1, num2) { 
   //los argumentos de esta funcion son: num1 y num2 
}

function cambiar(text1, text2, text3) { 
   //los argumentos de esta funcion son: text1, text2 y text3 
}

function sumar(num1, num2) {

//los argumentos de esta funcion son: num1 y num2

}

function cambiar(text1, text2, text3) {

//los argumentos de esta funcion son: text1, text2 y text3

}

Los argumentos sirven para hacer cosas con ellos dentro de la función. Hay que pensar en ellos como variables que pueden contener distintos valores dependiendo de las circunstancias.
Como ejemplo, podemos poner un campo de texto para que el usuario escriba su nombre, pasar esa variable como argumento de una función y mostrar un mensaje de bienvenida personalizado. Más abajo veremos algún ejemplo.

Sentencias

Esta es la parte de la función donde debemos incluir las instrucciones y operaciones necesarias para el cometido de la función. Van justo después de los paréntesis encerradas entre llaves { } y separadas entre si por el símbolo punto y coma ;.

Un ejemplo con cuatro sentencias:

function sumar() { 
       var primer_numero = 3; //se define un primer número
       var segundo_numero = 2; //se define un segundo número
       var total_suma = primer_numero + segundo_numero; //se suman
       alert(total_suma); //se muestra el resultado
}

function sumar() {

var primer_numero = 3; //se define un primer número

var segundo_numero = 2; //se define un segundo número

var total_suma = primer_numero + segundo_numero; //se suman

alert(total_suma); //se muestra el resultado

}

Declaraciones

Para declarar una función (definir como será) lo haremos una sola vez, por ejemplo:
Creamos una función llamada saludo(), que mostrará una ventana con un texto de bienvenida.

function saludo() {
    alert('Hola y bienvenid@ a Blog.');
}

function saludo() {

alert('Hola y bienvenid@ a Blog.');

}

Ya hemos definido como será la funcion saludo(), pero la función por si sola no hará nada.
Para eso debemos llamar a la función.

Llamadas

Al llamar a una función lo que hacemos es decir que se ejecuten las sentencias ó instrucciones que hemos definido anteriormente para esa función. Para llamarla solo tenemos que nombrarla con los paréntesis a continuación y los argumentos (si fueran necesarios) dentro de los paréntesis:

saludo();

saludo();

Hay que saber que primero hay que declarar la función y despues llamarla para que se ejecute correctamente:
El siguiente ejemplo funcionaría correctamente:

//primero declaramos la funcion saludo
function saludo() {
    alert('Hola y bienvenid@ al Blog.');
}

//aqui podría haber más funciones u otros códigos... o no

//aqui llamamos a la función saludo para que se ejecute
saludo();

//primero declaramos la funcion saludo

function saludo() {

alert('Hola y bienvenid@ al Blog.');

}

//aqui podría haber más funciones u otros códigos... o no

//aqui llamamos a la función saludo para que se ejecute

saludo();

Si lo hacemos a la inversa (primero llamarla y después declararla) no funcionará, ya que cuando la funcion se quiere ejecutar aún no sabe lo que tiene que hacer.
El siguiente ejemplo no funcionaría:

//llamada a la funcion
saludo(); //daría un error al no estar declarada

//aqui declaramos la funcion saludo... demasiado tarde
function saludo() {
    alert('Hola y bienvenid@ al Blog.');
}

//llamada a la funcion

saludo(); //daría un error al no estar declarada

//aqui declaramos la funcion saludo... demasiado tarde

function saludo() {

alert('Hola y bienvenid@ al Blog.');

}

Pero también podemos decidir cuando y bajo que circunstancias ejecutar una función, otra de las útiles ventajas del uso de funciones.

En el siguiente ejemplo creamos un botón en HTML para llamar a la funcion saludo() con el evento onclick del botón.

<!--primero declaramos la función en Javascript-->
<script type="text/javascript">
function saludo() {
    alert('Hola y bienvenid@ al Blog.');
}
</script>
<!--despues la llamamos con un boton en HTML-->
<input type="button" onclick="saludo()" value="Hola" />

function saludo() {

alert('Hola y bienvenid@ al Blog.');

}

</script>

Un ejemplo con argumentos sería el de la función sumarNumeros() que mencionábamos antes. El mismo ejemplo nos servirá para ver la utilidad de reutilizar la función en diferentes casos:

<script type="text/javascript">
//creamos la funcion sumarNumeros con dos argumentos; num1 y num2
function sumarNumeros(num1, num2){
  //creamos una variable que es la suma de los numeros
  var total = num1 + num2;
  //pintamos el resultado total en otro input
  document.getElementById("resultado").value = total;
}
</script>
<!--creamos un boton para llamar a la funcion pasandole como argumentos dos numeros-->
<input type="button" onclick="sumarNumeros(5, 3)" value="Sumar 5 y 3">
<!--pintamos un input de texto para mostrar el resultado de la suma-->
<input type="text" id="resultado">

//creamos la funcion sumarNumeros con dos argumentos; num1 y num2

function sumarNumeros(num1, num2){

//creamos una variable que es la suma de los numeros

var total = num1 + num2;

//pintamos el resultado total en otro input

document.getElementById("resultado").value = total;

}

</script>

Podemos cambiar el valor de los argumentos y reutilizar la funcion:

<input type="button" onclick="sumarNumeros(12, 38)" value="Sumar 12 y 38">
<input type="button" onclick="sumarNumeros(20, 66)" value="Sumar 20 y 66">
<input type="button" onclick="sumarNumeros(85, 90)" value="Sumar 85 y 90">
<!--pintamos un input de texto para mostrar el resultado de la suma-->
<input type="text" id="resultado">

Ahora imagina que esos argumentos no son fijos, sino que se pueden modificar sobre la marcha y reutilizar la función todas la veces que quieras…

<script type="text/javascript">
function sumarNumeros(num1, num2){
  var total = parseInt(num1) + parseInt(num2);
  document.getElementById("resultado").value = total;
}
</script>
<input type="text" placeholder=" 0" id="numero1">
<span> + </span>
<input type="text" placeholder=" 0" id="numero2">
<input type="button" value="Sumar" onclick="sumarNumeros(document.getElementById('numero1').value,document.getElementById('numero2').value)"> 
<input type="text" placeholder=" resultado" id="resultado" >

function sumarNumeros(num1, num2){

var total = parseInt(num1) + parseInt(num2);

document.getElementById("resultado").value = total;

}

</script>

Este ejemplo solo funciona con números enteros, si introducimos letras u otros caracteres fallará, dara un NaN, que quiere decir “Not A Number” o lo que es lo mismo “No es un Número”. Hay que poner condicionales para que si lo que se escribe no son números se muestre un mensaje de error del tipo “Solo se pueden sumar números”. El NaN, que nos puede ser útil, lo veremos más adelante…

Empieza a parecer útil esto de las funciones, ¿verdad…?
De momento esto es todo, ahora toca ver cada parte de las funciones por separado: Nombres, Argumentos y Sentencias, así como las Declaraciónes y las Llamadas a funciones…

Estructura

Nombre

Argumentos

Sentencias

Declaraciones

Llamadas

Artículos Relacionados