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

You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
10 Hrs
39 Min
20 Seg

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

29/55
Resources

What are push and pop methods in JavaScript?

In the fascinating world of programming, it is crucial to master how to manipulate arrays effectively. Push and pop methods in JavaScript are essential tools for any developer when working with arrays. Through this content, we will delve into these mutable methods, which have the ability to alter the original array and return important information.

How does the push method work?

The push method is a powerful JavaScript function that allows you to add one or more elements to the end of an array. Doing this not only modifies the original array, but also returns the new length of the array. This is possible due to the mutability capabilities that JavaScript provides.

Let's see an example in code:

let countries = ['USA', 'Canada', 'UK'];const newCountries = countries.push('Germany', 'Australia');
console.log(countries); // ['USA', 'Canada', 'UK', 'Germany', 'Australia']console.log(newCountries); // 5.

In this code snippet, we start with an array called countries containing three countries. Using push, we have added Germany and Australia to the end of the array. As a result, countries now includes these two new elements and newCountries stores the value of the new array length: 5.

What does the pop method do?

Contrary to the push method, pop removes the last element of an array, returning that element and modifying the original array in the process. This makes pop ideal for situations where we need to simplify the array or verify the last element added.

Let's look at the following code example:

let countries = ['USA', 'Canada', 'UK', 'Germany', 'Australia'];const removedCountry = countries.pop();
console.log(removedCountry); // 'Australia'console.log(countries); // ['USA', 'Canada', 'UK', 'Germany'].

Here, the pop method removes 'Australia' from the end of the countries array. Thus, removedCountry stores the value 'Australia', while the array countries is again reduced to four elements.

Practical tips for using push and pop

When using these methods, keep the following tips in mind:

  • Push:

    • Useful for adding consecutive elements to an array.
    • Frequently used in stacks where data is added at the end.
  • Pop:

    • Perfect for removing elements without compromising the initial array structure.
    • Suitable in functions that require the last element of an array, such as last in, first out (LIFO) algorithms.

Conclusion

Both push and pop are vital methods when working on basic array manipulation in JavaScript. Learning to use them effectively will increase both efficiency and understanding of how to manage data dynamically. Continue to explore these functions and remember that constant practice will bring you closer to mastering JavaScript with confidence. Cheer up and happy programming!

Contributions 13

Questions 0

Sort by:

Want to see more contributions, questions and answers from the community?

Agrego existe también para hacer a la inversa. *unshift*() y *shift*(). Es decir: *- unshift*(): Agregan países al inicio del array. \- *shift*(): Eliminan un país al principio del array. Los comportamientos adicionales son iguales a pop() y push(). ![](https://static.platzi.com/media/user_upload/image-64fa51f3-99ff-41c7-ae6d-ceae4e3048fd.jpg)
1. `push()`Añade uno o más elementos al final del array. 2. `pop()` - Elimina y devuelve el último elemento del array. 3. `shift()` - Elimina y devuelve el primer elemento del array. 4. `unshift()` - Añade uno o más elementos al principio del array. 5. `splice()` - Cambia el contenido de un array eliminando o añadiendo elementos. 6. `slice()` - Devuelve una copia de una parte del array. 7. `concat()` - Combina dos o más arrays y devuelve un nuevo array. 8. `indexOf()` - Devuelve el primer índice en el que se encuentra un elemento. 9. `lastIndexOf()`- Devuelve el último índice en el que se encuentra un elemento. 10. `forEach()`Ejecuta una función para cada elemento del array. 11. `map()`- Crea un nuevo array con los resultados de aplicar una función a cada elemento. 12. `filter()`- Crea un nuevo array con todos los elementos que cumplan una condición. 13. `reduce()`- Reduce todos los elementos del array a un solo valor (ej. suma de todos los números). 14. `some()`- Comprueba si al menos un elemento del array cumple con una condición. 15. `every()`—Comprueba si todos los elementos del array cumplen con una condición. 16. `find()`—Devuelve el primer elemento que cumple con una condición. 17. `findIndex()`Devuelve el índice del primer elemento que cumple con una condición. 18. `sort()`- Ordena los elementos del array. 19. `reverse()`- Invierte el orden de los elementos del array. 20. `join()`—Une todos los elementos del array en una cadena de texto. 21. `includes()`- Comprueba si un array contiene un elemento determinado. 22. `flat()`- Aplana un array de arrays en un solo array. 23. `flatMap()`- Mapea cada elemento y aplana el resultado en un nuevo array. 24. `fill()`- Llena todos los elementos del array con un valor estático.
**Mutabilidad** ### `push` * **Descripción:** Agrega uno o más elementos al final de un array. * **Mutabilidad:** Modifica el array original. let array = \[1, 2, 3]; array.push(4, 5); // Ahora, array es \[1, 2, 3, 4, 5] ### `pop` * **Descripción:** Elimina el último elemento de un array. * **Mutabilidad:** Modifica el array original. * devuelve el elemento eliminado. let array = \[1, 2, 3]; array.pop(); // Ahora, array es \[1, 2] let frutas = \["manzana", "banana", "cereza"]; // Eliminar el último elemento let ultimaFruta = frutas.pop(); console.log(frutas); // Resultado: \["manzana", "banana"] console.log(ultimaFruta); // Resultado: "cereza" Ambos métodos son útiles para realizar operaciones básicas al final de un array. Es importante tener en cuenta que `push()` y `pop()` afectan directamente al array original y, por lo tanto, son métodos que mutan el array. Si prefieres operar de manera inmutable, puedes utilizar métodos como `concat()` o el operador de propagación (`...`) junto con un nuevo array. `splice` * **Descripción:** Cambia el contenido de un array eliminando o reemplazando elementos existentes y/o agregando nuevos elementos. * **Mutabilidad:** Modifica el array original. let array = \[1, 2, 3, 4, 5]; array.splice(2, 2, 6, 7); // Ahora, array es \[1, 2, 6, 7, 5] `shift` * **Descripción:** Elimina el primer elemento de un array. * **Mutabilidad:** Modifica el array original. * devuelve el elemento eliminado. let array = \[1, 2, 3]; array.shift(); // Ahora, array es \[2, 3] const removeArray = array.shift(); //1 `unshift` * **Descripción:** Agrega uno o más elementos al inicio de un array. * **Mutabilidad:** Modifica el array original. * devuelve el tamaño del array modificado. let array = \[2, 3]; array.unshift(1); // Ahora, array es \[1, 2, 3] const newArray = array.unshift(1); //3
## Resumen de la clase Estos dos métodos modifican los contenidos de nuestro array y resultan muy útiles en la cotidianidad de la manipulación de estos objetos! Aquí te dejo mi resumen al igual que la documentación de ambos métodos para que explores más de ellos! 1. [.push()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) 2. [.pop()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) ![](https://i.imgur.com/wOYP3Di.png)
![](https://static.platzi.com/media/user_upload/image-4f658837-93f7-4b65-b213-2c79814b3eca.jpg)
**APUNTES:** ![](https://static.platzi.com/media/user_upload/image-311dba28-1560-4be6-849e-67e062596af0.jpg)
Ejemplo practico de lo que vemos en la clase, añadiendo dos nuevos metodos ("Unshift" y "Shift") ```js const paises = ['España', 'Perú', 'Indonesia'] console.log(paises) console.log("Agregando Paises => " + paises.push('Japón', 'China', 'Malasia')) console.log(paises) console.log("Quitando Paises => " + paises.pop()) console.log("Quitando Paises => " + paises.pop()) console.log("Quitando Paises => " + paises.pop()) console.log("Array => " + paises) console.log("*********************") console.log(paises) console.log("Agregando Paises => " + paises.unshift('Japón', 'China', 'Malasia')) console.log(paises) console.log("Quitando Paises => " + paises.shift()) console.log("Quitando Paises => " + paises.shift()) console.log("Quitando Paises => " + paises.shift()) console.log("Array => " + paises) ```
¿Cómo podría eliminar un item específico del array? En python por ejemplo, puedes usar el .pop(numero de posición item a eliminar). Ejemplo: countries = \["USA", "Canada", "UK"] removeCountry = countries.pop(0) Resultado: Adiós USA. Esto no funciona en JS y es importante saber cómo hacerle. Agradecería que alguien me explicara.
```js const marca = ['peugeot', 'toyota', 'ford'] let agregar = marca.push('audi', 'renault', 'volkswagen') let eliminar = marca.pop() let add = marca.unshift('suzuki', 'lexus', 'honda') let quitar = marca.shift() console.log(marca) console.log(eliminar) console.log(quitar) /* 'lexus', 'honda', 'peugeot', 'toyota', 'ford', 'audi', 'renault' volkswagen suzuki */ ```const marca = \['peugeot', 'toyota', 'ford']let agregar = marca.push('audi', 'renault', 'volkswagen')let eliminar = marca.pop(marca\[3]) console.log(marca)console.log(eliminar)
Un ejemplo práctico, es crear una lista de tareas en la cual utilizamos las clases push() y la clase find(). La primera inserta la tarea la segunda busca el id de la tarea con la cual podemos cambiar el estado de la misma. ```js let tareas = []; // Agregar una nueva tarea function agregarTarea(tarea) { tareas.push({ id: tareas.length + 1, nombre: tarea, completada: false }); } // Marcar una tarea como completada function completarTarea(id) { const tarea = tareas.find(t => t.id === id); if (tarea) { tarea.completada = true; } } // Ejemplo de uso agregarTarea('Hacer la compra'); agregarTarea('Lavar el coche'); agregarTarea('Cortar el cespéd'); completarTarea(1); console.log(tareas); ```let tareas = \[]; // Agregar una nueva tareafunction agregarTarea(tarea) { tareas.push({ id: tareas.length + 1, nombre: tarea, completada: false });} // Marcar una tarea como completadafunction completarTarea(id) { const tarea = tareas.find(t => t.id === id); if (tarea) { tarea.completada = true; }} // Ejemplo de usoagregarTarea('Hacer la compra');agregarTarea('Lavar el coche');agregarTarea('Cortar el cespéd');completarTarea(1); console.log(tareas);
## Métodos que Modifican el Array Original * En esta clase vamos a hablar de dos métodos que modifican el array original: `push` y `pop`. * Ambos métodos son ejemplos de mutabilidad, ya que cambian el contenido del array sin crear uno nuevo. ## Método `push` * El método `push` añade uno o más elementos al final de un array. * Devuelve la nueva longitud del array. * Ejemplo:let countries = \['USA', 'Canada', 'UK']; const newLength = countries.push('Germany', 'Australia'); console.log(countries); // \['USA', 'Canada', 'UK', 'Germany', 'Australia'] console.log(newLength); // 5 * Este método modifica el array original `countries`, añadiendo los nuevos elementos 'Germany' y 'Australia'. ## Método `pop` * El método `pop` elimina el último elemento de un array. * Devuelve el elemento eliminado. * Ejemplo:let countries = \['USA', 'Canada', 'UK']; const removedCountry = countries.pop(); console.log(countries); // \['USA', 'Canada'] console.log(removedCountry); // 'UK' * Este método modifica el array original `countries`, eliminando el último elemento 'UK'. ## Explicación de los Métodos * **Mutabilidad**: Ambos métodos (`push` y `pop`) modifican el array original en lugar de crear uno nuevo. * **Resultado**: * `push` agrega elementos y devuelve la nueva longitud del array. * `pop` elimina el último elemento y devuelve ese elemento. ## Ejemplo Práctico * Crear un array de países y utilizar `push` y `pop` para modificarlo:let countries = \['USA', 'Canada', 'UK']; // Usar push para agregar países const newLength = countries.push('Germany', 'Australia'); console.log(countries); // \['USA', 'Canada', 'UK', 'Germany', 'Australia'] console.log(newLength); // 5 // Usar pop para eliminar el último país const removedCountry = countries.pop(); console.log(countries); // \['USA', 'Canada', 'UK', 'Germany'] console.log(removedCountry); // 'Australia' * **Conclusión**: Los métodos `push` y `pop` son útiles para modificar arrays de manera directa, añadiendo o eliminando elementos según sea necesario.
![](https://static.platzi.com/media/user_upload/image-91dd5976-a172-45cf-8412-cb8e86915021.jpg) dejo este pequeño aporte en donde no guardo en una variable como lo hace la profe sino lo hago directo nomas el metodo para agregar elementos al array.
Mi ejemplo practico de esta clase ![]()![](https://static.platzi.com/media/user_upload/image-25ca657b-fd30-485f-bc17-d186df8d25d9.jpg)