Cómo utilizar los callbacks en JavaScript

Autor: | Última modificación: 19 de julio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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,

}

}

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:

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!