¿Cómo declarar una funcion en Javascript? 3 formas de hacerlo

La definición de una función es un procedimiento, es decir que es un conjunto de instrucciones que realizan una tarea y en javascript este es uno de los conceptos más importantes.

Debemos tener en cuenta que en javascript las funciones son diferentes a las funciones de otros lenguajes de programación, principalmente por que las funciones en javascript son un objeto.

Es por eso que es importante la forma en la cual hallamos definido nuestra función como pueden ser:

• función declarativa
• función expresiva
• función de flecha

Existen mas formas de declarar una función en javascript pero en este post voy a explicar las formas con las que me ah tocado trabajar profesionalmente.

Declaración de una función declarativa en javascript

Para empezar con este post tenemos primero que definir la estructura de una función declarativa ya que es la más común cuando se empieza con este lenguaje.

En esta estructura de función utilizamos la palabra reservada function seguido del nombre de la misma el cual será el identificador de esta función, además de poder asignar parámetros entre paréntesis () y el símbolo de llaves {} que contendrán el código de la función.

En todas las funciones los parámetros no son obligatorios, como podemos visualizar en los siguientes ejemplos:

function saludo(nombre){
  console.log(`Hola ${nombre}`);
}
saludo ('Eduardo');

// salida => Hola Eduardo

En el ejemplo definimos nuestra función saludo con un parámetro «nombre» y en consola aparecerá «Hola Eduardo» ya que el parámetro que le estamos enviando por nombre es Victor.

Al declarar una función sin parámetros y sin código está devolverá un «undefined» por defecto.

function prueba(){}

// salida => undefined

En este caso podemos solucionar el retorno de nuestra función utilizando la instrucción return en nuestro bloque.

function prueba2(){
  return 'Hola';
}
console.log(prueba2());

//salida => Hola

Declaración de una función expresiva en javascript

Esta forma de declarar una función es muy similar a la anterior (función declarativa), la diferencia en la sintaxis es que definimos nuestra función dentro de una variable y no con la palabra reservada function desde el principio.

El almacenar la función en una variable nos permite utilizarlas en diferentes casos por ejemplo:

let saludo = function saludo(nombre){
  console.log(`Hola ${nombre}`);
}

saludo('Eduardo');

// salida => Hola Eduardo

La principal diferencia es que a las funciones declarativas se les aplica el llamado hoisting (o elevación) y a la expresiva no, un tema del cual hablaré en un futuro post.

En resumen lo que quiere decir esto es que con las funciones declarativas podemos llamar la función antes de que esta se declarada y con la función expresiva no, se tiene que declarar antes de poder utilizarla en el código.

En el caso de las funciones expresivas podemos crear nuestra función como «anónima» al no utilizar un identificador, por ejemplo:

let saludo = function(nombre){
  console.log(`Hola ${nombre}`);
}
saludo('Eduardo');

// salida => Hola Eduardo

Como podemos observar, el resultado es el mismo. Podemos hacer un ejemplo de cómo funcionaria el hoisting en este caso, ejecutando la función antes de declararla.

saludo('Eduardo')
// salida => ReferenceError: hola is not defined

const saludo = function saludo(nombre){
  console.log(`Hola ${nombre}`);
}

En este caso la salida de la función sería un error.

Declaración de una función flecha en javascript

Mi novedad favorita de ES6 son las llamadas «arrow functions» y la manera de crear estas es la siguiente:

Si se requiere primero se definirá la lista de parámetros entre paréntesis () seguido del símbolo => y las llaves {} para indicar las instrucciones que se van a ejecutar.

Además de la sintaxis, estas funciones tienen varias diferencias como son:

• Las «funciones de flecha» no crean su propio contexto al ejecutarse. Al contrario que las «funciones expresivas» o las «function declarativas» que crea su propio contexto.
• Las «funciones de flecha» son anónimas.
• Si al definir la función no utilizamos el símbolo de las llaves. La función devolverá como resultado de la función el resultado de la ejecución de la instrucción que hayamos indicado.

Ahora veremos un ejemplo de cómo está estructurada dicha función:

const saludo = (nombre) => {
  return `Hola ${nombre}`;
}
console.log(saluda('Eduardo'));

// salida => Hola Eduardo

Aquí hemos escrito una «arrow function» en donde le enviamos como parámetro un nombre y de salida nos devuelve el mensaje con el nombre que le hemos pasado.

Conforme vaya entendiendo más formas de declarar funciones en javascript lo suficiente para poder explicarlas en este mismo post, lo iré actualizando.