Funciones en JavaScript

Funciones en javascript

Antes que nada!! Recordá siempre que en javascript todo menos los primitivos son objetos y las funciones no son la excepción.

Ahora bien, en javascript tenemos diferentes modos de crear una función. Veamos la primera que presentaremos

1
2
3
4
5
function miFuncion() {
return 'Holis desde miFuncion'
}

console.log(miFuncion()) // output> Holis desde miFuncion

De este modo creamos una función a la que llamamos miFuncion con la palabra reservada function. Dentro de los paréntesis podemos pasarle argumentos a la función, como por ejemplo

1
2
3
4
5
function miFuncion(nombre) {
return 'Holis ' + nombre
}

console.log(miFuncion('Rumualdo')) // output> Holis Rumualdo

Hemos llamados a esta función miFuncion y así se ha almacenado en memoria, de modo que podemos ejecutarla llamándola por su nombre. Ahora bien, también podríamos crear una función anónima y guardarla en una variable

1
2
3
4
5
const miFuncion = function (nombre) {
return 'Holis ' + nombre
}

console.log(miFuncion('Rumualdo')) // output> Holis Rumualdo

Así creamos una función anónima a la que no le asignamos ningún nombre y la guardamos en la constante llamada miFuncion.

Otro modo de crear funciones es con la expresión de flecha. Definamos una arrow function

1
2
3
4
5
const miFuncion = (nombre) => {
return 'Holis ' + nombre
}

console.log(miFuncion('Rumualdo')) // output> Holis Rumualdo

Para lxs mas curiosxs

La pregunta que probablemente sobrevenga es cuál es la diferencia entre una arrow function y una funcion creada a partir del operador function. Bien, para entender esta diferencia hay que hablar del contexto de una función. Este contexto no es más que el espacio de memoria donde se guardan las variables a las que la función accede. La diferencia entre las dos formas de crear funciones es que en el caso de la arrow function este contexto es definido en la declaración de la función, mientras que en la función creada a partir del operador function el contexto es definido al llamar la función.
Veamos un ejemplo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function ejemploContextos() {

// En este punto this hace refencia al objeto global window
this.figura = 'triangulo'
this.color = 'rojo'

// Creamos la funcion FiguraGeoClass para establecer otro contexto y posteriormente evaluar a cuál accede cada funcion
function FiguraGeoClass() {
this.figura = 'rectangulo'
this.color = 'verde'
}

// Con el operador new creamos una nueva instancia de la funcion creada arriba
let figura = new FiguraGeoClass()

// Creamos una funcion con el operador function para acceder a this.figura
let getFigura = function () {
return this.figura
}

// Agregamos una nueva propiedad para acceder a la figura y para esto implementamos la funcion creada con function
figura.getFigura = getFigura;

// Creamos una funcion de flecha para acceder a this.color
let getColor = () => {
return this.color
}

// Agregamos una nueva propiedad para acceder al color y para esto implementamos la funcion creada *arrow function*
figura.getColor = getColor

// Evaluamos los resultados imprimiendolos
console.log(getFigura())
console.log(getColor())
console.log(figura.getFigura())
console.log(figura.getColor())
}

ejemploContextos() // output> triangulo
// output> rojo
// output> rectangulo
// output> rojo

Analicemos el resultado.

En las lineas 33 y 34 imprimimos los valores que nos retornan ambas funciones (function y arrow funtion) para comprobar que ambas acceden a os valores globales (tiéngulo y rojo)

Luego, en las lineas 35 y 36 imprimimos los valores de las propiedades asignadas a la figura creada y evaluamos un comportamiento diferente. Mientras que en el caso de la función creada con el operador function para obtener la figura nos devuelve el valor asignado en el contexto de la funcion a partir de la cual instanciamos la nueva figura; mientras que la funcion creada mediante arrow function para obtener el color nos sigue devolviendo el valor global y no el establecido en el contexto de la funcion de la cual instanciamos la nueva fugura.

Esto se debe, como mencionamos arriba es dónde se define el contexto, para la arrow function es definido en la declaración en la function es al momento de la llamada.

Este es un tema que tiene su complejidad y la asimilación del tema puede llevar tiempo. En la práctica lo importante es conocer que se diferencian en cómo se relacionan con el contexto :)