Serie de jerga tecnológica
Es probable que ya sepa cómo escribir funciones de estas dos formas. function doStuff() {}y () =>{} son caracteres que escribimos todo el día. Pero, ¿en qué se diferencian y por qué utilizar uno sobre el otro?
Nota: Los ejemplos se dan en JavaScript. Y nuestra M ileage H ay V aria con otros idiomas.
La primera diferencia: un nombre
Cuando crea una función con un nombre , esa es una declaración de función . El nombre puede omitirse en las expresiones de la función , haciendo que la función sea "anónima".
Declaración de función:
function doStuff() {};Expresión de función:
const doStuff = function() {}A menudo vemos funciones anónimas que se utilizan con la sintaxis de ES6 así:
const doStuff = () => {}Izar
Elevar se refiere a la disponibilidad de funciones y variables "en la parte superior" de su código, en lugar de solo después de que se crean. Los objetos se inicializan en el momento de la compilación y están disponibles en cualquier lugar de su archivo.
Las declaraciones de función se elevan pero las expresiones de función no.
Es fácil de entender con un ejemplo:
doStuff();function doStuff() {};Lo anterior no arroja un error, pero esto:
doStuff();const doStuff = () => {};El caso de las expresiones de función
Puede parecer que las declaraciones de funciones, con sus poderosas propiedades de elevación, van a superar las expresiones de función por su utilidad. Pero elegir uno sobre el otro requiere pensar cuándo y dónde se necesita la función . Básicamente, ¿quién necesita saberlo?
Las expresiones de función se invocan para evitar contaminar el ámbito global . En lugar de que su programa conozca muchas funciones diferentes, cuando las mantiene en el anonimato, se utilizan y se olvidan de inmediato.
IIFE
El nombre - expresiones de función inmediatamente invocadas - prácticamente lo dice todo aquí. Cuando se crea una función al mismo tiempo que se llama, puede usar un IIFE, que se ve así:
(function() => {})()o:
(() => {})()Para obtener una visión en profundidad de los IIFE, consulte este artículo completo.
Devoluciones de llamada
Una función pasada a otra función a menudo se denomina "devolución de llamada" en JavaScript. He aquí un ejemplo:
function mapAction(item) { // do stuff to an item } array.map(mapAction)array.map(mapAction)El problema aquí es que mapActionestará disponible para toda su aplicación, no es necesario. Si esa devolución de llamada es una expresión de función, no estará disponible fuera de la función que la usa:
array.map(item => { //do stuff to an item })o
const mapAction = function(item) { // do stuff to an item } array.map(mapAction)array.map(mapAction)aunque mapActionestará disponible para codificar debajo de su inicialización.
Resumen
En resumen, use declaraciones de función cuando desee crear una función en el ámbito global y hacerla disponible en todo su código. Use expresiones de función para limitar dónde está disponible la función, mantenga su alcance global ligero y mantenga una sintaxis limpia.
Referencias
- Declaración de función, documentos MDN.
- Expresión de función, documentos MDN.
- Izado, glosario MDN.
Serie de jerga tecnológica
Hay tantas frases que se lanzan en reuniones y conferencias de tecnología, asumiendo que todos ya conocen la jerga. A menudo no me dejo llevar por la jerga. Es común que los desarrolladores se asombren de que me falte un poco de conocimiento.
La verdad es que a menudo no conozco la palabra correcta. Como humanos, pero especialmente como humanos desarrolladores, nos encanta descartar a aquellos que no "hablan lo que se habla", por lo que esta serie trata sobre obtener una comprensión sólida de los conceptos de programación que uno "debería saber".
Este es el segundo artículo de la serie. La primera fueron las funciones de orden superior. Busque más cuando asisto a reuniones y conferencias y finjo saber de qué están hablando mis compañeros técnicos, pero luego tengo que ir a casa y buscarlo en Google.