Cómo utilizar los callbacks en JavaScript

Los callbacks en JavaScript son una forma de utilizar funciones como argumentos o valores de otras funciones, permitiéndonos ser más eficientes con nuestro código. Por ello, en este post, te enseñaremos cómo utilizar los callbacks en JavaScript.

¿Qué son los callbacks en JavaScript?

Antes de enseñarte cómo utilizar los callbacks en JavaScript, debemos saber exactamente qué es eso de la función callback. En este lenguaje de programación, un callback se refiere a utilizar una función como el valor de un parámetro de otra función. Es decir, en vez de utilizar un elemento con un valor de tipo primitivo o un string, usamos una función como el argumento de otra.

¿Cómo utilizar los callbacks en JavaScript?

Para enseñarte cómo utilizar los callbacks en JavaScript, usaremos un ejemplo. Imagina que queremos crear un videojuego en el que hay personajes que se atacan entre sí. Esto lo hacen con distintas armas y velocidades y causan diferentes niveles de daño. Entonces, podríamos escribir la siguiente arrow function llamada atacar:

const atacar = (personaje, funcionAtaque) => {

let ataque = funcionAtaque (personaje);

console.log (‘${personaje.name} ataca con ${ataque.weapon}: ${ataque.attackSpeed} velocidad, causa ${ataque.attackDamage}’)

}

Supongamos que la función anterior es la única que tenemos en nuestro videojuego. Entonces, las variables con las que podemos trabajar serán personaje y funcionAtaque. A continuación, crearemos nuestros personajes usando la variable const y les daremos las distintas propiedades que hemos definido en nuestra función:

const legolas = {

name: ‘legolas’,

attackSpeed: 12,

attackDamage: 4

}

const gimli = {

name: ‘gimli’,

attackSpeed: 4

attackDamage: 12

}

const aragon = {

name: ‘aragon’,

attackSpeed: 8

attackDamage: 8

}

Ahora, crearemos distintas funciones para cada arma con la que podemos atacar. Estas funciones nos ayudarán a cambiar los valores de velocidad y daño que le hemos dado a nuestros personajes en distintas proporciones:

const attackWithSword = (personaje) => {

return {

weapon: ‘sword’,

attackSpeed: personaje.attackSpeed + 4,

attackDamage: personaje.attackDamage + 4,

}

}

const attackWithHammer = (personaje) => {

return {

weapon: ‘hammer’,

attackSpeed: personaje.attackSpeed – 1,

attackDamage: personaje.attackDamage + 9,

}

}

const attackWithBowAndArrow = (personaje) => {

return {

weapon: ‘bow and arrow’,

attackSpeed: personaje.attackSpeed +7,

attackDamage: personaje.attackDamage + 2,

}

}

¿Cómo hacer un callback (programación)?

Ahora que tenemos nuestras variables de personajes y nuestras funciones de armas, podemos darle valores a nuestra función atacar. Nuestros personajes serán simplemente variables insertadas en el parámetro personaje. Pero nuestras armas son funciones, por lo que podremos utilizar los callbacks en JavaScript para usarlas como el valor del parámetro funcionAtaque.

A continuación, te ponemos un ejemplo de un callback:

atacar (legolas, attackWithBowAndArrow)

El resultado de esta ejecución será el siguiente:

legolas ataca con bow and arrow: 19 velocidad, causa 6

Lo bueno de utilizar los callbacks en JavaScript es que nos permiten crear distintas combinaciones, algo que la estructura rígida de la función if no nos permite. A continuación, verás que podemos hacer que Legolas ataque con la espada, lo que dará resultados diferentes:

atacar (legolas, attackWithSword)

legolas ataca con sword: 16 velocidad, causa 8

De igual manera, podemos usar todas las variables de personajes con todas las funciones de armas, creando una diversidad de resultados. Esto se logra porque siempre llamamos a la función inicial atacar, modificando sus parámetros con variables o con funciones.

¿Qué sigue?

Ahora que sabes cómo utilizar los callbacks en JavaScript para simplificar tu código y crear todo tipo de acciones, ¡es el momento de que crees tu propio proyecto con las funciones de JavaScript! Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, donde no solo aprenderás a dominar JavaScript, sino también otros lenguajes de programación, como HTML. ¡No te pierdas esta oportunidad y matricúlate!