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

Tipos de datos en JavaScript

5/55
Recursos

Aportes 19

Preguntas 3

Ordenar por:

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

Si a alguno de ustedes no les queda claro el tipo de dato Symbol, a continuación les comparto esta información que quizá pueda ser de utilidad. **¿Qué es un Symbol?** Un Symbol es un tipo de dato especial en JavaScript que se usa para crear identificadores únicos. Piensa en él como una etiqueta única que puedes usar para identificar cosas sin preocuparte de que se dupliquen. **¿Para qué se usa?** Los Symbol son útiles cuando quieres asegurarte de que una propiedad de un objeto sea única y no se mezcle con otras propiedades que puedan tener el mismo nombre. **En Resumen** Imagina que tienes un objeto y quieres agregarle propiedades, pero quieres estar seguro de que esas propiedades sean únicas y no interfieran con otras. ![](https://static.platzi.com/media/user_upload/Js%20Symbol-b60322ca-89d0-422f-9b21-2f0c9cc92aa6.jpg)
Mi ejemplo practico: ![]()![](https://static.platzi.com/media/user_upload/image-87258f62-e2c9-4d68-94ff-5ad235c6233f.jpg)

Variables en JavaScript

  • Las variables en JavaScript son contenedores que permiten almacenar información.
  • Es crucial saber qué tipo de información se puede almacenar en estas variables.
  • Conceptos importantes relacionados: inmutabilidad, mutabilidad y tipado dinámico.

Tipos de datos en JavaScript

  • En JavaScript existen 10 tipos de datos, divididos en dos grupos: primitivos y complejos.

Tipos de datos primitivos

  1. String: Almacena cadenas de texto.
  2. Number: Almacena números.
  3. Boolean: Almacena valores true o false.
  4. Null: Representa un valor nulo.
  5. Undefined: Representa un valor no definido.
  6. Symbol: Almacena valores únicos.
  7. BigInt: Almacena números muy grandes.

Tipos de datos complejos

  1. Object: Almacena colecciones de datos.
  2. Array: Almacena listas ordenadas de datos, técnicamente un tipo de objeto.
  3. Function: Almacena funciones, que son bloques de código reutilizables.

Características de los tipos de datos

  • Primitivos:
    • Inmutables: No cambian el valor original.
    • Se pasan por valor: Se copian al asignarse a otra variable.
  • Complejos:
    • Mutables: Pueden cambiar el valor original.
    • Se pasan por referencia: Referencian la misma ubicación en memoria.

Mutabilidad e inmutabilidad

Datos primitivos (Inmutables)

  • Ejemplo con números:

    let numero = 23;
    numero = numero + 10; // Nuevo valor: 33
    console.log(numero); // Imprime 33
    
  • Ejemplo con booleanos:

    let esVerdadero = true;
    esVerdadero = false; // Nuevo valor: false
    console.log(esVerdadero); // Imprime false
    

Datos complejos (Mutables)

  • Ejemplo con objetos:

    let usuario = {
      nombre: "Pepito",
      edad: 15
    };
    usuario.edad = 20; // Modifica el valor original
    console.log(usuario); // Imprime { nombre: "Pepito", edad: 20 }
    
  • Ejemplo con arrays:

    let frutas = ["manzana", "pera"];
    frutas[0] = "sandía"; // Modifica el valor original
    console.log(frutas); // Imprime ["sandía", "pera"]
    

Funciones y mutabilidad

  • Ejemplo de función que modifica un objeto:

    function cambiarNombre(objeto) {
      objeto.nombre = "Nuevo Nombre";
    }
    
    let persona = {
      nombre: "Antonio"
    };
    
    cambiarNombre(persona);
    console.log(persona); // Imprime { nombre: "Nuevo Nombre" }
    

Buenas prácticas en nombramiento de variables

  • Evitar nombres ambiguos como C, D, A.
  • Usar nombres descriptivos y claros.
  • Utilizar abreviaciones conocidas y aceptadas como URL o ID.

Ejemplos no permitidos:

  • let C = "Woody"; - No descriptivo.
  • let CDA = "Caja de Andy"; - Puede ser ambiguo.

Ejemplos permitidos:

  • let primerTrasteoDeAndy = "Caja de Andy"; - Descriptivo y claro.
  • let urlUsuario = "<https://example.com>"; - Abreviación conocida.
  • let idUsuario = 12345; - Abreviación conocida.

Conclusión

  • Utilizar let para variables que cambian con el tiempo.
  • Utilizar const para variables constantes.
  • Seguir buenas prácticas en el nombramiento de variables para mantener un código claro y comprensible.
En JavaScript tenemos 10 tipos de datos, y se agrupan en 2, los primitivos y los complejos: **Primitivos** * string * number * boolean * null * undefined * symbol * bigint **Complejos** * object * array * function Por lo general el valor **"null"** lo asignamos nosotros y el valor **"undefined"** lo asigna JavaScript.
Tipos de Datos Primitivos: ![](https://i.imgur.com/UWYumen.png) Tipos de Datos Complejos: ![](https://i.imgur.com/A9EybQD.png)
Cuál es la diferencia de usar comillas simples o dobles?
Hola, aqui les dejo los código para que lo copien y peguen en VSC, un pequeño aporte. // PRIMITIVOS // stringlet nombre = 'Tere' // numberlet edad = 25 // booleanlet esmayordeedad = true //nulllet nohayvalor = null // undefinedlet nodefinido = undefined // symbollet simbolounico = Simbol('unico') // bigintlet numerogrande = 2n // COMPLEJOS // objectlet carro = {     marca: 'Tesla'    modelo: 'Model S'} // arraylet frutas = \['manzanas', 'banana', 'uvas'] // funtionfunction saludar (informacion para la funcion) {el cuerpo de la funcion}
**¿Cúal es la diferencia entre un array y un objeto?** * **Array**: Se utiliza cuando necesitas una lista de elementos donde el orden importa y puedes acceder a ellos por su posición (índice). También es util cuando necesitas iterar sobre una colección de datos. * **Objeto**: Se utiliza para representar datos estructurados en un formato clave-valor. Es ideal para describir entidades o cosas con varias propiedades, donde cada propiedad tiene un nombre (clave) y un valor asociado. **Diferencias clave**: En un array el acceso a los datos se realiza por su posición (índice numérico), mientras que en un objeto, el acceso se realiza por una clave (nombre de propiedad). Usa array cuando el orden es importante y necesitas listas. Usa objeto cuando trabajes con datos estructurados y propiedades con significado especifico.
¿Cuál es la diferencia entre null y undefined? Básicamente cuando creas una variable o una constante sin algún valor, lo que sucede es que JavaScript indicará que su valor es undefined. ```js let miNombre; console.log(miNombre); //output: undefined ``` Null se utiliza a propósito o de manera intencionada para declarar variables cuyo valor indique la falta de valor. ```js let precioDelProducto = null; console.log(null); //output: null ```
Diferencias entre null y undefined Null significa que la variable no tiene algun valor o esta vacio var x = null; Undefined significa que la variable solo esta declarada pero no se le ha asignado algun dato. var x;
Mi resumen: ```js /** * primitive data types */ // strings let name = "Jorge"; // Boolean let isActive = true; // null let notExist = null; // undefined let isNotdefined = undefined; // symbol -> unique value let uniqueSymbol = Symbol("Unique"); // bigint let bigNumber = 2n; /** * complex data types */ // object let car = { brand: "Tesla", model: "Model S", color: "red", }; // array let fruits = ["apple", "orange", "banana", "grape"]; // function function sayHello() {} ```*/\*\* \* primitive data types \*/* *// strings*let name = "Jorge"; *// Boolean*let isActive = true; *// null*let notExist = null; *// undefined*let isNotdefined = undefined; *// symbol -> unique value*let uniqueSymbol = Symbol("Unique"); *// bigint*let bigNumber = 2n; */\*\* \* complex data types \*/* *// object*let car = { brand: "Tesla", model: "Model S", color: "red",}; *// array*let fruits = \["apple", "orange", "banana", "grape"]; *// function*function sayHello() {}
Dejo mi ejercicio: ![](https://static.platzi.com/media/user_upload/Screenshot%202024-08-20%20at%2010.57.50PM-1a2ce30d-067f-4aba-9504-b9a7b92e7894.jpg)
No entendí muy bien el ultimo de los complejos. entiendo como se refiere y que quiere llegar el function, pero mas que nada no se como se llenaría esos datos y si yo decido si saludaría esa persona por ejemplo.
Cumpliendo con el ejercicio: ![](https://static.platzi.com/media/user_upload/image-5f0c8c1f-afc8-4e30-96ac-82de3e6ea448.jpg)
**Primitivos y Complejos** **10 tipos de datos** · **Primitivos** o string: cadenas de textos o number: alojar numeros o boolean: true o false o null: nulo alojar valor nulo o undefined: indefinido o symbol: símbolo, elementos unicos o bigint: números muy grandes · Complejos o object: objetos o array: objeto o function: funciones
### Primitivos 1. **string**javascriptCopiar código let greeting = "Hello, World!"; console.log(greeting); // Output: Hello, World! 2. **number**javascriptCopiar código let age = 25; let pi = 3.14159; console.log(age); // Output: 25 console.log(pi); // Output: 3.14159 3. **boolean**javascriptCopiar código let isJavaScriptFun = true; let isOver18 = false; console.log(isJavaScriptFun); // Output: true console.log(isOver18); // Output: false 4. **null**javascriptCopiar código let emptyValue = null; console.log(emptyValue); // Output: null 5. **undefined**javascriptCopiar código let notAssigned; console.log(notAssigned); // Output: undefined 6. **symbol**javascriptCopiar código let uniqueId = Symbol("id"); console.log(uniqueId); // Output: Symbol(id) 7. **bigint**javascriptCopiar código let bigNumber = 1234567890123456789012345678901234567890n; console.log(bigNumber); // Output: 1234567890123456789012345678901234567890n ### Complejos 1. **object**javascriptCopiar código let person = { name: "John", age: 30, isEmployed: true }; console.log(person); // Output: { name: 'John', age: 30, isEmployed: true } 2. **array**javascriptCopiar código let fruits = \["apple", "banana", "cherry"]; console.log(fruits); // Output: \['apple', 'banana', 'cherry'] 3. **function**javascriptCopiar código function greet(name) { return `Hello, ${name}!`; } console.log(greet("Alice")); // Output: Hello, Alice!
# Tipos de datos (Primitivos y Complejos) En `JavaScript`, los tipos de datos se dividen en dos categorías principales: primitivos y complejos (o no primitivos). Vamos a detallar cada uno de ellos. Primitivos ## Tipos de datos primitivos Los tipos de datos primitivos son los más básicos y se accede a ellos por valor. Esto significa que cuando se asigna una variable a otra, se copia el valor. Los tipos de datos primitivos en JavaScript son: * Number * Null * Symbol * String * Boolean * Undefined * Bigint ## Tipos de datos complejos (o no primitivos) Los tipos de datos complejos en JavaScript son aquellos que se accede a ellos por referencia. Esto significa que cuando se asigna una variable a otra, se copia la referencia al valor, no el valor en sí. Los principales tipos de datos complejos son * Object * Array * Map * Set * Function Ejemplo de usabilidada // Datos primitivos (inmutables) -------------------------------- ## let a = 5; let b = a; // Se copia el valor b = 10; console.log(a); // Salida: 5 (el valor original permanece inalterado) console.log(b); // Salida: 10 (b tiene una copia independiente del valor) let str1 = 'Hola'; let str2 = str1; // Se copia el valor str2 = 'Adiós'; console.log(str1); // Salida: 'Hola' (el valor original permanece inalterado) console.log(str2); // Salida: 'Adiós' (str2 tiene una copia independiente del valor) // Datos complejos (mutables) let arr1 = \[1, 2, 3]; let arr2 = arr1; // Se copia la referencia arr2.push(4); console.log(arr1); // Salida: \[1, 2, 3, 4] (arr1 se ve afectado por el cambio en arr2) console.log(arr2); // Salida: \[1, 2, 3, 4] (arr2 refleja el cambio) let obj1 = { nombre: 'Ana' }; let obj2 = obj1; // Se copia la referencia obj2.edad = 25; console.log(obj1); // Salida: { nombre: 'Ana', edad: 25 } (obj1 se ve afectado por el cambio en obj2) console.log(obj2); // Salida: { nombre: 'Ana', edad: 25 } (obj2 refleja el cambio)
**Datos primitivos** Son valores simples y se almacenan directamente en la variable. Cuando asignas un valor primitivo a una variable, la variable almacena el valor real. Los datos primitivos son inmutables, lo que significa que una vez que se asigna un valor a una variable, no puedes cambiar el valor real almacenado en esa variable. Cualquier operación que parezca modificar un valor primitivo, en realidad crea un nuevo valor. Estos tipos incluyen: **- Number:** Almacena valores numéricos, ya sean enteros o decimales. **- String:** Contiene secuencias de caracteres, como texto. **- Boolean:** Representa valores verdaderos (true) o falsos (false). **- Null:** Indica que una variable no tiene valor o está vacía. **- Undefined:** Cuando una variable se ha declarado pero no se le ha asignado un valor. **- Array:** Almacena una lista ordenada de elementos. **- Object:** Estructura de datos que puede contener propiedades y métodos. **- Function:** Un bloque de código reutilizable que puede ser llamado. **- Symbol:** Identificador único utilizado para propiedades de objetos. **- BigInt:** Para manejar números enteros grandes. **Datos complejos** Son aquellos que pueden almacenar colecciones de datos y más estructura en comparación con los tipos de datos primitivos. **- Object:** Es una colección de propiedades, donde cada propiedad tiene una clave y un valor. **- Array:** Es una lista ordenada de valores, que pueden ser de cualquier tipo de datos. **- Function:** Es un bloque de código diseñado para realizar una tarea particular. **- Date:** Se utiliza para trabajar con fechas y horas. **- RegExp:** Expresión regular, son patrones utilizados para coincidir y manipular cadenas de texto. **- Map:** Es una colección de pares clave-valor donde las claves pueden ser de cualquier tipo. **- Set:** Es una colección de valores únicos. Un valor en un Set solo puede ocurrir una vez.
Aca comparto mi resumen: TIPOS DE DATOS: PRIMITIVOS: son los más básicos e inmutables. Estos no tienen métodos ni propiedades. Entre estos datos primitivos se encuentran: 1 - STRINGS: Cadenas de texto simple en javascript. Por ejemplo: `let nombre = 'Calvin'` 2 - NUMBER: Son tipos de datos numericos, ya sea enteros o numeros grandes. Ejemplo: `let edad = 18` 3 - BOOLEANS: Verdadero o falso damas y caballeros. Este tipo de dato nos ayuda a definir si algo es verdadero o si es falso. `let mayorEdad = true` NULL: No hay, no existe. Esa es la frase con la que lo resumiria. Con null decimos que ese dato, esta vacio. `let noExiste = null` Undefined: A diferencia de null, en este si existe un valor, pero no esta definido. En vez de un "No hay", este es un "No se sabe". Ejemplo: `let noSeSabe = undefined` Nota: Usualmente no es necesario colocarlo el undefined, debido a que JS por si solo nos lo da, si un dato no esta definido. BIGINT: Ultimo dato primitivo, este a diferencia de number es para guardar numeros extremadamente grandes, como por ejemplo el que dijo Estefany, el numero PI. `let bigNumber = 1234567890123456789012345678901234567890n;` TIPOS DE DATOS COMPLEJOS Estos tipos de datos son complejos debido a estan compuestos de otros tipos de datos existentes. Entre ellos se encuentran: Objects: Es un concepto complejo (por algo es un tipo de dato complejo) mas adelante en el curso se daran mas detalles, y hay bastante cursos de programacion orientada a objetos en platzi. Ejemplo: `const smartPhone = {  ` `  brand: 'Samsung';   ` ` model: 'Galaxy S24';    ` `color: 'Titanium purple';   ` ` storage: '256GB'}` ARRAYS: Son listas, en esta al igual que en una lista de compras, podemos guardar distintos datos que utilizaremos mas adelante. Ademas de poder manipular estos mismos. Ejemplo: `let carritoDeCompras = ['Carne', 'Arroz', 'Habichuelas', 'Lechuga', 'ketchup']` etc..... FUNCTIONS: Son pedazitos de codigo reutilizables en donde podemos guardar valores e instrucciones a ejecutar mas adelante. Ejemplo: `function saludo(name) {   ` `` console.log(`Buenos días, ${name}`);`` `}` `saludo('Jose'); // Devuelve: Buenos días, Jose`