JavaScript
Explica la sintaxis de las arrow functions, el retorno implícito y sus diferencias con funciones normales respecto a this, arguments, new y bind.
Una arrow function es una forma de crear funciones mediante la sintaxis =>.
const add = (first, second) => {
return first + second;
};const greet = (name) => {
return `Hello, ${name}`;
};Cuando existe un solo parámetro, los paréntesis pueden omitirse.
const double = number => {
return number * 2;
};Mantenerlos puede dar consistencia y facilita añadir parámetros después.
const double = (number) => {
return number * 2;
};Sin parámetros se necesitan paréntesis.
const getCurrentDate = () => {
return new Date();
};Si el cuerpo contiene una sola expresión, pueden omitirse llaves y return.
const double = (number) => number * 2;Estas dos funciones son equivalentes:
const first = (number) => {
return number * 2;
};
const second = (number) => number * 2;El retorno implícito funciona con expresiones, no con sentencias.
const getLabel = (isActive) =>
isActive ? "Active" : "Inactive";Las llaves se interpretarían como el cuerpo de la función.
const createUser = (name) => {
name: name;
};La función anterior no devuelve el objeto esperado. Debe envolverse entre paréntesis.
const createUser = (name) => ({
name,
});Los paréntesis indican que el objeto es una expresión que debe retornarse.
Son comunes cuando la función es corta y se utiliza cerca de la operación.
const activeProducts = products.filter(
(product) => product.isActive,
);const names = users.map((user) => user.name);Una arrow function no vuelve automáticamente más claro el código. Si el callback contiene varias decisiones, un nombre separado puede expresar mejor la intención.
function canBePublished(project) {
return project.isComplete && !project.hasErrors;
}
const publishableProjects = projects.filter(canBePublished);Una arrow function no crea su propio this. Utiliza el this disponible en el scope exterior.
function Timer() {
this.seconds = 0;
setInterval(() => {
this.seconds++;
}, 1000);
}La arrow function conserva el this de la llamada a Timer.
Una función normal obtiene this según cómo sea llamada.
const counter = {
value: 0,
increment() {
this.value++;
},
};Usar una arrow como método puede ser incorrecto cuando se necesita el objeto receptor.
const counter = {
value: 0,
increment: () => {
this.value++;
},
};Esa arrow no recibe counter como this; captura el this exterior.
El comportamiento completo se estudiará en la nota this.
function regularFunction() {
console.log(arguments);
}Una arrow function busca arguments en un scope exterior.
const arrowFunction = () => {
console.log(arguments);
};En un módulo, ese nombre puede ni siquiera existir.
Para recibir una cantidad variable de argumentos, usa rest parameters.
const sum = (...numbers) =>
numbers.reduce((total, number) => total + number, 0);const User = (name) => {
this.name = name;
};
new User("Nicolás"); // TypeErrorLas arrow functions no son constructoras y no tienen un prototype propio utilizable para construcción.
Cuando necesites crear instancias mediante new, utiliza una clase o una función constructora.
const showName = () => this.name;
showName.call({ name: "Nicolás" });call no reemplaza el this léxico de la arrow.
En una función normal sí puede establecerse el receptor.
function showName() {
return this.name;
}
showName.call({ name: "Nicolás" }); // "Nicolás"const loadProducts = async () => {
const response = await fetch("/api/products");
return response.json();
};Sigue siendo una arrow function, pero devuelve una promesa por estar declarada con async.
Cuando una arrow devuelve una expresión larga, los saltos de línea y paréntesis ayudan a leerla.
const calculateLineTotal = ({ price, quantity, discount }) => (
price * quantity * (1 - discount)
);Si la función necesita validaciones o varias etapas, un cuerpo con llaves suele ser más claro.
const calculateLineTotal = (item) => {
if (item.quantity <= 0) {
return 0;
}
const subtotal = item.price * item.quantity;
return subtotal * (1 - item.discount);
};Suele encajar bien cuando:
this exterior.Una función normal suele ser mejor cuando:
this dinámico.arguments.this.new.arguments.this con bind.=>.this desde el scope exterior.arguments propio.call, apply y bind no reemplazan su this.¿Por qué esta función no devuelve el objeto esperado?
const createProduct = (name) => {
name,
active: true,
};Las llaves se interpretan como el cuerpo de la función. Para retornar un objeto literal de forma implícita debe escribirse const createProduct = (name) => ({ name, active: true });.
Parámetros y argumentos explica cómo recibe información una función, qué ocurre con valores faltantes o adicionales y cómo diseñar una interfaz de llamada clara.