Introducción a JavaScript

1

¿Por qué aprender JavaScript?

2

¡Hola Mundo! en Mac

3

¡Hola Mundo! en Windows

4

Anatomía de una variable

5

Tipos de datos en JavaScript

6

Creación de strings

7

Operadores aritméticos

8

Conversión de tipos: Type Casting y Coerción

9

Conversión de tipos explícita e implícita

Estructuras de Control y Lógica

10

Operadores de comparación

11

Operadores lógicos

12

Ejecución condicional: if

13

Ejercicio: Adivina el número

14

Ejecución condicional: switch

15

Loop: for

16

Loop: for of

17

Loop: for in

18

Loop: while

19

Loop: do while

Funciones y This

20

Anatomía de una función

21

Funciones vs Métodos

22

Funciones puras e impuras

23

Arrow function y enlace léxico

24

Contextos de ejecución y scope chain

25

¿Qué es Closure?

26

Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?

Manipulación de Arrays

27

Introducción a Arrays

28

Mutabilidad e inmutabilidad de Arrays

29

Modificación básica del final con push( ), pop( )

30

Iteración con map( ) y forEach( )

31

Filtrado y reducción con filter( ) y reduce( )

32

Búsqueda de elementos con find( ) y findIndex( )

33

Crear copias con slice( )

34

Spread operator: casos de uso

Programación Orientada a Objetos

35

Anatomía de un Objeto

36

Trabajando con objetos en JavaScript

37

Función constructora

38

¿Qué es una clase?

39

Prototipos y herencias

40

Herencia en la práctica

41

Prototipos en la práctica

42

this en JavaScript

43

Proyecto: Crea una red social

44

Proyecto: Crea una red social parte 2

Asincronía en JavaScript

45

¿Cómo funciona el JavaScript Engine?

46

Promesas en JavaScript

47

Usando Async y await en JavaScript

48

For await of

49

¿Cómo funciona la web?

50

¿Cómo funciona HTTP?

51

Método GET en JavaScript

52

Método POST en JavaScript

53

Método DELETE en JavaScript

54

Importancia del id en el método DELETE

55

ECMAScript 6 y tus siguientes pasos

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Funciones vs Métodos

21/55
Recursos

Aportes 20

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.
![](https://static.platzi.com/media/user_upload/image-b178549b-b442-48f3-b20d-12f2f62305d8.jpg) ![](https://static.platzi.com/media/user_upload/image-b6af851d-d80d-4d08-b077-e4fe1598ebaf.jpg)
Ejemplo de pasar funciones como argumentos. ![](https://static.platzi.com/media/user_upload/Screenshot%20from%202024-07-26%2001-08-26-578b1d94-9fb8-4f56-9cc6-947e65706bea.jpg)
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
**APUNTES:** ![](https://static.platzi.com/media/user_upload/image-df0ee2a8-2051-4d10-a960-f563406f80fb.jpg) ![](https://static.platzi.com/media/user_upload/image-99afa24f-ee5c-4c1b-8cde-a2d0f70dde1b.jpg)
* 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.
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.
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.
si
## 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.
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); ```
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() ```
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.
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*
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) + "$") ```
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
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>