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

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

27/55
Recursos

¿Qué es un array en programación?

Los arrays son fundamentales en la programación, permitiendo a los desarrolladores almacenar múltiples valores dentro de una sola variable. A menudo, las variables adquieren un único valor, pero los arrays ofrecen la capacidad de mantener un conjunto de elementos, lo que los hace increíblemente útiles en diversas situaciones. Además, es esencial saber que los arrays son objetos en JavaScript.

¿Cómo se crea un array?

Existen varias formas de crear un array en JavaScript. Vamos a explorar dos métodos populares:

  1. Usando new Array(): Este enfoque requiere el uso de la palabra clave new seguida de Array(). Aunque es menos común, verás este método en proyectos más antiguos.

    const fruits = new Array('apple', 'banana', 'orange');
    console.log(fruits);
    
  2. Sintaxis literal del array: Este es el método más utilizado. Consiste en usar corchetes [] para definir los elementos del array.

    const fruits = ['apple', 'banana', 'orange'];
    console.log(fruits);
    

¿Cómo se manejan arrays con diferentes tipos de datos?

Una de las características sobresalientes de los arrays es su capacidad para almacenar diversos tipos de datos. Puedes combinarlos para tener strings, números, booleanos, e incluso otros objetos dentro del mismo array.

const mixedArray = ['text', true, 42, { ingredient: 'sugar', quantity: 'one cup' }, false];
console.log(mixedArray);

¿Cómo acceder a los elementos de un array?

Acceder a los elementos de un array se realiza mediante sus índices, comenzando desde cero. Por ejemplo, en el array fruits, fruits[0] devolvería 'apple'.

const firstFruit = fruits[0];
console.log(firstFruit);  // Output: apple

¿Cómo se analiza el tamaño de un array?

Para conocer cuántos elementos contiene un array, se utiliza la propiedad .length. Esta devuelve un número representando la cantidad total de elementos.

const numberOfFruits = fruits.length;
console.log(numberOfFruits);  // Output: 3

Los arrays son herramientas poderosas en el mundo de la programación, facilitando la organización y manipulación de datos de manera eficiente. Continuar explorando sus capacidades y combinaciones enriquecerá tus habilidades como desarrollador. ¡Sigue practicando y te convertirás en un maestro de los arrays!

Aportes 20

Preguntas 1

Ordenar por:

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

algo que añadiría al curso es que las herramientas de js como los arrays en este caso los iría explicando a medida que surgiera la necesidad de usarlos, así queda claro para qué los usaría.
Un dato que quisiera dar a aquellas personas que se encuentran empezando en programación. Es buena práctica que los arrays que creamos siempre almacenen el mismo tipo de datos. En otros lenguajes que tengan un tipado estricto, no habrá ningún problema. Sin embargo, para JavaScript es fundamental que tengan esto en cuenta, ya que es un lenguaje con un tipado débil. Ejemplo: ```js const nombres = \['Julián', 'Erling', 'Bernardo']; ✅ const variosTiposDeDatos = \['Julián', 23, true]; ❌ ```
Hola, cual sería la diferencia que hay entre las tres formas de crear los arrays? Array() - new Array() - \[ ] ?? Muchas gracias.
Estos fueron mis apuntes.![](https://static.platzi.com/media/user_upload/image-924c25e6-ee22-4d1f-9928-69edaec49c88.jpg) ```js // Como crear un Array? // 1. new Array() or Array() const newArray = new Array('Manzana', 'Banano', 'Naranja', 1, 2, 3); console.log(newArray); // [ 'Manzana', 'Banano', 'Naranja', 1, 2, 3 ] const array = Array('Uva', 'Pera', 'Sandia', 4, 5, 6); console.log(array); // [ 'Uva', 'Pera', 'Sandia', 4, 5, 6 ] const arrayNumber = Array(12); console.log(arrayNumber); // [ <12 empty items> ] Cuidado con esta forma de crear Array's // 2. Syntax's literal de un Array const arrayLiteral = ['Limón', 'Durazno', 'Fresa', 7, 8, 9]; console.log(arrayLiteral); // [ 'Limón', 'Durazno', 'Fresa', 7, 8, 9 ] const newArrayNumber = [12]; console.log(newArrayNumber); // [ 12 ] Aca no genera ningún error const arrayVacio = []; console.log(arrayVacio); // [] // Los Arrays permiten guardar datos mixtos const arrayMixto = [ 'Manzana', 1, true, null, undefined, { nombre: 'Juan', edad: 25 }, [1, 2, 3], { nombre: 'Juan', funcion: function (mensaje) { console.log(`Mi nombre es ${this.nombre}, ${mensaje}`); } //Mi nombre es Juan, Y estoy estudiando para ser un Front-End Developer } ]; const result = arrayMixto[7].funcion('Y estoy estudiando para ser un Front-End Developer'); console.log(arrayMixto); /*[ 'Manzana', 1, true, null, undefined, { nombre: 'Juan', edad: 25 }, [ 1, 2, 3 ], { nombre: 'Juan', funcion: [Function: funcion] } ] */ ```
![](https://static.platzi.com/media/user_upload/image-910bc5dd-3274-4eb1-985a-e8341de3f159.jpg) ![](https://static.platzi.com/media/user_upload/image-446921c7-b554-46b4-ac22-772fb3b1e89a.jpg)
Soy la unica que le entiende mas al chico que a la chica? Creo que por mi forma de aprender, me gusta mas la forma de aprender de el.
Mi ejemplo: ![](https://static.platzi.com/media/user_upload/image-c6ebe3f9-30f8-42e0-9729-3bfceb7e00ce.jpg)
## Arrays en JavaScript * En esta clase se abordan los conceptos fundamentales de los arrays en JavaScript, sus propiedades como `length` y los principios de mutabilidad e inmutabilidad. * También se explica cómo comprobar que lo que tenemos en nuestro código es un array. ## Definición de Array * Un array es una variable que puede almacenar múltiples valores. * Los arrays en JavaScript son objetos. * Permiten guardar diferentes tipos de datos (strings, números, booleanos, objetos, etc.) en una sola variable. ## Creación de Arrays * **Método 1:** Usando la palabra clave `new` seguido de `Array`.let fruits = new Array('apple', 'banana', 'orange'); * **Método 2:** Usando la sintaxis literal de array.let fruits = \['apple', 'banana', 'orange']; ## Ejemplos de Código * Crear un array de frutas:let fruits = new Array('apple', 'banana', 'orange'); console.log(fruits); // \['apple', 'banana', 'orange'] * Crear un array con números:let numbers = \[2, 3, 4, 5]; console.log(numbers); // \[2, 3, 4, 5] * Crear un array con la sintaxis literal:const oneNumber = \[4]; console.log(oneNumber); // \[4] * Crear un array vacío:const emptyArray = \[]; console.log(emptyArray); // \[] * Crear un array de strings:const sports = \['soccer', 'tennis', 'rugby']; console.log(sports); // \['soccer', 'tennis', 'rugby'] * Crear un array mixto:const receiptIngredients = \['egg', true, 3, { ingredient: 'milk', quantity: '1 cup' }]; console.log(receiptIngredients); // \['egg', true, 3, { ingredient: 'milk', quantity: '1 cup' }] ## Acceso a Elementos de un Array * Acceder a un elemento específico usando su índice:let fruits = \['apple', 'banana', 'orange']; let firstFruit = fruits\[0]; console.log(firstFruit); // 'apple' * Los índices de los arrays comienzan en 0. El primer elemento está en la posición 0, el segundo en la posición 1, y así sucesivamente. ## Propiedad `length` * La propiedad `length` se usa para obtener el número de elementos en un array.let numberOfFruits = fruits.length; console.log(numberOfFruits); // 3
En JavaScript, `array()` no es una sintaxis válida para crear arreglos. La forma correcta es usar `[]`, que es la notación de corchetes para definir un array. Además, puedes crear un array usando el constructor `new Array()`, pero es menos común y no se recomienda en la mayoría de los casos. Por ejemplo: ```javascript const fruits = ['apple', 'banana', 'orange']; // Usando [] const numbers = new Array(1, 2, 3); // Usando new Array ``` La forma más simple y recomendada es siempre usar `[]`.
**RESUMEN:** ![](https://static.platzi.com/media/user_upload/image-33dca662-dc4e-48dd-8c26-bd96b732c06d.jpg) ![](https://static.platzi.com/media/user_upload/image-5a7e92a2-9beb-4189-86d3-dfba0bbd14c7.jpg)
```js new Array('react', 'vue', 'angular') Array() ```
Para practicar lo aprendido sobre arrays en JavaScript, aquí tienes algunos ejercicios: 1. **Crear un array**: Crea un array llamado `colors` que contenga al menos cinco colores. Imprime el array en la consola. 2. **Acceder a elementos**: Dado el array `fruits = ['apple', 'banana', 'orange']`, imprime el segundo elemento. 3. **Propiedad length**: Crea un array vacío y luego añade tres elementos. Usa la propiedad `length` para imprimir la cantidad de elementos en el array. 4. **Arrays mixtos**: Crea un array llamado `mixedArray` que contenga un número, un string, y un booleano. Imprime el array. 5. **Modificar un elemento**: Dado el array `numbers = [1, 2, 3]`, cambia el segundo elemento a `10` y luego imprime el array. Estos ejercicios te ayudarán a consolidar tu comprensión sobre la manipulación de arrays en JavaScript.
* Puedes pasar argumentos para definir el tamaño del arreglo o inicializarlo con elementos. Por ejemplo, `new Array(3)` crea un array vacío con una longitud de 3. * Por ejemplo, `Array(3)` crea un array vacío de longitud 3, pero `Array(1, 2, 3)` crearía un array con los elementos 1, 2 y 3.
para quienes se preguntan todavía qué pasó en las líneas 8 y 9 con el código `const justOneNumber = Array(12)` `console.log(justOneNumber)` `//[ <12 empty items> ] ` esto ocurre porque realmente creó un array vacío de tamaño 12 ![](https://static.platzi.com/media/user_upload/image-e7f33a8a-5504-4996-afff-5b7f4852b48a.jpg)
La diferencia entre usar `new Array()` y los corchetes `[]` para crear un array en JavaScript radica principalmente en la sintaxis y la forma en que se manejan ciertos casos. 1. `new Array(3)` crea un array con 3 elementos vacíos, mientras que `[]` crea un array vacío. 2. Al usar `new Array(1, 2, 3)`, obtienes un array con estos tres elementos, pero `[]` permite agregar elementos directamente. Usar `[]` es más común y recomendado por su simplicidad y claridad. En general, se sugiere preferir la notación de corchetes para crear arrays en JavaScript.
En JavaScript, los corchetes `[]` se utilizan para definir arrays, que son colecciones de múltiples elementos. Por ejemplo, `let frutas = ['manzana', 'banana', 'naranja'];` crea un array. Los paréntesis `()` se utilizan para invocar funciones o definir parámetros. Por ejemplo, `console.log(frutas.length);` usa paréntesis para llamar a la función `log`. Esta diferenciación es fundamental para la sintaxis del lenguaje.
```js const list = Array('camioneta', 'auto', 'moto') console.log(list) const list1 = Array(12) console.log(list1) const number = Array(1, 2, 3) console.log(number) const categoria = ['terror', 'suspenso', 'policial'] console.log(categoria) const precio = [1500, 2000, 500] console.log(`$ ${precio[0]} $ ${precio[1]} $ ${precio[2]}`) console.log(precio) ```const list = Array('camioneta', 'auto', 'moto')console.log(list) const list1 = Array(12)console.log(list1) const number = Array(1, 2, 3)console.log(number) const categoria = \['terror', 'suspenso', 'policial']console.log(categoria) const precio = \[1500, 2000, 500]console.log(`$ ${precio\[0]} $ ${precio\[1]} $ ${precio\[2]}`)console.log(precio)
En un proyecto real, un array se usa para almacenar múltiples elementos. En una aplicación de lista de tareas, cada tarea se puede representar como un elemento dentro de un array. Este enfoque permite agregar, eliminar, buscar y modificar tareas de forma sencilla. `// 1️⃣ Crear un array vacío para almacenar las tareas` `let tareas = [];` `// 2️⃣ Función para agregar una nueva tarea` `function agregarTarea(tarea) {` ` tareas.push(tarea); // Usamos .push() para agregar la tarea al final del array` `` console.log(`Tarea "${tarea}" agregada!`);`` ` mostrarTareas();` `}` `// 3️⃣ Función para mostrar todas las tareas` `function mostrarTareas() {` ` console.log("Lista de tareas:");` ` if (tareas.length === 0) {` ` console.log("📭 No hay tareas por hacer.");` ` } else {` ` tareas.forEach((tarea, index) => {` `` console.log(`${index + 1}. ${tarea}`);`` ` });` ` }` `}` `// 4️⃣ Función para eliminar una tarea por su índice` `function eliminarTarea(indice) {` ` if (indice >= 0 && indice < tareas.length) {` ` let tareaEliminada = tareas.splice(indice, 1); // Eliminamos 1 elemento en la posición 'indice'` `` console.log(`Tarea "${tareaEliminada}" eliminada!`);`` ` } else {` ` console.log("❌ Índice inválido.");` ` }` ` mostrarTareas();` `}` `// 5️⃣ Ejecución de las funciones` `agregarTarea("Estudiar JavaScript");` `agregarTarea("Completar proyecto UX");` `agregarTarea("Leer artículo sobre React");` `eliminarTarea(1); // Eliminar la segunda tarea (índice 1)` `mostrarTareas();` \----------------- **Array**: `let tareas = []` - Creamos un array vacío para almacenar las tareas. 1. **.push()**: Usado para agregar elementos al final del array. 2. **.splice()**: Se usa para eliminar un elemento de una posición específica. 3. **.forEach()**: Itera sobre cada tarea y la muestra en la consola con su índice.
Mi humilde aporte: La forma del Array literal syntax es la más ocupada, así casi siempre se trabaja en muchos lenguajes. Ejemplos: let arregloFloral = \["gardenias","tulipanes", "Rosas rojas"] const jueguetes = \["carritos", "muñecas", "balones"] let datosMix = \[1, 2, 3, 4, 5, 6, "frio", "caliente" ]
function cajaDeFrutas() { let manzana = "roja"; // 🍎 (variable local) function mostrarManzana() { // 🔄 (función interna) console.log("La manzana es:", manzana); // Usa la variable externa } return mostrarManzana; // Devuelve la función, NO el valor } const obtenerManzana = cajaDeFrutas(); // Guardas la función en una variable. obtenerManzana(); // Ejecutas la función: Imprime "La manzana es: roja" ✅