Funciones
## Objetivos de Aprendizaje
- Declarar y llamar funciones
- Entender parámetros y argumentos
- Dominar valores de retorno
- Trabajar con funciones flecha
## Declarando Funciones
### Función Declarada
```javascript
function saludar(nombre) {
return `¡Hola, ${nombre}!`;
}
console.log(saludar("María")); // "¡Hola, María!"
```
### Función Expresada
```javascript
const sumar = function(a, b) {
return a + b;
};
console.log(sumar(5, 3)); // 8
```
### Función Flecha (Arrow Function)
```javascript
const restar = (a, b) => a - b;
// Equivalente a:
const restar2 = function(a, b) {
return a - b;
};
```
## Parámetros y Argumentos
### Parámetros Predeterminados
```javascript
function saludar(nombre = "invitado") {
return `¡Hola, ${nombre}!`;
}
console.log(saludar()); // "¡Hola, invitado!"
console.log(saludar("Ana")); // "¡Hola, Ana!"
```
### Rest Parameters
```javascript
function sumar(...numeros) {
let total = 0;
for (const num of numeros) {
total += num;
}
return total;
}
console.log(sumar(1, 2, 3, 4, 5)); // 15
```
## Valores de Retorno
### return
```javascript
function multiplicar(a, b) {
return a * b;
}
const resultado = multiplicar(4, 5);
console.log(resultado); // 20
```
### Sin return
```javascript
function mostrarMensaje(mensaje) {
console.log(mensaje);
}
const valor = mostrarMensaje("Hola");
console.log(valor); // undefined
```
### Retorno Temprano
```javascript
function encontrarPrimerNegativo(numeros) {
for (const num of numeros) {
if (num < 0) {
return num;
}
}
return null;
}
console.log(encontrarPrimerNegativo([1, 2, -3, 4])); // -3
```
## Funciones Flecha
### Sintaxis Básica
```javascript
// Sin parámetros
const greet = () => "¡Hola!";
// Un parámetro
const double = x => x * 2;
// Múltiples parámetros
const add = (a, b) => a + b;
// Cuerpo con bloque
const calculateTax = (amount, tax) => {
const taxAmount = amount * tax;
return amount + taxAmount;
};
```
### Ventajas
```javascript
// Conciso
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
// No tiene su propio 'this'
const obj = {
name: "Ana",
regular: function() {
console.log(this.name); // "Ana"
},
arrow: () => {
console.log(this.name); // undefined (hereda de contexto padre)
}
};
```
## Ámbito (Scope)
### Ámbito de Función
```javascript
function ejemplo() {
const variableLocal = "solo existe aquí";
console.log(variableLocal); // funciona
}
// console.log(variableLocal); // Error: no está definida
```
### Ámbito de Bloque
```javascript
if (true) {
const bloque = "solo en este bloque";
let otroBloque = "también solo aquí";
var globalBloque = "esto es global";
}
```
### Ámbito Léxico
```javascript
function exterior() {
const mensaje = "externo";
function interior() {
console.log(mensaje); // Accede a mensaje del padre
}
interior();
}
exterior(); // "externo"
```
## Closures (Cierres)
### Ejemplo Básico
```javascript
function crearContador() {
let cuenta = 0;
return {
incrementar: function() {
cuenta++;
return cuenta;
},
decrementar: function() {
cuenta--;
return cuenta;
},
obtener: function() {
return cuenta;
}
};
}
const contador = crearContador();
console.log(contador.incrementar()); // 1
console.log(contador.incrementar()); // 2
console.log(contador.decrementar()); // 1
```
## Funciones de Orden Superior
### Como Argumentos
```javascript
function ejecutarDosVeces(fn) {
fn();
fn();
}
function saludar() {
console.log("¡Hola!");
}
ejecutarDosVeces(saludar);
```
### Como Valores de Retorno
```javascript
function crearMultiplicador(factor) {
return function(numero) {
return numero * factor;
};
}
const doble = crearMultiplicador(2);
const triple = crearMultiplicador(3);
console.log(doble(5)); // 10
console.log(triple(5)); // 15
```
## Métodos de Arrays Funcionales
### map - Transformar
```javascript
const numeros = [1, 2, 3];
const duplicados = numeros.map(n => n * 2);
console.log(duplicados); // [2, 4, 6]
```
### filter - Filtrar
```javascript
const numeros = [1, 2, 3, 4, 5, 6];
const pares = numeros.filter(n => n % 2 === 0);
console.log(pares); // [2, 4, 6]
```
### reduce - Acumular
```javascript
const numeros = [1, 2, 3, 4, 5];
const suma = numeros.reduce((acumulador, actual) => acumulador + actual, 0);
console.log(suma); // 15
```
### find - Encontrar
```javascript
const usuarios = [
{ nombre: "Ana", edad: 28 },
{ nombre: "Juan", edad: 35 },
{ nombre: "María", edad: 22 }
];
const mayor = usuarios.find(u => u.edad > 30);
console.log(mayor.nombre); // "Juan"
```
## Resumen
- Funciones declaradas: `function nombre(params) {...}`
- Funciones expresión: `const fn = function(...) {...}`
- Funciones flecha: `const fn = (...) => ...`
- Parámetros con valores predeterminados y rest parameters
- `return` para返回值; `undefined` si no hay return
- Funciones flecha: concisas, sin `this` propio
- Closures: funciones que recuerdan su ámbito externo
- HOF: funciones que reciben o retornan otras funciones
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →