diff --git a/functions/02_callbacks.js b/functions/02_callbacks.js index 699bd18..d020a88 100644 --- a/functions/02_callbacks.js +++ b/functions/02_callbacks.js @@ -33,116 +33,8 @@ export function useCallbacksAsDataType() { Los Callbacks son uno de los conceptos más importantes de Javascript. Una vez que los entiendes, puedes aprovechar el máximo el potencial de este lenguaje. - 👀 👀 PON MUCHA ATENCIÓN EN LA SIGUIENTE INFORMACIÓN 👀 👀 - - Cuando hacemos programación que tiene relacionada por ejemplo arreglos hay ciertos patrones que se repiten - Veamos unos ejemplos - - findUserByName(users, name){ - // -- código común: recorrer el arreglo - var newArray = [] - for(var index = 0; index < users.length; index++) { - // --- código común: conocer el valor actual de la iteración -- - var actualUser = users[index] - var actualIndex = index - - // --- código variable: cualquier operación que incluya las variables anteriores. - // Pseudo-código - if (actualUser.name.indexOf(name) !== -1) { - newArray.push(actualUser) - } - } - // -- código común: devolver el nuevo arreglo - return newArray - } - - formatRutsInEmployees() { - // -- código común: recorrer el arreglo - var newArray = [] - for(var index = 0; index < users.length; index++) { - // --- código común: conocer el valor actual de la iteración -- - var actualUser = users[index] - var actualIndex = index - - // --- código variable: cualquier operación que incluya las variables anteriores. - // Pseudo-código - actualUser.rut = actualUser.rut.replace('.', '') - newArray.push(actualUser) - } - // -- código común: devolver el nuevo arreglo - return newArray - } - - 👀 👀 Fijarse que casi todo es código común. - - 🏃‍♀️🏃‍♀️ Corre a mirar todos los ciclos que hayas escrito y fijate en esto - - 🛠️ Los callback viene a ayudarnos a "abstraer" el código variable frente a operaciones comunes 🛠️ - - demos un paso más allá y ahora refactoricemos - lo anterior - - // CASO 1 - // 👇👇 REFACTOR ACÁ 👇👇 - checkIfUser(actualUser, name) { - return actualUser.name.indexOf(name) !== -1 - } - findUserByName(users, name){ - // -- código común: recorrer el arreglo - var newArray = [] - for(var index = 0; index < users.length; index++) { - // --- código común: conocer el valor actual de la iteración -- - var actualUser = users[index] - var actualIndex = index - - // --- código variable: cualquier operación que incluya las variables anteriores. - - // 👇👇 REFACTOR ACÁ 👇👇 <-- EL CALLBACK NOS DICE SI EL VALOR ACTUAL APLICA O NO PARA LA OPERACIÓN - if(checkIfUser(actualUser, name)) { - ... más operaciones etc - } - } - // -- código común: devolver el nuevo arreglo - return newArray - } - - // CASO 2 - // 👇👇 REFACTOR ACÁ 👇👇 - replaceNoAllowedChars(text) { - return text.replace('.', '') - } - formatRutsInEmployees() { - // -- código común: recorrer el arreglo - var newArray = [] - for(var index = 0; index < users.length; index++) { - // --- código común: conocer el valor actual de la iteración -- - var actualUser = users[index] - var actualIndex = index - - // --- código variable: cualquier operación que incluya las variables anteriores. - // Pseudo-código - // 👇👇 REFACTOR ACÁ 👇👇 <-- EL CALLBACK MODIFICA LOS VALORES DEL ARREGLO - actualUser.rut = replaceNoAllowedChars(actualUser.rut) - newArray.push(actualUser) - } - // -- código común: devolver el nuevo arreglo - return newArray - } - - 👀 👀 Puedes notar que NO HICIMOS GRANDES CAMBIOS simplemente dividimos un poco la responsabilidad en distintas funciones - - Los callbacks DELEGAN la responsabilidad - - function callback <-- recibirá los datos y hará una X operación - - function forLoop(array, callback) <-- recorrerá el array y le pasará al callback los datos para que haga lo que necesita -*/ - - -/* - La ventaja de los callback es que la responsabilidad que delegan es "abtracta", esto quiere decir que nosotros podemos hacer cualquier operación siempre y cuando le pasemos los argumentos necesarios a esa función. - Cuando usas un callback DEBES saber si o si que argumentos dispondrás para poder operar. - Con los años y la experiencia aprenderás a entender mejor las documentaciones e incluso crear tus propios métodos que usen callbacks para aprovechar el poder de Javascript + Revisa la siguiente información: + https://javascript.boolean.cl/main/docs/01-fundamentos/05-funciones.html#caso-de-estudio-callbacks */ // forEach ... sirve para iterar un array pero no hacer modificaciones en él