Las funciones son uno de los bloques de construcción fundamentales en JavaScript.
Una función en JavaScript es similar a un procedimiento (un conjunto de instrucciones que realiza una tarea).
Podemos decir que una función es un bloque de instrucciones donde se realizara cierto algoritmo/tarea/instrucción que devolverá un resultado o modificara ciertos valores para un futuro.
Y también podemos recalcar que la funciones son principalmente usadas para ejecutar código repetitivo.
Aunque sabemos que podemos hacer con una función muchas veces no entendemos si declararlas de una forma u otra, esto debido a tenemos varias formas de declararlas, asi que vamos a verlas:
Declaración de función o Function Declaration
Esta es la tradicional de siempre que consta de la palabra clave function, seguida de:
- El nombre de la función.
- Una lista de parámetros de la función, entre paréntesis y separados por comas, si no lleva parámetros solo basta con dejar los paréntesis vacíos ().
- Las declaraciones de JavaScript que definen la función, encerradas entre llaves, { ... }.
function mi_nombre(parametro1, parametro2, ...) {
// declaración de javascript, operaciones, etc.
// simplemente lo que hará la función cuando sea llamada
return number * number;
}
Expresion de función o Function Expression
La principal diferencia con de la function expression con las function declaration es que aqui no incian con la palabra reservada function si no que inician como si creaaramos una variable:
const variable = function(parametro1, parametro2, ...) {
// declaración de javascript...
}
Nos podemos dar cuenta que estas funciones (function expression) pueden ser anónimas, pero podemos hacer mención de ellas o mandarlas a llamar con el nombre de la variable en donde la alojamos.
También otra de las diferencias respecto a estas dos funciones, es el lugar donde las declaramos:
alert(foo()); // "soylenin" ✅
function foo () {return "soylenin";}
Con las declaraciones de funciones (function declaration) podemos decir estas funciones una vez que se declaran estarán disponibles en donde sea, siempre y cuando estén dentro de su scope, y no importara si se mandan a llamar antes o después.
Pero con las Expresiones de funciones (function expression) es diferente, por qué sabemos que la función la guardamos en una variable y recordemos que las variables no pueden ser llamadas antes de haberlas asignado, si no simplemente sera un error:
alert(foo()); // ERROR! foo no esta declarada
const foo = function() {return "soylenin";}
Funciones flecha o Arrow Functions
Una función flecha es una alternativa compacta a una expresión de función tradicional, pero es limitada y no se puede utilizar en todas las situaciones.
En lugar de seguir usando la palabra function la podemos omitir pero en su lugar tenemos que poner un signo igual (=) mas un cierre de paréntesis cuadrado (>) [o un mejor conocido "mayor que"] después del paréntesis de cierre:
const variable = () => {
return "soylenin"
}
console.log(variable()) // "soylenin"
Esta función es mas compacta y tiene sus propios beneficios con respecto al resto, ya que si nosotros solo retornamos un solo valor, podemos quitar la palabra return y la llaves e implícitamente la función retornara el valor.
const variable = () => "soylenin"
console.log(variable()) // "soylenin"
Esto es muy practico ya eliminamos código y sigue siendo igual de efectiva la función, y debemos de decir que no solo podemos usar funciones de flecha de esta manera, en el mundo el uso mas cotidiano que se le da a esta función es cuando se usan dentro de métodos iteradores, por ejemplo .map() en un array
const valorFinal = arrayProduct.map((item) => item.id === 3)
Aquí simplemente a la variable valorFinal se le asignara el valor del array que corresponda con él id de 3.
También otros de los grandes beneficios es que es utilizado para poder heredar el contexto.
Básicamente fue para quitar los engorrosas y extrañas formas de usar this en nuestro código, haciendo que sea mas intuitivo el código.
En las funciones tradicionales de manera predeterminada this está en el ámbito de window:
window.age = 10; // <-- ¿me notas?
function Person() {
this.age = 42; // <-- ¿me notas?
setTimeout(function () {// <-- La función tradicional se está ejecutando en el ámbito de window
console.log("this.age", this.age); // genera "10" porque la función se ejecuta en el ámbito de window
}, 100);
}
const p = new Person();
Las funciones flecha no predeterminan this al ámbito o alcance de window, más bien se ejecutan en el ámbito o alcance en que se crean:
window.age = 10; // <-- ¿me notas?
function Person() {
this.age = 42; // <-- ¿me notas?
setTimeout(() => {// <-- Función flecha ejecutándose en el ámbito de "p" (cuando se manda a llamar a la función y donde se aloja)
console.log("this.age", this.age); // genera "42" porque la función se ejecuta en el ámbito de Person
}, 100);
}
const p = new Person();
Top comments (6)
lenin = genial( ) {exelente!}
Gracias por postear contenido en español 👏🏽👏🏽
Eso intento amigo, en la plataforma eso es lo que falta, para que podamos llegar a más comunidad latam 😀
Ánimo!
Hola @soyleninjs estuve comprobando los 2 ultimos codigos en la consola de chrome, y no me da el resultado esperado, sin embargo si le añado el operador new
// const p = new Person();
Si me dá el resultado que pones en los comentarios.
No se si es correcto, si puedes sacarme de esta duda te seria muy agradecido.
Salu2! :)
Claro @tanoalmost, mira:
En mi ejemplo, se está utilizando la función Person como una función normal (no como constructora), la variable global window.age se establece en 10.
Dentro de Person, se crea una propiedad age en el objeto this con el valor de 42, que en este caso es window, ya que la función no está siendo utilizada como constructora, es decir, las declaraciones de funciones de primer nivel tienen como referencia a window y es por eso que también puedes mandar a llamar a la función con window.Person().
La función de temporización no afecta al contexto de ejecución de la función de callback del temporizador, es decir, setTimeout es una funcion de window, por lo tanto, cuando se imprime this.age, se refiere a la propiedad age de window, que es 42.
En el Caso que me explicas que hay que agregar la palabra "new", se crea una función constructora llamada Person. que sucede cuando se usa "new Person()", y con esto se crea un nuevo objeto vacío.
Junto con esto, dentro de la función Person, this.age se establece en 42, sin embargo, esto no afecta a window.age ya que this ahora se refiere al nuevo objeto creado por new Person().
Luego, dentro del setTimeout, el this se refiere al contexto global, ya que setTimeout no cambia el contexto de this, este sigue siendo window, por lo tanto, this.age se refiere a window.age, que es 10.
Por lo tanto, agradezco que notaras este pequeño detalle con la logica del codigo, ya lo arreglare enseguida para que funcione como se menciona en el post, que en este caso se agregara el new.
Salu2 :D