Introducción a JavaScript

1

Fundamentos de JavaScript para Principiantes

2

Instalación y Configuración de JavaScript en Visual Studio Code

3

Instalación y configuración de Visual Studio Code y Node.js en Windows

4

Variables y Buenas Prácticas en JavaScript

5

Tipos de Datos en JavaScript: Primitivos y Complejos

6

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

7

Números y Operaciones Matemáticas en JavaScript

8

Conversión de Tipos en JavaScript: Implícita y Explícita

9

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

10

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

11

Operadores Lógicos en Programación: AND, OR y NOT

12

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

13

Juego de Adivinanza: Programación con Estructuras Condicionales

14

Estructura y uso del condicional Switch en programación

15

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

16

Iteración con for-of en JavaScript para arrays y strings

17

Iteración sobre Objetos con forIn en JavaScript

18

Uso del ciclo while para iteración en programación

19

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

20

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

21

Diferencias entre Funciones y Métodos en JavaScript

22

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

23

Arrow Functions y Enlace Léxico en JavaScript

24

Scope y Contextos de Ejecución en JavaScript

25

Closures y Ámbito Léxico en JavaScript

26

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

27

Arrays: Propiedades, Acceso y Creación en Programación

28

Mutabilidad e inmutabilidad en arrays: conceptos y ejemplos prácticos

29

Métodos push y pop para modificar arrays en JavaScript

30

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

31

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

32

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

33

Uso del método slice para extraer porciones de un array en JavaScript

34

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

35

Programación Orientada a Objetos en JavaScript: Conceptos y Práctica

36

Creación y Manipulación de Objetos en JavaScript

37

Función constructora y gestión de instancias en JavaScript

38

Clases en JavaScript: Creación y Uso de Objetos con Sintaxis Moderna

39

Programación Orientada a Objetos en JavaScript: Clases y Prototipos

40

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

41

Métodos y herencia prototípica en JavaScript

42

Uso de "this" en Clases y Funciones Constructoras

43

Validación de Usuarios en una Red Social: Algoritmo Básico

44

Implementación de la Función Sign-In y Validación de Usuario

Asincronía en JavaScript

45

Programación Síncrona y Asíncrona en JavaScript

46

Promesas en JavaScript: Asincronía y Manejo de Estados

47

Uso de Async/Await para Promesas Asíncronas en JavaScript

48

Peticiones asíncronas con for await en JavaScript

49

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

50

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

51

Peticiones HTTP en JavaScript: Fetch, GET, POST y DELETE

52

Envío de Datos al Servidor con JavaScript y Fetch API

53

Eliminar Posts con JavaScript y Delegación de Eventos

54

Manejo de IDs en JavaScript para eliminar artículos del DOM

55

Actualizaciones y Nuevas Funciones en JavaScript

No tienes acceso a esta clase

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

Mutabilidad e inmutabilidad en arrays: conceptos y ejemplos prácticos

28/55
Recursos

¿Qué son los conceptos de mutabilidad e inmutabilidad en arrays?

A medida que nos adentramos en el fascinante universo de la programación, los conceptos de mutabilidad e inmutabilidad juegan un papel clave, especialmente al manipular arrays. En su esencia, mutabilidad se refiere a la capacidad de un array para cambiar su estado o contenido después de haber sido creado. Esto puede ser muy conveniente en ciertas situaciones, pero también puede introducir complejidad. Por otro lado, la inmutabilidad asegura que una vez creado, el array no sea alterado, lo cual puede ser útil para asegurar la consistencia de los datos a lo largo del tiempo.

¿Cómo agregar un elemento a un array?

Añadir un elemento a un array es una tarea simple pero poderosa que puede realizarse de diferentes maneras. Uno de los métodos más comunes es utilizar Array.push(), que es un método mutable. Para ilustrarlo, veamos un ejemplo utilizando un array de frutas:

let frutas = ['apple', 'banana', 'orange'];
frutas.push('watermelon');
console.log(frutas);

Al ejecutar el código, notarás que el array frutas ahora incluye watermelon. Este método ha modificado directamente el array original.

¿Qué es la inmutabilidad y cómo se aplica con arrays?

La inmutabilidad se logra creando un nuevo array en lugar de modificar el existente. Un gran ejemplo de inmutabilidad es el uso del método Array.concat(), que permite combinar arrays sin alterar el array original:

const frutas = ['apple', 'banana', 'orange'];
const nuevasFrutas = frutas.concat(['grape', 'kiwi']);
console.log(frutas);
console.log(nuevasFrutas);

Observamos aquí que frutas permanece inalterado, mientras que nuevasFrutas es un nuevo array que incluye todos los elementos combinados. Esta técnica es invaluable para prevenir efectos secundarios no intencionados en nuestros programas.

¿Cómo comprobar si una variable es un array?

Verificar si una variable es un array es esencial para prevenir errores en tiempo de ejecución. JavaScript ofrece el método Array.isArray(), que nos devuelve un booleano indicando si el objeto es un array:

const frutas = ['apple', 'banana', 'orange'];
const isArray = Array.isArray(frutas);
console.log(isArray); // true

El resultado es true, lo que confirma que frutas es efectivamente un array.

¿Cómo sumar todos los elementos de un array?

Sumar elementos en un array es una operación común que puede realizarse de manera eficiente utilizando un ciclo for. Esta técnica no solo itera sobre cada elemento del array, sino que también acumula el total de los números, lo que puede ser un recurso poderoso en la manipulación de datos numéricos.

Ejemplo de ejercicio práctico

Vamos a realizar una práctica para sumar todos los elementos de un array:

const numbersArray = [1, 2, 3, 4, 5];
let suma = 0;

for (let i = 0; i < numbersArray.length; i++) {
    suma += numbersArray[i];
}

console.log(`La suma de todos los elementos del array es: ${suma}`); // La suma es 15

Este script suma todos los números en numbersArray, mostrando un resultado de 15. Utilizamos la propiedad .length para asegurar que el ciclo recorra todos los elementos del array, y i++ para avanzar cada vez un índice. Esta estructura es fundamental para operaciones aritméticas dentro de arrays.

Estos ejemplos básicos pero efectivos ilustran el uso de arrays y cómo manipularlos. La comprensión de estos conceptos te permitirá abordar problemas más complejos en el futuro. ¡Sigue practicando y explorando!

Aportes 22

Preguntas 1

Ordenar por:

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

Métodos mutables: copyWithin, fill, pop, push, reverse, shift, sort, splice, unshift. Métodos no mutables: slice, concat, toReversed, slice, toSorted, toSoliced.
Le entrego una leve modificación del ejercicio práctico entregado por la profesora, en donde utilizo un for of para simplificar las líneas del código y sobretodo la lectura del loop: ```js const numbersArray = Array(1, 2, 3, 4, 5); let sumElement = 0; for (element of numbersArray) { sumElement += element; } console.log(`La suma total de los números almacenados en el Array son:\n${sumElement}`); ```
Para los que están tomando este curso les sugiero algo, pidan a su IA de preferencia que les de una breve explicación del tema de cada clase con ejemplos y luego si vean el video, en mi caso ayudó bastante a comprender más rápido todo. Exitos!
Les comparto mis apuntes de esta clase ![]()![](https://static.platzi.com/media/user_upload/image-5f3c86de-f515-4726-913c-e45cd70f032c.jpg)
No pude eliminar mi comentario anterior lol, pero la respuesta al ejercicio tambien podria ser: `// Practica: Sumar todos los elementos que tiene un arrayconst numbersArray = [1,2,3,4,5]let sum = 0` `for(number of numbersArray){    sum += number}` `console.log(sum)`
hola! me agtadaria que en todos los cursos se tengan en cuenta conceptos basicos cono piede ser la complejidad O de una bloque de codigo.
## Mutabilidad e Inmutabilidad en Arrays * La mutabilidad se refiere a la capacidad de un array de cambiar su contenido sin crear un nuevo array. * La inmutabilidad implica que, al modificar un array, se crea un nuevo array en lugar de cambiar el original. * Los métodos de los arrays pueden ser mutables o inmutables dependiendo de su comportamiento. ## Ejemplo de Mutabilidad * Agregar un elemento a un array existente (mutación del array original).let fruits = \['apple', 'banana', 'orange']; fruits.push('watermelon'); console.log(fruits); // \['apple', 'banana', 'orange', 'watermelon'] ## Ejemplo de Inmutabilidad * Crear un nuevo array concatenando dos arrays (sin modificar el array original).const fruits = \['apple', 'banana', 'orange']; const newFruits = fruits.concat(\['grape', 'kiwi']); console.log(fruits); // \['apple', 'banana', 'orange'] console.log(newFruits); // \['apple', 'banana', 'orange', 'grape', 'kiwi'] ## Comprobación de Arrays * Verificar si una variable es un array utilizando `Array.isArray`.const fruits = \['apple', 'banana', 'orange']; const isArray = Array.isArray(fruits); console.log(isArray); // true ## Ejercicio Práctico: Sumar Elementos de un Array * Sumamos todos los elementos de un array utilizando un bucle `for`.const numbersArray = \[1, 2, 3, 4, 5]; let sum = 0; for (let i = 0; i < numbersArray.length; i++) { sum += numbersArray\[i]; } console.log(sum); // 15 * Explicación del ejercicio: * Se crea un array de números `numbersArray` con los valores `[1, 2, 3, 4, 5]`. * Se inicializa una variable `sum` en `0`. * Se utiliza un bucle `for` para iterar a través de los elementos del array, sumando cada elemento a la variable `sum`. * Se imprime el resultado final que es la suma de todos los elementos del array (`15`).
Mi respuesta al ejercicio: *let ArrayBase* = \[15, 20, 30, 45, 105]; *let* SumArrayValues = () => *ArrayBase*.reduce((Sum, nowValue) => Sum + nowValue, 0); *console*.log(SumArrayValues());
```js Otra opción para el push es el siguiente const seguros=["Vida","Vehicula","SOAT"] seguros[seguros.length]="Rentas" // forma 1 console.log(seguros) El print saldrá ["Vida","Vehicula","SOAT","Rentas"] ```//agregar const seguros=\["Vida","Vehicula","SOAT"]seguros\[seguros.length]="Rentas" // forma 1seguros.push("VDP+") // forma 2console.log(seguros)
// inmutability with spread operator const newFruits = \[...fruits, "grape", "kiwi"];
let frutas = \["manzana", "banana", "naranja"]; frutas\[1] = "kiwi"; // Cambiamos "banana" por "kiwi" ✅ console.log(frutas); // \["manzana", "kiwi", "naranja"] (el array original fue modificado) \------------------------------------------------------------ let frutasOriginal = \["manzana", "banana", "naranja"]; let frutasNuevo = frutasOriginal.map(fruta => (fruta === "banana" ? "kiwi" : fruta)); // Crea un nuevo array console.log(frutasOriginal); // \["manzana", "banana", "naranja"] (no cambió) console.log(frutasNuevo); // \["manzana", "kiwi", "naranja"] (nuevo array)
### Mutabilidad * **Definición**: Un objeto mutable es aquel que puede ser modificado después de su creación. Esto significa que se pueden alterar sus elementos, agregar nuevos elementos o eliminar elementos existentes sin tener que crear un nuevo objeto. nmutabilidad * **Definición**: Un objeto inmutable es aquel que no se puede modificar después de haber sido creado. Cuando deseas cambiar el contenido, debes crear un nuevo objeto con las modificaciones deseadas.
Buenas tardes, todo muy claro. Sin embargo me surgio una duda. Tenia entendido que una variable de tipo const es que no cambia. Por que el array siendo de tipo const, permite utilizar el método push?, no lo estaría modificando?, por lo menos en estructura, pues esta agregando un dato mas?... muchas gracias.
const sumaNumeros = \[10, 20, 7, 3]; let sum = 0; for (let i = 0; i < sumaNumeros.length; i++) {  sum += sumaNumeros\[i];} console.log(sum);
![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202025-01-25%20182926-0d844c09-77a4-4487-a6a1-90084575cac2.jpg)
```js const list = ['camioneta', 'auto', 'moto'] let message = '' for (let i = 0; i < list.length; i++) { message += 'mi vehiculo es: ' + list[i] + '\n' } console.log(message) //mi vehiculo es: camioneta //mi vehiculo es: auto //mi vehiculo es: moto ```const list = \['camioneta', 'auto', 'moto']let message = '' for (let i = 0; i < list.length; i++) {  message += 'mi vehiculo es: ' + list\[i] + '\n' } console.log(message) //mi vehiculo es: camioneta//mi vehiculo es: auto     //mi vehiculo es: moto
compañeros nuestra variable la creamos con const pero ojo ya la segunda variable se crea con let para poder transformar su valor const numbersArray let suma = 0 ;
const frutas = \["manzana", "mango", "pera"]console.log(frutas)// vemos toda nustro arreglo const verFrutas = frutas\[0]// vemos por indice console.log(verFrutas); const verLgitu = frutas.length;console.log(verLgitu)// vemos la cantidad de caracteres que tenemos
**Mutabilidad**: Puedes modificar directamente un array existente, agregando, eliminando o cambiando elementos. **Métodos mutables**: copyWithin, fill, pop, push, reverse, shift, sort, splice, unshift. **Inmutabilidad:** Cuando realizas una operación sobre un array, se crea un nuevo array con los cambios, dejando el original intacto. **Métodos no mutables**: slice, concat, toReversed, slice, toSorted, toSoliced.
```js // Using array methods reduce() const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(total); ```*// Using array methods reduce()* const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);console.log(total);
```js const numbers = [1,2,3,4,5] let currentValue = 0; for (let i = 0; i < numbers.length; i++){ currentValue += numbers[i] } console.log (currentValue) let suma = numbers.reduce((acomulador, valorActual)=>acomulador + valorActual, 0 ) console.log (suma) ```lo hice de 2 formas
Otra forma tambien seria: // Practica: Sumar todos los elementos que tiene un arrayconst numbersArray = \[1,2,3,4,5]let sum = 0for(number of numbersArray){    sum += number} console.log(sum)