js❤️ - Arrow functions y funciones de primera clase

#javascript #es6 #react #spanish

Arrow functions y funciones de primera clase

Las arrow functions nos permiten definir funciones de una forma más compacta.

// funciones normales
function sum(a, b) {
  return a + b;
}

// arrow function
const sum = (a, b) => a + b;

Lo que facilita definir funciones y pasarlas como argumentos en un solo paso

const nums = [1, 2, 3];
const squares = nums.map((n) => n * n);

Para que una arrow function devuelva un objeto debemos ponerlo entre paréntesis

const merge = (obj1, obj2) => ({ ...obj1, ...obj2 });

Cuidado porque podemos crear funciones nuevas cuando no lo deseamos.
En el siguiente ejemplo el componente Screen pasa una nueva función a Button cada vez que Screen se re-renderiza.
Y esto provoca que cada vez que el usuario escribe una letra en Input se re-renderice Button

function Screen() {
  const [value, setValue] = useState("");
  const [loading, setLoading] = useState(false);
  return (
    <div>
      <Input value={value} onChange={setValue} />
      <Button onclick={() => setLoading(true)} /> {/* ⛔️ */}
    </div>
  );
}

React nos permite solucionarlo con el hook useCallback que mantiene la función siempre igual para esta instancia del componente Screen.

function Screen() {
  const [value, setValue] = useState("");
  const [loading, setLoading] = useState(false);
  const activateLoading = useCallback(() => setLoading(true), [setLoading]);
  return (
    <div>
      <Input value={value} onChange={setValue} />
      <Button onclick={activateLoading} />
    </div>
  );
}

Además JavaScript tiene first-class functions. Eso significa que las funciones se tratan como una variable, pueden ser pasadas como argumento y devueltas en otras funciones.
Esto da lugar a algunos patrones interesantes:

Funciones que devuelven otras funciones (atención a la closure)

const logger = (module) => (msg) => console.log(`${module}: ${msg}`);

const log = logger("BeneficiaryApi");

log("Requested Beneficiaries");
// "BeneficiaryApi: Requested Beneficiaries

log("Beneficiaries request successful");
// "BeneficiaryApi: Beneficiaries request successful

Podemos ahorrarnos crear funciones intermedias

const Wrapper = ({ value, onChange }) => (
  <div>
    <Input value={value} onChange={(val) => onChange(val)} /> {/* ⛔️ */}
  </div>
);

Puede ser escrita como

const Wrapper = ({ value, onChange }) => (
  <div>
    <Input value={value} onChange={onChange} />
  </div>
);

O mejor incluso, ya que las props son las mismas

const Wrapper = (props) => (
  <div>
    <Input {...props} />
  </div>
);

Currying

Consiste en utilizar closures para generar funciones que llaman a otras funciones con algunos parámetros fijos. Por ejemplo:

const User = ({userId, name, address}) => (
  const update = (attr, value) => updateUser(userId, attr, value);
  <Input 
    label="Name" 
    value={name} 
    onChange={val => update("name", val)}
  />
  <Input 
    label="Address" 
    value={address} 
    onChange={val => update("address", val)}
  />
)