Las Funciones en JavaScript

Las Funciones en JavaScript

Una función es una forma de agrupar código para que pueda ser reutilizado, estas nos permiten ejecutar el mismo código en varios lugares del mismo programa. Si en diferentes partes de un script repetimos la misma tarea, es una buena practica implementar una función (en lugar de repetir el mismo conjunto de reglas).

Las funciones son uno de los conceptos más importantes en los lenguajes de programación ya que nos permite que nuestro código sea estructurado y reutilizable, pues usamos el mismo código muchas veces con diferentes argumentos para producir resultados diferentes.

Declarando funciones en JavaScript

Para declarar una función, use la palabra reservada function seguido del nombre de la función, una lista de parámetros y luego el cuerpo de la función.

function () {
   // código para ser ejecutado
}
El nombre de la función debe ser un identificador de JavaScript válido (las mismas reglas que las variables).

En el siguiente ejemplo creamos una función de nombre saludar, sin parámetros y con un console.log que se ejecutará cuando esta sea llamada.

function saludar() {
  console.log("Bienvenido!!");
}

Llamar a una función

Para ejecutar la función debemos de llamarla. Para llamar a una función usamos el nombre de esta seguido de paréntesis() con los argumentos entre ellos si es que la función los requiere.

function saludar() {
  console.log("Bienvenido!!");
}
saludar();
"Bienvenido!!"

Una vez que se define la función, JavaScript le permite llamarlo tantas veces como lo desee, solo usamos su declaración de invocación y listo!.


Parámetros de una función

Las funciones pueden tomar parámetros, estos son solo nombres identificadores y enumerados que están separados por comas dentro de los paréntesis de la función.

function saludar( usuario ) {
  console.log("Bienvenido " + usuario);
}
saludar("visitante");
saludar("Editor");
saludar("Administrador");
"Bienvenido visitante"
"Bienvenido Editor"
"Bienvenido Administrador"

Podemos definir una única función y pasarle diferentes valores de parámetros(argumentos) para obtener diferentes resultados.

En el ejemplo anterior establecimos el parámetro usuario dentro de la función saludar, cuando esta sea llamada enviamos el argumento dentro de los paréntesis el cual será utilizado como identificador dentro de la función.


Múltiples parámetros en una función

Podemos definir múltiples parámetros para una función separando estos con comas. Por ejemplo vamos a definir dos parámetros en la siguiente función:

function usuarios( nombre, edad ) {
  console.log( "La edad de " + nombre + " es " + edad );
}
usuarios("Miguel", 25);
usuarios("Lucía", 28);
usuarios("Leonel", 31);
"La edad de Miguel es 25"
"La edad de Lucía es 28"
"La edad de Leonel es 31"

Cuando llamamos la función proporcionamos los argumentos en el mismo orden en que los definimos.

Incluso estos parámetros pueden realizar cualquier tipo de operación aceptada en el lenguaje dentro de la función con los valores pasados como argumento :

function mayorMenor(x, y) {
  if( x > y ) {
    console.log(x);
  }
  else {
    console.log(y);
  }
}
mayorMenor(133, 275);
275

Las funciones no verifican la cantidad de argumentos recibidos. Si se llama a una función con argumentos perdidos (menos de lo declarado), estos valores se configuran como indefinidos, lo que indica que a una variable no se le ha asignado un valor.

Devolviendo valores con Return

Una función puede devolver un valor usando la declaración return seguido de una expresión o un valor. Esta afirmación es útil cuando se realizan cálculos que requieren un resultado.

Cuando creamos una función y no especificamos la expresión a retornar, obtendremos como valor de retorno un undefined

En el siguiente ejemplo creamos una función llamada multiplicar y su misión es agrega devolver el resultado de una operación entre dos valores:

function multiplicar (a, b) { 
   return a * b; 
}
console.log( multiplicar(5, 6) )
30

También podemos usar múltiples return en una función para devolver diferentes valores basados ​​en una condición como se muestra en el siguiente ejemplo:

function comparar(a, b) {
    if (a > b) {
        return -1;
    }
    else if (a < b) {
        return 1;
    }
    else {
        return 0;
    }
}
console.log(comparar(3,4));
1

En el ejemplo anterior la función comparar() compara dos valores. Devuelve -1 si el primer argumento es mayor que el segundo, 1 si el primer argumento es menor que el segundo, y 0 en caso de que sean iguales.

Es importante tener en cuenta que una función se detiene y sale de si inmediatamente llega a la instrucción return. Por esta razón podemos usar la instrucción return para detener la ejecución de una función inmediatamente. Veamos el siguiente ejemplo :

function nameUser(name) {
  
    if (name.length > 5) {
        console.log("bienvenido " + name)
        return;
    }
    console.log('El nombre ' + name + ' es muy corto!!!');
}

nameUser("Luis");
nameUser("Francisco");
"El nombre Luis es muy corto!!!"
"bienvenido Francisco"

La función nameUser() acepta un argumento que es el name, si la longitud del argumento pasado en la llamada de la funcion es mayor que 5, la función se detiene y no ejecuta las siguientes instrucciones establecidas dentro de su bloque.


Elevación de funciones en JavaScript

En JavaScript podemos llamar una función antes de declararla, esta particularidad se conoce el hoisting o elevación, tema que ya tocamos anteriormente, y como recordaras esto sucede porque internamente, hay dos fases en el motor de JavaScript cuando ejecuta el código: compilación y ejecución :

  1. En la compilación, el interprete de JavaScript mueve todas las declaraciones de funciones (y también de variables) a la parte superior de su contexto actual. Decimos que las declaraciones de funciones son alzadas o izadas.
  2. En la ejecución el motor de JavaScript simplemente ejecuta el código.

Es por esto que el siguiente ejemplo funcionará correctamente, porque aunque lo escribamos así:

elevacion();

function elevacion(){
    console.log("Ejemplo del hoisting");
}
"Ejemplo del hoisting"

El interprete JavaScript lo procesará así:

function elevacion(){
    console.log("Ejemplo del hoisting");
}
elevacion();
"Ejemplo del hoisting"


Ahora que ya tenemos una comprensión de las funciones en JavaScript más clara, podemos seguir avanzado en los siguientes apartados de este tema.

avatar