Introducción a JavaScript
¿Por qué aprender JavaScript?
¡Hola Mundo! en Mac
¡Hola Mundo! en Windows
Anatomía de una variable
Tipos de datos en JavaScript
Creación de strings
Operadores aritméticos
Conversión de tipos: Type Casting y Coerción
Conversión de tipos explícita e implícita
Estructuras de Control y Lógica
Operadores de comparación
Operadores lógicos
Ejecución condicional: if
Ejercicio: Adivina el número
Ejecución condicional: switch
Loop: for
Loop: for of
Loop: for in
Loop: while
Loop: do while
Funciones y This
Anatomía de una función
Funciones vs Métodos
Funciones puras e impuras
Arrow function y enlace léxico
Contextos de ejecución y scope chain
¿Qué es Closure?
Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?
Manipulación de Arrays
Introducción a Arrays
Mutabilidad e inmutabilidad de Arrays
Modificación básica del final con push( ), pop( )
Iteración con map( ) y forEach( )
Filtrado y reducción con filter( ) y reduce( )
Búsqueda de elementos con find( ) y findIndex( )
Crear copias con slice( )
Spread operator: casos de uso
Programación Orientada a Objetos
Anatomía de un Objeto
Trabajando con objetos en JavaScript
Función constructora
¿Qué es una clase?
Prototipos y herencias
Herencia en la práctica
Prototipos en la práctica
this en JavaScript
Proyecto: Crea una red social
Proyecto: Crea una red social parte 2
Asincronía en JavaScript
¿Cómo funciona el JavaScript Engine?
Promesas en JavaScript
Usando Async y await en JavaScript
For await of
¿Cómo funciona la web?
¿Cómo funciona HTTP?
Método GET en JavaScript
Método POST en JavaScript
Método DELETE en JavaScript
Importancia del id en el método DELETE
ECMAScript 6 y tus siguientes pasos
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
What are the differences between functions and methods in JavaScript?
JavaScript, an essentially object-based programming language, offers impressive versatility when it comes to working with both functions and methods. The main difference between a function and a method lies in their uniqueness and use within the code. In this content we will explain the differences and similarities between the two, showing you how to take full advantage of these functionalities in your program.
How do JavaScript functions work?
JavaScript functions are blocks of code designed to perform a specific task. When we write a function, we create and call it, and the JavaScript interpreter identifies them as elements of type "function". But did you know that functions are actually objects? This means that they have properties and methods.
-
Passing functions as arguments: This is a concept known as "callback". A function can be passed as an argument to another function, allowing you to modularize and execute code once a particular event occurs.
function A() { console.log("Function A");} function B(callback) { callback();} B(A); // Call function B, passing A as callback. -
Return functions: It is possible for a function to return another function, allowing you to create dynamic, reusable functions.
function A() { function B() { console.log("Function B"); } return B;} const newFunction = A();newFunction(); // Executes function B -
Assign functions to variables: In JavaScript, functions can be assigned to variables, becoming 'anonymous functions' or 'function expressions'.
const A = function() { console.log("Anonymous function");}; A();
What properties and methods do functions have?
Another essential feature of functions is that, just like objects, they can possess properties and methods. For example:
-
Method
call: allows you to explicitly set the context ofthiswithin the function.const obj = { name: "Object",}; function greet() { console.log(`Hello, I'm a ${this.name}`);} greet.call(obj); // Output: Hello, I'm an Object
How to nest functions?
Nesting functions means defining functions inside other functions. This technique allows you to logically group related functions and manage variables in a structured way.
-
Nested functions: In JavaScript, it is possible to access variables external to a function from another, more internal function, while maintaining access to its variables, which is one of the key concepts behind closures.
function A() { const message = "I am function A"; function B() { console.log(message); } B();} A(); // Will call function B, printing "I am function A".
Is it possible to store functions in objects?
Yes, it is entirely possible to store functions in objects. When a function is stored as a property of an object, it is known as a method of the object.
-
Methods on objects: Here is an example of how a function can be defined as a method of an object.
const rocket = { name: "Falcon 9", launchMessage: function() { console.log("Successful launch! 🚀"); } } }; rocket.launchMessage(); // It will execute the method and display "Successful launch! 🚀"
In summary, both functions and methods are essentially powerful tools in JavaScript. With these, you can structure your code more efficiently, create reusable functions, modularize the flow of your program, and effectively manage execution contexts. Continue exploring how functions and methods can improve the quality and functionality of your projects.
Contributions 35
Questions 1
Sort by:
Las funciones pueden realizar tareas y calcular valores y para calificar como función debe tomar alguna entrada y devolver una salida.
Un método es una función asociada a un objeto específico.
Los métodos están ligados a un objeto y se llaman en el contexto de ese objeto.
por lo tanto, un método es esencialmente una función que opera sobre propiedades o comportamientos de un objeto.
Siento que la explicación de funciones anidadas fue un poco confuso. Aunque lo pude entender. Para los que están iniciando se les puede dificultar. Creo que me gustaría que fuera más explicación con presentaciones.
A lo mejor esta clase puede quedar mejor en donde está el apartado de programación orientada a objetos.
Recomiendo que añadan opciones como puntos, para que toda la gente que este aportando se le valla sumando y estos se puedan cambiar por descuentos,productos,eventos etc..! ya que los cursos de platzi carecen de mucha informacion y explicacion y tenemos que salir a buscar informacion por otros lados y todavia aportar conocimiento en comentarios como si uno fuera profesor,a si mismo añadir la opcion de video para introducir y poder reforzar lo que los cursos carecen y asi ahorrar mucho tiempo en busquedas fuera de la plataforma y motivar a gente nueva que esta aprendiendo y que e visto que se rienden y dejan esto.
pd:deja tu corazon si estas e acuerdo ,para que llegue al equipo de platzi
Ejemplo de pasar funciones como argumentos.
Sobre el punto 4, sobre tener propiedades y métodos donde el ejemplo es:
```js
function a () {}
const obj = {}
a.call(obj)
```A mi en lo personal se me dificultó comprender el propósito del código y su aplicación, asi que tuve que investigar por mi cuenta. Ahora eh logrado comprender el código, y te quiero compartir un ejemplo que he creado para que te puedas guiar en caso de que estes pasando por alguna confusión.
.
Si tienes alguna duda sobre el código preguntame y con gusto te respondo.
.
Mi ejemplo:
```js
function imprimirInformacionDelCliente () {
console.log(
`Mi nombre es ${this.nombre},`
);
console.log(
`tengo ${this.edad} años`
);
console.log(
`y mi deporte favorito es ${this.deporte}.`
);
console.log('_____________________')
};
const clienteA = {
nombre: 'Pepe',
edad: 21,
deporte: 'MMA'
};
const clienteB = {
nombre: 'Ana',
edad: 25,
deporte: 'Crossfit'
};
const clienteC = {
nombre: 'Cristian',
edad: 19,
deporte: 'Calistenia'
};
imprimirInformacionDelCliente.call(clienteA);
imprimirInformacionDelCliente.call(clienteB);
imprimirInformacionDelCliente.call(clienteC);
```
Las **funciones** son bloques de código que realizan una tarea específica y se pueden llamar desde cualquier lugar del código. Son independientes y no están asociadas a ningún objeto en particular. Las funciones se declaran usando la palabra clave `function` (o `const`/`let` para funciones anónimas).
Los métodos son funciones que están asociadas a un objeto. Los métodos son invocados a través del objeto al cual pertenecen. Normalmente, un método se define como una propiedad de un objeto, con el valor de la propiedad siendo una función.
De verdad me ha costado mucho entender como funcionan los callbacks, pero logré entender el concepto con ayuda de ChatGPT para explicármelo y es increíble.
Recomiendo mucho usar ChatGPT
**Un callback es una función que se pasa como argumento a otra función para que sea ejecutada en un momento específico dentro de esa función.**
Aquí debajo hice un ejemplo que me quedó clarísimo, espero que a ti también te ayude :) 💜
```js
// Función que toma dos números y un callback para procesar el resultado
function procesarNumeros(num1, num2, callback) {
const resultado = callback(num1, num2); // Llamamos a la función "callback" pasando los dos números
console.log(`El resultado es: ${resultado}`);
}
// Función que suma dos números
function sumar(a, b) {
return a + b;
}
// Función que multiplica dos números
function multiplicar(a, b) {
return a * b;
}
// Usamos la función procesarNumeros para sumar
console.log("Sumando números:");
procesarNumeros(5, 3, sumar); // Resultado: 8
// Usamos la función procesarNumeros para multiplicar
console.log("Multiplicando números:");
procesarNumeros(5, 3, multiplicar); // Resultado: 15
```*// Función que toma dos números y un callback para procesar el resultado*function procesarNumeros(num1, num2, callback) { *const* resultado = callback(num1, num2); *// Llamamos a la función "callback" pasando los dos números* console.log(`El resultado es: ${resultado}`);}
*// Función que suma dos números*function sumar(a, b) { *return* a + b;}
*// Función que multiplica dos números*function multiplicar(a, b) { *return* a \* b;}
*// Usamos la función procesarNumeros para sumar*console.log("Sumando números:");procesarNumeros(5, 3, sumar); *// Resultado: 8*
*// Usamos la función procesarNumeros para multiplicar*console.log("Multiplicando números:");procesarNumeros(5, 3, multiplicar); *// Resultado: 15*
Tambien en esta clase se habla de los Bindings (minuto 5:15) de esto habla del contexto de ejecucion, de como la palabra this esta vinculada a una funcion \*\*este tema es importante de repasar \*\*
Binding en JavaScript se refiere a cómo la palabra clave `this` está vinculada o asociada en una función. Así que, entender los diferentes tipos de “binding” es esencial para comprender cómo se comporta `this` en diferentes situaciones. Veamos los cinco tipos principales de “binding”:
## Implicit Binding:
Ocurre cuando se invoca un método de un objeto, y `this` se vincula al objeto que contiene el método.
Ejemplo:
const person = {
name: 'Adam',
greet: function() {
console.log(`Hello, I'm ${this.name}`);
}
};
person.greet(); // Output: Hello, I'm Adam
## Explicit Binding:
Ocurre cuando se usan métodos como `call()`, `apply()`, o `bind()` para establecer explícitamente el valor de `this`.
Ejemplo:
function greet() {
console.log(`Hello, I'm ${this.name}`);
}
const adam = { name: 'Adam' };
greet.call(adam); // Output: Hello, I'm Adam
El término "enlace explícito" en JavaScript se refiere al proceso de establecer el valor de `this` de manera deliberada y explícita en una función, en lugar de depender del comportamiento de enlace implícito. En JavaScript, el valor de `this` dentro de una función puede cambiar dependiendo de cómo se llama esa función. El enlace implícito ocurre cuando el valor de `this` se establece automáticamente por el contexto de ejecución en el que se llama la función. Por otro lado, el enlace explícito te permite especificar manualmente el valor de `this` utilizando métodos como `call()`, `apply()`, o `bind()`. Otros tipos de binding
Ejemplo con [call()](https://www.notion.so/call-be3048bbf7504b88a3278f8a5785fe83?pvs=21)
// call()
function newDogGreeting(owner,address){
console.log(`Hi, im ${this.dogName} and u live with ${owner} in ${address}`);
}
const newHouse = {
dogName: 'Coconut'
}
const owner = 'lucy'
const address = 'Avenue 123'
newDogGreeting.call(newHouse,owner,address)
Ejemplo con [apply()](https://www.notion.so/apply-19a6d29a7c054de483f93deb9f0656d7?pvs=21)
function newDogGreeting(owner,address){
console.log(`Hi, im ${this.dogName} and u live with ${owner} in ${address}`);
}
const newHouse = {
dogName: 'Coconut'
}
const owner = 'lucy'
const address = 'Avenue 123'
const necessaryValues = \[owner,address]
newDogGreeting.apply(newHouse,necessaryValues)
Ejemplo con [bind()](https://www.notion.so/bind-1b497942af4d495faef9b7230bfade52?pvs=21)
function newDogGreeting(owner,address){
console.log(`Hi, im ${this.dogName} and u live with ${owner} in ${address}`);
}
const newHouse = {
dogName: 'Coconut'
}
const owner = 'lucy'
const address = 'Avenue 123'
const bindingWithBind = newDogGreeting.bind(newHouse,owner,address)
console.log(typeof bindingWithBind);
bindingWithBind()
## New Binding:
Ocurre cuando una función se invoca con la palabra clave new, creando así un nuevo objeto y vinculando `this`a ese objeto.
Ejemplo:
function Person(name) {
this.name = name;
}
const adam = new Person('Adam');
console.log(adam.name); // Output: Adam
## Lexical Binding:
Ocurre cuando se utiliza `this`en una función dentro de otra función. En este caso, this se vincula al contexto léxico de la función exterior.
Ejemplo:
const person = {
name: 'Adam',
greet: function() {
const innerFunction = () => {
console.log(`Hello, I'm ${this.name}`);
};
innerFunction();
}
};
person.greet(); // Output: Hello, I'm Adam
## Window Binding:
Ocurre cuando ninguna de las reglas anteriores se aplica y this se vincula al objeto global (por ejemplo, window en el navegador).
Ejemplo (ejecutar en el navegador):
function showName() {
console.log(this.name);
}
window.name = 'Adam';
showName(); // Output: Adam
const calculadora = { sumar: function(a, b) { return a + b; }, restar: function(a, b) { return a - b; } }; // Usar las funciones del objeto let resultadoSuma = calculadora.sumar(5, 3); // 5 + 3 = 8 let resultadoResta = calculadora.restar(5, 3); // 5 - 3 = 2 console.log("Resultado de la suma: " + resultadoSuma); // Imprime: Resultado de la suma: 8 console.log("Resultado de la resta: " + resultadoResta); //
El código crea un objeto *calculadora* que contiene dos funciones (sumar y restar). Luego, se llama a estas funciones utilizando la notación de punto y se muestran los resultados en la consola.
**APUNTES:**
```js
const restaurante = {
pedidos: [],
gestionPedidos: {
agregarPedido: function (nombreCliente, platillos) {
restaurante.pedidos.push({
cliente: nombreCliente,
platillos: platillos,
});
console.log(`Pedido agregado para ${nombreCliente}`);
},
mostrarPedidos: function () {
console.log("Lista de pedidos");
restaurante.pedidos.forEach((pedido, index) => {
console.log(
`${index + 1}. Cliente: ${pedido.cliente}, Platillos: ${pedido.platillos.map(
(p) => p.nombreCliente
).join(", ")}`
);
});
},
calcularTotal: function (indicePedido) {
const pedido = restaurante.pedidos[indicePedido];
if (!pedido) {
console.log(`El pedido no existe.`);
return;
}
const total = pedido.platillos.reduce((sum, platillo) => sum + platillo.precio, 0);
console.log(`El total del pedido de ${pedido.cliente} es: $${total}`);
},
},
};
restaurante.gestionPedidos.agregarPedido('Juan', [
{nombre: 'Hamburguesa', precio: 1500},
{nombre: 'Papas Fritas', precio: 500},
]);
restaurante.gestionPedidos.agregarPedido('Maria', [
{nombre: 'Pizza', precio: 1200},
{nombre: 'agua', precio: 700},
]);
restaurante.gestionPedidos.mostrarPedidos();
restaurante.gestionPedidos.calcularTotal(0);
restaurante.gestionPedidos.calcularTotal(1);
```const restaurante = { pedidos: \[],
gestionPedidos: { agregarPedido: function (nombreCliente, platillos) { restaurante.pedidos.push({ cliente: nombreCliente, platillos: platillos, }); console.log(`Pedido agregado para ${nombreCliente}`); },
mostrarPedidos: function () { console.log("Lista de pedidos"); restaurante.pedidos.forEach((pedido, index) => { console.log( `${index + 1}. Cliente: ${pedido.cliente}, Platillos: ${pedido.platillos.map( (p) => p.nombreCliente ).join(", ")}` ); }); },
calcularTotal: function (indicePedido) { const pedido = restaurante.pedidos\[indicePedido]; if (!pedido) { console.log(`El pedido no existe.`); return; } const total = pedido.platillos.reduce((sum, platillo) => sum + platillo.precio, 0); console.log(`El total del pedido de ${pedido.cliente} es: $${total}`); }, },};
restaurante.gestionPedidos.agregarPedido('Juan', \[ {nombre: 'Hamburguesa', precio: 1500}, {nombre: 'Papas Fritas', precio: 500},]);
restaurante.gestionPedidos.agregarPedido('Maria', \[ {nombre: 'Pizza', precio: 1200}, {nombre: 'agua', precio: 700},]);
restaurante.gestionPedidos.mostrarPedidos();restaurante.gestionPedidos.calcularTotal(0);restaurante.gestionPedidos.calcularTotal(1);
La verdad siento que falto mucha explicación y la implementación de mas ejemplos, para que fuera mas fácil entender este tema.*// Capacidades que tiene las funciones al igual que otros objetos*
La explicación de los conceptos fue buena, pero al ponerlo en practica se puede volver algo confuso.
Dejo mi humilde aporte con algunos ejemplos. Perdón si no me logro explicar en los comentarios que puse.
```js
// Capacidades que tiene las funciones al igual que otros objetos
//1. Funcion que podemos pasar como argumento a otra funcion -> (Callbacks)
// Recibe 3 parametros, callback es el la manera en la que sabemos que ese parametro significa que esta recibiendo una funcion.
//Se sumaran los numeros, y se guardara en una variable.
//ejecutamos la funcion que recibimos como parametro, dandole como argumento el resultado de la operación
function sumar(primerNumero, segundoNumero,callback){
resultado = primerNumero + segundoNumero
callback(resultado)
}
//se ejecuta esta funcion dentro de "sumar" recibiendo el resultado de la suma para imprimir el mensaje
function mostrarResultado(resultado){
console.log(`El resultado de la operación es: ${resultado}`);
}
// usamos la funcion principal dando los parametros que nos piden.
//El ultimo tenemos que enviarle la funcion que nos pide para completar el proceso, ya que se usa en la funcion principal
sumar(3, 3, mostrarResultado)
//RETORNAR FUNCIONES (Funciones de orden superior)
// la funcion recibe el numero del cual quieres saber su tabla de multiplicar
//Devuelve una funcion que multiplica cualquier cantidad de veces por el multiplicador que le hayas pasado
function tablaDemultiplicar(multiplicador){
// la funcion de adentro recibe la cantidad de veces que quieres multiplicar ese numero
return function(cantidad){
for (let i = 0; i <= cantidad; i++) {
resultado = multiplicador * i
console.log(`${multiplicador}x${i} = ${resultado}`);
}
}
}
//Declaramos una variable, en la cual queremos saber la tabla del 2
let tablaDel2 = tablaDemultiplicar(2) // Obtienes una funcion que te va a dar solo la tabla del 2
console.log(tablaDel2(10));// le dices a esa funcion la cantidad de veces que quieres multiplicar el 2
//ASIGNAR FUNCIONES A VARIABLES -> expresion de funcion
let sumar = function(a, b) {
return a + b;
};
let resultado = sumar(3, 4); // Llamamos a la función usando la variable 'sumar'
console.log("El resultado de la suma es: " + resultado);
//TENER PROPIEDADES Y METODOS
function calculadora() {
return "Soy una calculadora";
}
// Asignamos un método a la función
calculadora.sumar = function(a, b) {
return a + b;
};
calculadora.multiplicar = function(a, b) {
return a * b;
};
console.log(calculadora()); // "Soy una calculadora"
console.log(calculadora.sumar(3, 4)); // Llama al método 'sumar': Resultado: 7
console.log(calculadora.multiplicar(3, 4)); // Llama al método 'multiplicar': Resultado: 12
//ANIDAR FUNCIONES -> NESTED FUNCTIONS
function contador() {
let conteo = 0; // Esta variable no es accesible desde fuera de 'contador'
// Función interna que incrementa y muestra el conteo
return function b() {
conteo++; // Solo la función interna puede acceder y modificar 'conteo'
console.log(conteo);
};
}
let contar = contador(); // Creamos una instancia de la función 'b'
contar(); // Resultado: 1
contar(); // Resultado: 2
contar(); // Resultado: 3
//ALMECENANDO FUNCIONES EN OBJETOS
const rocket = {
name: "Falcon 9",
countDown: function countDown(){
for (let i = 5; i >= 0; i--) {
console.log(`Launch in ${i}`);
if (i == 0){
console.log('🔥🔥LAUNCHING!!!!!!!!!!!!!!!!!!!');
}
}
}
}
rocket.countDown()
```
* En funciones tradicionales, el valor de `this` depende de cómo se llama la función, lo que puede llevar a confusión si no se maneja adecuadamente.
* En funciones flecha, `this` es heredado del contexto de definición, lo que simplifica el manejo de `this`, pero puede no ser deseado en todos los casos.
* Usar `const a = function() {}` permite un control más explícito sobre `this`, lo cual es útil en situaciones donde se necesita que `this` se refiera al contexto dinámico de la llamada.
Cuando se agrega una funcion como metodo dentro de un objeto tampoco es necesario agregar un nombre a la funcion
``const rocket = { name: "Falcon 9", launchMessage: function (texto) { console.log(`Metodo de prueba ${texto}`); }} ``
`rocket.launchMessage("PA que veeaaaa");`
Las funciones y métodos en JavaScript dependen del caso de uso. Las funciones son bloques de código que se pueden llamar en cualquier momento, mientras que los métodos son funciones asociadas a un objeto. Por ejemplo, puedes utilizar una función para realizar cálculos y un método para manipular datos dentro de un objeto. La elección entre usar una función o un método depende de cómo se quiera estructurar el código y la relación entre los datos que se manejan.
yo creo que si se puede anidar funciones a un objeto, puesto que la función sería los atributos.
Les dejo un ejemplo que me ayudó a entender las funciones que devuelven funciones:
Os dejo un ejemplo que me ha ayudado a entender mejor los **callbacks**, espero que pueda ser de ayuda:
Está muy confusa esta clase. :/
Sí, es posible almacenar funciones en objetos
Hay un detalle importante que mejorar en esta plataforma (Platzi) y es que dan explicaciones de cómo funcionan las cosas, pero no explican para qué sirven, ni cual es su uso, ni cuando se deben usar. He visto muchos youtubers que se toman su tiempo para este tipo de cosas y así podemos sentirnos más familiarizados con la tecnología. Ojalá se tome en cuenta =(
Es posible almacenar funciones en objetos?
¡Sí, es absolutamente posible! En muchos lenguajes de programación orientados a objetos como JavaScript, Python y Ruby, puedes almacenar funciones en objetos y llamarlas más tarde. Estas funciones almacenadas en objetos a menudo se denominan **métodos**.
### Ejemplo en JavaScript:
javascript`const obj = `{
` nombre: "Carlos"`,
` saludo: function() `{
` console.log("¡Hola, " + this.nombre + "!"`);
` `}
};
`// Llamar a la función dentro del objeto`
`obj.saludo(); // Output: ¡Hola, Carlos!`
En este ejemplo, `saludo` es una función almacenada como una propiedad del objeto `obj`. Puedes acceder y llamar a esta función utilizando la sintaxis de punto (`obj.saludo()`).
### Ventajas de almacenar funciones en objetos:
1. **Organización**: Mantiene el código organizado y modular.
2. **Reutilización**: Facilita la reutilización de código y la implementación de comportamientos específicos para diferentes objetos.
3. **Encapsulamiento**: Permite encapsular funciones y datos relacionados en una sola entidad, lo que mejora la legibilidad y el mantenimiento del código.
\[Difference between Methods and Functions in JavaScript]\(https://www.geeksforgeeks.org/difference-between-methods-and-functions-in-javascript/)
\[JavaScript Object Methods]\(https://www.geeksforgeeks.org/javascript-object-methods/)
Si, es posible se llaman methods\[metodos]
Un método es una función que está asociada a un objeto. Imagina un coche: el coche es el objeto y "acelerar" es un método, porque solo se puede usar en el contexto de un coche. Por otro lado, una función es como un motor, que puede funcionar independientemente de cualquier vehículo.
Así que, mientras todas las funciones pueden ser utilizadas solas, los métodos requieren de un objeto específico para funcionar. En resumen, todos los métodos son funciones, pero no todas las funciones son métodos.
## Funciones y Métodos en JavaScript
* Las funciones en JavaScript, aunque se identifican como tipo `function`, siguen siendo objetos.
* Como objetos, las funciones pueden tener propiedades, métodos y un contexto de ejecución.
* Las funciones pueden ser invocadas y manipuladas de diversas maneras, similares a otros objetos en JavaScript.
## Capacidades de las Funciones en JavaScript
* **Pasar funciones como argumentos**:
* Una función puede ser pasada como argumento a otra función, conocido como callback.
* Ejemplo:function A() {
// Código de la función A
}
function B(callback) {
callback();
}
B(A); // Pasar la función A como argumento a la función B
* **Retornar funciones**:
* Una función puede retornar otra función.
* Ejemplo:function A() {
return function B() {
// Código de la función B
};
}
const result = A(); // result ahora es la función B
* **Asignar funciones a variables**:
* Las funciones pueden ser asignadas a variables.
* Ejemplo:const A = function() {
// Código de la función
};
## Propiedades y Métodos de Funciones
* **Tener propiedades y métodos**:
* Las funciones pueden tener propiedades y métodos propios.
* Ejemplo:function A() {}
A.propiedad = "Valor de la propiedad";
A.metodo = function() {
console.log("Método de la función A");
};
A.metodo(); // Llamar al método de la función A
## Anidar Funciones
* **Nested functions**:
* Las funciones pueden contener otras funciones dentro de ellas.
* Ejemplo:function A() {
function B() {
function C() {
// Código de la función C
}
C();
}
B();
}
A();
## Almacenar Funciones en Objetos
* **Funciones como métodos de objetos**:
* Las funciones pueden ser almacenadas dentro de objetos y se les conoce como métodos.
* Ejemplo:const rocket = {
name: "Falcon 9",
launchMessage: function() {
console.log("🚀 Launching!");
}
};
rocket.launchMessage(); // Ejecutar el método launchMessage del objeto rocket
## Próximos Pasos
* Practicar la creación y manipulación de funciones en JavaScript.
* Explorar más sobre los callbacks y su uso en programación asíncrona.
* Profundizar en el estudio de las diferencias entre declaraciones de funciones y expresiones de funciones.
Una **función** es como una receta que le dices a la computadora para que haga algo específico. Por ejemplo, si tienes una función llamada "sumar", le puedes pedir que sume dos números, como 3 y 5, y la función te dará la respuesta: 8. Las funciones están ahí para hacer algo sin que tengan que estar dentro de otra cosa.
Un **método** es como una función especial que está dentro de un objeto, que puede ser como un juguete o herramienta en la computadora. Imagina que tienes un coche de juguete, y el coche tiene una función llamada "arrancar". Esa función sería un **método** porque solo funciona si es dentro de ese coche de juguete. No puedes arrancar algo que no sea el coche.
Resumiendo:
* **Función**: Hace cosas por sí sola, como sumar.
* **Método**: Hace cosas pero necesita estar dentro de algo, como un coche arrancando.
Yo creo que si es posible almacenar funciones en objetos ya que los objetos almacenan datos, y creo que se podría también si viene de una "function" y no de una variable.
Ejercicio empleando condicional cuando hay 8+ artículos en el carrito:
```js
function discountWhenOver10 (items, discount) {
let accum = 0
let i = 0
while (i < items.length){
accum = accum + items[i].price
i++
}
let disc = 0
if (items.length >= 7 ) {
disc = (accum * discount) / 100
}
const final_price = accum - disc
return final_price
}
// if there're 8+ articles, the discount is applied
const elements = [
{ name: "Product 1", price: 29.99 },
{ name: "Item 2", price: 15.75 },
{ name: "Thing 3", price: 49.95 },
{ name: "Object 4", price: 12.30 },
{ name: "Stuff 5", price: 8.99 },
{ name: "Item 6", price: 34.50 },
// { name: "Thing 7", price: 22.10 },
// { name: "Object 8", price: 5.25 }
]
const discount = 25
console.log("Articles in your shopping cart: " + elements.length)
console.log("applied discount when 8+ articles: " + discount + '%')
console.log("The final price is: " + discountWhenOver10(elements, discount).toFixed(2) + "$")
```
Un pequeño resumen de los tipos de funciones que tenemos en JS
En JavaScript, los tipos de funciones pueden clasificarse de varias maneras según su comportamiento y uso.
## [Funcion Declarativa](https://www.notion.so/Funcion-Declarativa-72ffdd92dd9e41f1a5acf65b5b00500f?pvs=21) (o con nombre):
* Se definen con la palabra clave **function**
* Pueden ser referenciadas antes de su declaración.
function suma(a, b) { return a + b; }
## [Función Expresiva](https://www.notion.so/Funci-n-Expresiva-a4d16865cda14f0bad1cae297c00d09a?pvs=21) (o anónimas):
* Se asignan a variables.
* A menudo se utilizan para asignar funciones como valores a variables.
const suma = function(a, b) { return a + b; };
## [Funciones Flecha (Arrow Function)](https://www.notion.so/Funciones-Flecha-Arrow-Function-ee039e5596314d5c9fa3239c20c0cd75?pvs=21) :
* Introducidas en ES6, proporcionan una sintaxis más concisa.
* Tienen un comportamiento ligeramente diferente con respecto al valor de **this**.
const suma = (a, b) => a + b;
## Función constructora:
* Utilizadas para crear objetos con **new**.
* Utilizan **this** para asignar propiedades al nuevo objeto.
function Persona(nombre, edad) { this.nombre = nombre; this.edad = edad; } const persona1 = new Persona('Juan', 25);
## Funciones de Orden Superior (Higher-Order Functions):
* Aceptan funciones como argumentos o devuelven funciones.
* Ejemplos incluyen **map**, **filter**, **reduce**.
## Funciones Recursivas:
* Llamadas a sí mismas durante la ejecución.
* Útiles para problemas que se pueden dividir en subproblemas más pequeños.
function factorial(n) { if (n === 0 || n === 1)
{ return 1; }
else
{ return n \* factorial(n - 1); } }
## Funciones Anidadas (Nested Functions):
* Definidas dentro de otra función.
* Pueden acceder a las variables de la función contenedora (closure).
function exterior() {
let variableExterior = 'Exterior';
function interior() {
console.log(variableExterior);
} interior();
} exterior();
## Métodos de Objeto:
* Funciones que son propiedades de objetos y se llaman métodos cuando se invocan en el contexto de ese objeto.
const objeto = { metodo: function() { console.log('Hola desde el método'); } }; objeto.metodo();
## Funciones Asincrónicas:
* Utilizadas para manejar operaciones asíncronas con \[\[Callbacks]], Promesas o Async/Await.
async function fetchData() {
const response = await fetch('\<https://api.example.com/data>');
const data = await response.json();
console.log(data); }
## Funciones Puras:
* Dado el mismo conjunto de entradas, siempre producirán el mismo resultado sin causar efectos secundarios observables.
* No dependen de ni modifican estados externos.
function suma(a, b) { return a + b; }
## Funciones Impuras
Las funciones impuras a menudo dependen de variables externas, realizan operaciones de entrada/salida, mutan datos o tienen otros efectos secundarios que pueden afectar el estado global del programa. Aquí hay un ejemplo sencillo de una función impura:
let resultado = 0;
function sumarConEfectoSecundario(a, b) {
resultado = a + b;
console.log(`Resultado parcial: ${resultado}`);
return resultado;
}
// Llamadas a la función
sumarConEfectoSecundario(2, 3); // Imprime "Resultado parcial: 5"
sumarConEfectoSecundario(4, 7); // Imprime "Resultado parcial: 11"
Estas son algunas de las categorías comunes de funciones en JavaScript. Es importante comprender estas diferentes formas de definir y utilizar funciones para escribir código más claro y eficiente.
Si quedaron con dudas respecto a las Nested functions, les dejo el siguiente recurso:
<https://www.youtube.com/watch?v=jXugs4B3lwU&pp=ygURbmVzdGVkIGZ1bmN0aW9ucyA%3D>
En JavaScript, una **función** es un bloque de código independiente que se puede ejecutar por sí sola para realizar una tarea específica, mientras que un **método** es una función que está asociada a un objeto. Las funciones se llaman directamente por su nombre, mientras que los métodos se invocan a través de su objeto, usando la sintaxis `objeto.metodo()`. En resumen, todos los métodos son funciones, pero no todas las funciones son métodos, ya que los métodos siempre pertenecen a un objeto o clase.
Want to see more contributions, questions and answers from the community?