Para aprender a programar en un nuevo lenguaje o herramienta de programación, no solo debemos aprender cómo funciona su sintaxis, pero también su filosofía. Esto nos ayudará a entender por qué suceden las cosas más allá de simplemente qué sucede. Por ello, en este post te enseñaremos qué es una función pura en JavaScript, un concepto que te ayudará a la hora de programar con React.
Un poco de contexto
Como has podido leer en nuestro post sobre los componentes en React, un componente es una función que nos permite manipular el objeto de propiedades props. Es decir que con un componente podemos acceder a una de las propiedades de este objeto y crear una función que manipule dicha propiedad.
Aunque los componentes en React son muy complejos y extensos, no podemos manipular las propiedades del objeto props de manera ilimitada. Entonces, deberemos seguir una regla básica: un componente no debe modificar las props que le pasamos, nunca.
Supongamos que tenemos el siguiente componente Message que manipula la propiedad children del objeto props. Este componente utiliza una función de tipo arrow function para transformar esta propiedad a un span que encierra dicha propiedad.
const Message = ({children}) =>{
return <span> {children}</span>
Ahora, cuando nos referimos a que un componente no debe modificar las props que le pasamos, estamos hablando de ejecutar una línea de código como la siguiente.
const Message = ({children}) =>{
children = ‘otra cosa’;
return <span> {children}</span>
En las anteriores líneas estamos cambiando el valor de children por ‘otra cosa’. Esto está prohibido en React, al igual que lo serían las siguientes líneas de código.
const Message = ({children, count}) =>{
children = ‘otra cosa’;
count = 9;
return <span> {children}</span>
Entonces, ¿por qué sucede esto? Pues porque la filosofía de React es que el componente padre maneje al hijo a través de las props. Es decir que, al usar props, esperamos que la vista que renderizamos desde el hijo sea la misma que le pasamos con el padre. Esto sucede porque un componente debe funcionar como una función pura en JavaScript.
¿Qué es una función pura en JavaScript?
Una función pura en JavaScript se refiere a una función en la que sabemos con certeza que, si le pasamos unos determinados valores, sabremos la respuesta. Por ejemplo, una función pura en JavaScript sería una en la que sumamos dos números. Entonces, si sumamos 2 y 3 sabemos que el resultado es 5. Entonces, si definimos una propiedad en nuestro objeto props y la pasamos por un componente sin modificarla, sabemos lo que obtendremos en nuestro return. De este modo, un componente funcionaría como una función pura en JavaScript.
Sin embargo, si cogemos esta suma y definimos que al primer valor le debemos restar la hora actual y al segundo le debemos sumar 68 por la fecha, no sabemos exactamente cuál será el resultado, pues hay muchas variables en juego. Esto es lo que sucede cuando cambiamos los valores de una propiedad dentro de un componente, pues no sabremos qué obtendremos como return.
¿Qué sigue?
Ahora que sabes qué es una función pura en JavaScript, ¡puedes utilizar este conocimiento para distinguir las posibilidades de tus propios proyectos! Si quieres aprender cómo desarrollar un proyecto de programación, no solo en React pero también en muchas otras herramientas, te invitamos a nuestro Desarrollo Web Full Stack Bootamp. Allí, aprenderás a dominar lenguajes y herramientas de programación para la web como React, JavaScript, CSS y HTML. ¿Qué esperas para dar este paso y convertirte en un experto del desarrollo web? ¡Inscríbete ya!
