JavaScript Moderno (ES6+)
Volver a clases
Desarrollo Móvil●●Intermedio

JavaScript Moderno (ES6+)

120 min
7 vistas

Semana para dominar JavaScript moderno, TypeScript y patrones de desarrollo móvil.

Contenido Principal

Destructuring y Spread

  • Extracción de datos de objetos y arrays.
  • Uso de spread para copiar y combinar estructuras.
javascript
1const user = { name: "María", age: 25, email: "maria@example.com", location: "Madrid" };
2const { name, email } = user;
3const { name: userName, age: userAge } = user;
4function UserCard({ name, email, age }) {
5  return (
6    <View>
7      <Text>{name}</Text>
8      <Text>{email}</Text>
9      <Text>{age} años</Text>
10    </View>
11  );
12}

Métodos de Arrays

  • map, filter, find, reduce, some, every, sort.
javascript
1const products = [
2  { id: 1, name: "iPhone", price: 999, category: "electronics" },
3  { id: 2, name: "Camisa", price: 29, category: "clothing" },
4  { id: 3, name: "iPad", price: 599, category: "electronics" },
5];
6const productNames = products.map((p) => p.name);
7const electronics = products.filter((p) => p.category === "electronics");
8const affordable = products.filter((p) => p.price < 100);
9const product = products.find((p) => p.id === 2);
10const total = products.reduce((sum, p) => sum + p.price, 0);
11const hasExpensive = products.some((p) => p.price > 500);
12const allAffordable = products.every((p) => p.price < 1000);
13const sortedByPrice = [...products].sort((a, b) => a.price - b.price);

Template Literals

  • Interpolación y multilínea en strings.
javascript
1const name = "Carlos";
2const age = 30;
3const greeting = `Hola, soy ${name} y tengo ${age} años`;
4const message = `\nBienvenido a la app\nTu nombre es: ${name}\nEdad: ${age}`;
5function Welcome({ userName, points }) {
6  return (
7    <Text
8      style={styles.welcome}
9    >{`¡Hola ${userName}! Tienes ${points} puntos`}</Text>
10  );
11}