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 puras e impuras

22/55
Recursos

Aportes 24

Preguntas 0

Ordenar por:

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

las funciones puras son más predecibles y fáciles de depurar ya que no tienen efectos secundarios las funciones impuras pueden ejecutar variables globales pero su predictibilidad es menor las funciones puras son ideales para procesamiento de datos y lógica sin efectos secundarios, mientras que las funciones impuras se utilizan para tareas que requieren interacción con el entorno externo.
En JavaScript (y en programación funcional en general), las funciones se pueden clasificar como **puras** o **impuras** dependiendo de si cumplen con ciertas características. Una **función pura** es una función que: 1. **Siempre produce el mismo resultado** dado el mismo conjunto de argumentos. 2. **No tiene efectos secundarios**, es decir, no modifica ninguna variable externa, ni depende de variables externas que puedan cambiar. **Ejemplo de función pura:** `function suma(a, b`) { ` return` a + b; } En este ejemplo, la función `suma` siempre devuelve el mismo resultado para los mismos valores de `a` y `b`, y no afecta ni depende de ninguna otra variable fuera de su alcance. ### Una **función impura** es una función que: 1. **Puede producir diferentes resultados** aún si se le pasan los mismos argumentos. 2. **Tiene efectos secundarios**, como modificar una variable externa, hacer una llamada a una API, modificar el DOM, etc. **Ejemplo de función impura:** `let contador = 0`; `function incrementarContador(`) { ` contador += 1`; ` return` contador; } En este ejemplo, la función `incrementarContador` es impura porque: * Depende de la variable externa `contador`, y el valor devuelto depende del estado anterior de esta variable. * Modifica la variable externa `contador`, lo que constituye un efecto secundario. ### Resumen * **Función pura**: Predecible y sin efectos secundarios. Ideal para programación funcional. * **Función impura**: Su resultado puede variar y puede modificar el estado externo. Es más común en programación imperativa. Mantener funciones puras es útil para hacer que el código sea más predecible y fácil de probar, mientras que las funciones impuras son necesarias para interactuar con el mundo externo (como modificar el DOM, hacer solicitudes HTTP, etc.).
Con esta clase me surge una pregunta, de que nos sirve saber si una función es pura o impura? 🤔
la combinación de 2 o más *funciones puras* da como resultado una **función re pura!** 🌟🤓🤣
**Algunas observaciones:** * Una función es impura si modifica algo fuera de su scope, no exclusivamente el scope global. Fuente → [🔗](https://javascript.plainenglish.io/javascript-pure-functions-and-side-effects-f0642b70a484) * Las funciones impuras alteran los argumentos. Los parámetros son los datos que acepta la función, definidos en su declaración e.g. `function sum(num1, num2) {…}`. Los argumentos son los valores en sí e.g `sum(23, 31)` Más info → [🔗](https://www.geeksforgeeks.org/difference-between-parameters-and-arguments/) * Obtener la fecha causa un side effect ya que la funcion `Date()` genera un nuevo valor cada vez que se llama, no se puede determinar su salida. Lo mismo aplicaría para el tiempo y funciones como `Math.random()` Fuente → [🔗](https://monsterlessons-academy.com/posts/what-are-side-effects-in-javascript-what-are-pure-functions) * Al imprimir mensajes modificamos el estado de otros objetos como `console` es decir, alteramos scopes externos. Fuente → [🔗](https://codesweetly.com/side-effect/) Las funciones impuras no son algo negativo, son necesarias e inevitables en algunos casos. Lo importante en este punto es: * Identificar cuando causamos efectos secundarios. * Evitarlos cuando no son realmente necesarios en nuestro propósito * Al necesitarlos, conocer y manejar consecuencias como salidas indeterminadas, tiempos de respuesta desconocidos, alteración del DOM, etc. Entender esto nos ayuda a escribir código legible, escalable, depurable, y a crear productos seguros, confiable y de mejor rendimiento.
Pensé que la última era impura, ya que tiene como efecto secundario la impresión en consola
Mis apuntes de la clase: ![]()![](https://static.platzi.com/media/user_upload/image-6580f010-996b-4b65-91a9-e9bf408c3d6a.jpg)
![](https://static.platzi.com/media/user_upload/image-9c62b6e0-b519-435c-b0d4-0c37ecd39cd0.jpg) ![](https://static.platzi.com/media/user_upload/image-b6da3b5e-d4a7-4f93-84a4-1eb8061b30b3.jpg)
Imagina que las funciones son como máquinas expendedoras. Una **función pura** es como una máquina que entrega siempre el mismo tipo de bebida cuando introduces la misma moneda: no importa el día o la hora, la bebida será la misma y no altera nada de la máquina. En cambio, una **función impura** es como una máquina que, si la usas varias veces, puede cambiar su contenido o incluso puede hacer que se agoten las bebidas. Por ejemplo, si añades más monedas y cambias lo que hay dentro, la próxima vez que la uses, el resultado puede ser diferente. Esto ilustra cómo las funciones en programación pueden ser predecibles (puras) o con efectos secundarios (impuras), afectando el comportamiento del programa.
![](https://static.platzi.com/media/user_upload/image-96b37558-a55d-4d19-9de8-976a60455802.jpg) Me costó comprender el concepto de función pura, especificamente la afirmacion: "Una función es pura si, dados los mismos **valores** de entrada, siempre produce la misma salida y no causa efectos secundarios." . Quiero ser más especifico sobre la afirmación anterior y ayudarte a comprender mejor esta. Se refiere a que por más que ejecutes una función pura, siempre dará el mismo resultado, no cambiará. . ¿Recuerdas el código que nos mostraron en el curso sobre como generar un número aleatorio usando Math.random() ? bueno, si creas una función que al ejecutarse genere un número aleatorio entonces la función no es pura, adivinas el por que? . Claro! esto se debe a que la función no será pura por la misma razón por la que el resultado siempre será distinto en cada ejecución, y no cumple con la afirmación de obtener el mismo resultado en cada ejecución en el concepto de una función pura. . En pocas palabras, una funcíon pura siempre deberá devolver el mismo resultado sin importar las veces que se ejecute esta misma. La única manera de obtener un resultado distinto será cuando alimentes la función con valores distintos.
![](https://static.platzi.com/media/user_upload/Funciones%20Puras%20e%20Impuras%20en%20JavaScript-aebd33d2-b1c1-4146-99c7-279353881ac8.jpg)
puras😇 e impuras😈
## Funciones Puras * Las funciones puras tienen dos características fundamentales: * Dada una misma entrada, siempre retornan la misma salida. * No producen efectos secundarios. ## Efectos Secundarios (Side Effects) * Modificar variables globales: * Acceder a variables fuera del ámbito de la función afecta su pureza. * Modificar parámetros de la función: * Cambiar los valores de los parámetros dentro de la función. * Solicitudes HTTP: * Realizar llamados a APIs o solicitudes HTTP. * Imprimir mensajes en pantalla o consola: * Utilizar `console.log` o `alert` para mostrar mensajes. * Manipulación del DOM: * Acceder o modificar elementos del DOM. * Obtener la hora actual: * Utilizar funciones que consultan la hora o fecha actual. ## Ejemplo de Función Pura function sum(a, b) { return a + b; } * Esta función es pura porque siempre produce la misma salida para las mismas entradas y no tiene efectos secundarios. ## Ejemplo de Función Impura let total = 0; function addToTotal(a) { total += a; return total; } * Esta función es impura porque modifica una variable global (`total`). ## Imprimir Mensajes function sum(a, b) { console.log(a); return a + b; } * La función es impura porque imprime un mensaje en la consola, causando un efecto secundario. ## Combinación de Funciones Puras const number = 5; const finalResult = addTen(square(number)); console.log(finalResult); // 35 * La combinación de funciones puras sigue siendo pura. * `square` y `addTen` son funciones puras, por lo que su combinación también lo es. ## Próximos Pasos * Identificar y practicar la creación de funciones puras. * Evitar efectos secundarios en la medida de lo posible. * Comprender y utilizar las funciones puras para mejorar la previsibilidad y testabilidad del código. * Explorar más ejemplos y casos de uso en desarrollo de software. ## Preguntas para Reflexionar * ¿Es esta función pura?function square(x) { return x \* x; } * Respuesta: Sí, es una función pura. * ¿Qué pasa si agregamos `console.log` dentro de la función? * Respuesta: Se convierte en una función impura debido al efecto secundario de imprimir en consola. * ¿Las combinaciones de funciones puras siguen siendo puras? * Respuesta: Sí, la combinación de funciones puras mantiene la pureza de la función resultante.
**Mucho Ojo cuate** 😉, sobre el side effect número 2 sobre <u>modificar parámetros</u> te lo quiero explicar: . Este side effect es similar al número 1 de la clase sobre modificar variables globales, la diferencia radica en que <u>modificas un array o un objeto que se encuentra en el scoope global</u>. El scope global se refiere a que declaras un array o un objeto en el código fuera de cualquier función. . De todos modos me parece que en unas clases más adelante se abordará el tema de scopes por si tienes alguna duda.
Los callbacks son funciones pasadas como argumentos a otras funciones, permitiendo personalizar comportamientos. Se utilizan en varias situaciones: 1. **Asincronía:** Para manejar operaciones que tardan, como solicitudes a APIs o temporizadores. Por ejemplo, al hacer fetch de datos, puedes usar un callback para procesar la respuesta una vez que llegue. 2. **Eventos:** En programación de interfaces, se usan para reaccionar a eventos del usuario, como clicks o desplazamientos. 3. **Funciones de orden superior:** Al pasar una función como argumento a otra para aplicar lógica personalizada. Por ejemplo, en métodos como `map`, `filter` o `reduce` de arrays. Recuerda que aunque los callbacks son útiles, pueden generar "callback hell" si se usan excesivamente. Para eso, promesas y `async/await` son alternativas que facilitan la lectura y gestión del código asíncrono.
**Funciones Puras** * Una función es pura si, dada la misma entrada, siempre produce la misma salida y no causa efectos secundarios. **Características:** * **Salida predecible:** Con los mismos parámetros de entrada, siempre obtenemos la misma salida. * **Sin efectos secundarios:** No afectan ni dependen del estado externo. * **Ejemplos de efectos secundarios (SIDE EFFECTS):** * Modificar variables globales. * Modificar parámetros de entrada. * Realizar solicitudes HTTP. * Imprimir mensajes en consola o en pantalla. * Manipular el DOM. * Obtener la hora actual. **\* \*\*Nota:** Los efectos secundarios no son intrínsecamente malos, algunos son necesarios para que los programas interactúen con el mundo exterior. **Ejemplos:** *function sum(a, b) {* *return a + b;* *}* Es pura porque siempre devuelve la suma de a y b sin alterar ningún estado *function square(x) {* *return x \* x;* *}* *function square(x) {* *return x \* x;* *}* *function addTen(y) {* *return y + 10;* *}* **Combinando funciones puras:** ```js const number = 5; const finalResult = addTen(square(number)); // Devuelve siempre el mismo resultado. console.log(finalResult); // Resultado: 35 ``` **Funciones Impuras** * Una función es impura si su salida puede variar con la misma entrada o si provoca efectos secundarios. **Características:** * Salida impredecible: La salida puede cambiar incluso si los parámetros de entrada son los mismos. * Efectos secundarios: Pueden modificar el estado externo o depender de él. **Ejemplos:** *function sum(a, b) {* *console.log("a: ", a); // Imprimir en consola es un efecto secundario.* *return a + b;* *}* **Modificación de variables globales:** let total = 0; function sumWithSideEffect(a) { total += a; // Modifica el valor de la variable global `total`. return total; } En este caso, la función sumWithSideEffect es impura porque afecta a la variable global total, por lo que su resultado no depende únicamente de los parámetros de entrada.
**Resumen:** **Funciones vs Métodos:** * **Funciones:** Independientes, no necesitan pertenecer a un objeto. * **Métodos:** Funciones dentro de un objeto, usan this para acceder a las propiedades del objeto. **Ejemplo:** ```js const persona = { nombre: 'Ana', saludar: function() { return 'Hola, soy ' + this.nombre; } }; console.log(persona.saludar()); // "Hola, soy Ana" ``` **Pasar Funciones como Argumentos (Callbacks):** * **Callback:** Función que se pasa a otra función y se ejecuta después de completar una tarea. **Ejemplo:** ```js function procesarOperacion(a, b, callback) { const resultado = a + b; callback(resultado); } function mostrarResultado(resultado) { console.log('El resultado es: ' + resultado); } procesarOperacion(5, 3, mostrarResultado); // "El resultado es: 8" ``` **Retornar Funciones:** * Puedes devolver funciones para crear comportamientos reutilizables y personalizados. **Ejemplo:** ```js function crearSaludo(nombre) { return function() { console.log('Hola, ' + nombre); }; } const saludoJuan = crearSaludo('Juan'); saludoJuan(); // "Hola, Juan" ``` **Asignar Funciones a Variables:** * Las funciones pueden asignarse a variables y ser invocadas a través de ellas. **Ejemplo:** ```js const saludar = function() { console.log('Hola'); }; saludar(); // "Hola" ``` **Funciones con Propiedades y Métodos:** * Las funciones pueden tener propiedades y métodos, porque son objetos. **Ejemplo:** ```js function saludar() { console.log('Hola'); } saludar.mensaje = 'Saludos a todos'; // Propiedad console.log(saludar.mensaje); // "Saludos a todos" ``` **Anidar Funciones (Nested Functions):** * Puedes definir una función dentro de otra, permitiendo acceso a las variables externas. **Ejemplo:** ```js function exterior() { const mensaje = 'Hola'; function interior() { console.log(mensaje); } interior(); } exterior(); // "Hola" ```
la funcion impura es aquella que cambia el valor original de alguna variable, lo cual no siempre es lo deseado, sobre todo en arrays u objetos, para ello se pueden aplicar ciertos comandos como el spread o el structuredClone para no afectar al objeto u array original.
Ejemplo de función pura: `function suma (a, b) {` `return a + b` `}` Ejemplo de función impura: `function suma (a, b) {` `console.log('A: ', a)` `return a + b` `}`
![](https://static.platzi.com/media/user_upload/image-6074e13f-390d-4169-b568-6b32a2f505a4.jpg)sigue siendo una funcion pura
Tengo una duda: Según los apuntes de la clase, una función es impura si tiene algún side effects entre los que está el de: Modificar parámetros. Pero en el min 8:40, Estefany comenta que la siguiente función es pura: ![](https://static.platzi.com/media/user_upload/image-29ea5673-bc81-4532-b6eb-c44067bbda1b.jpg) ¿No debería ser impura? Se modifican sus parámetros. Si me podéis ayudar os lo agradecería chicos!
![](https://static.platzi.com/media/user_upload/image-6c3725ba-85fe-4eab-aaa9-051c42b82c18.jpg)
**NOTAS:** ![](https://static.platzi.com/media/user_upload/image-f315770c-f563-416f-99bc-f05aee5a97ca.jpg)
## Resumen de la clase ![](https://i.imgur.com/L87vA1S.png)