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

Anatomía de una variable

4/55
Recursos

Aportes 33

Preguntas 3

Ordenar por:

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

Mi ejemplo practico de esta clase ![]()![](https://static.platzi.com/media/user_upload/image-d7091537-5532-4356-81c2-c9b2632e38d4.jpg)
Algo importante que mencionar referente a la anatomia de una varible es saber porque se escribe de esa manera, "cajaDeAndy", por que las mayusculas? A esta estructura se le llama lowerCamelCase. Tambien existen: **Snake\_case:** *my\_name*. **PascalCase:** *MyName*. **Kebab-case:** *my-name*. En Javascript es mas comun utilizar lowerCamelCase
***<u>Var:</u>*** Es una forma antigua de declarar variables en JavaScript. ***<u>Let: </u>***Es una forma moderna de declarar variables en JavaScript. ***<u>Const:</u>*** Es otra forma moderna de declarar variables en JavaScript, utilizada cuando no quieres que el valor de la variable cambie. ***<u>Ejemplos:</u>*** ```js // Ejemplo var var nombre = 'Juan'; console.log(nombre); // Juan // Ejemplo let let edad = 16; console.log(edad); // 16 // Ejemplo const const ciudad = 'Ciudad de México'; console.log(ciudad); // Ciudad de México ```
Como quién dice, lo más difícil del código no es programar, sino nombrar variables hehe

Concepto de Variables en Programación

  • Las variables en programación se pueden imaginar como cajas que almacenan cosas.
  • Estas cajas (variables) tienen nombres o etiquetas que nos permiten identificarlas y saber qué contienen.
  • En JavaScript, se utilizan palabras clave como let para declarar una variable.

Declaración y Asignación de Variables en JavaScript

  • Declaración: Crear la caja (variable) con un nombre.
  • Asignación: Almacenar algo en la caja (variable).

Ejemplo en JavaScript

  • Usamos let para declarar una variable.
  • Le asignamos un nombre descriptivo para saber qué contiene.
  • Asignamos un valor a la variable usando el signo igual (=).
let cajaDeAndy = "Woody";
console.log(cajaDeAndy); // Output: Woody

Importancia de Nombres Descriptivos

  • Los nombres de las variables deben ser descriptivos y evitar ambigüedades.
  • Correcto: Nombres que describen claramente el contenido.
  • Incorrecto: Nombres como C, D, A que no describen el contenido.

Ejemplos de Nombres Correctos e Incorrectos

  • Incorrecto: let C = "Woody"; – No es descriptivo.
  • Correcto: let cajaDeAndy = "Woody"; – Es descriptivo y claro.

Buenas Prácticas en Nombramiento de Variables

  • Evitar abreviaciones ambiguas.
  • Utilizar nombres largos y descriptivos si es necesario.
  • Las abreviaciones comunes como URL y ID son aceptables porque son entendidas generalmente.

Ejemplos

  • Correcto: let primerTrasteoDeAndy = "Caja grande";
  • Correcto: let userID = "12345";

Organización del Código

  • Declarar variables al inicio del código.
  • Mantener las variables en orden y una debajo de la otra.

Uso de let y const en JavaScript

  • let: Para variables que pueden cambiar con el tiempo.
  • const: Para variables constantes cuyo valor no cambia.

Ejemplo con let y const

  • let contador = 0; – Variable que puede cambiar.
  • const PI = 3.14; – Constante que no cambia.
let contador = 0;
contador = contador + 1;

const PI = 3.14;
console.log(PI); // Output: 3.14

Comentarios y Buenas Prácticas

  • Escribir comentarios para explicar el código y hacerlo más entendible para el “yo del futuro” o para otros programadores.
  • Evitar nombres de variables no descriptivos y mantener el código organizado y legible.

Ejemplo de Comentarios

// No permitido
let C = "Woody";

// Permitido
let cajaDeAndy = "Woody"; // Variable descriptiva

// Otro ejemplo con abreviación conocida
let userURL = "<https://google.com>";
let userID = 12345;

Próximos Pasos

  • Practica la declaración y asignación de variables en tu editor de código.
  • Utiliza nombres descriptivos para tus variables.
  • Experimenta con let y const y observa cómo cambian o permanecen constantes.
  • Sigue las buenas prácticas para mantener tu código limpio y entendible.
Aquí viendo de nuevo el curso para pulir conocimientos :)
La profesora es excelente tiene un tono de voz muy chevere y explica de manera muy clara.
Una **variable** es una palabra que representa algo que cambia o experimenta algún tipo de modificación y carece de **estabilidad, constancia y mutabilidad.** En términos más simples, la variable es un símbolo que señala a un elemento no específico dentro de un grupo particular. Este grupo se denomina a menudo conjunto universal de la variable y cada elemento en este conjunto es un valor de la variable. Se encuentran en algoritmos, afirmaciones y fórmulas. **Ejemplos y usos de las variables** Las variables son elementos esenciales en las fórmulas, afirmaciones y algoritmos, ya que pueden adquirir diferentes valores mientras se mantienen dentro de un conjunto específico. **Uso de variables en programación y Javascript** En programación, una **variable** es un lugar en memoria en la cual podemos guardar objetos (números, texto, etc.). Esta posee un identificador o nombre con el cual podemos llamarla más tarde cuando la necesitemos. En términos más específicos, una variable consta de tres elementos principales: **1. Nombre:** es el identificador único que se utiliza para referirse a la variable. **2. Tipo de dato:** es el tipo de información que se almacena en la variable, como números enteros, decimales, cadenas de texto, booleanos, entre otros. **3. Valor:** es el contenido actual almacenado en la variable.
Otra manera de aumentar una variable con valor numérico es: `contador++` Ejemplo: ```js let contador = 0; console.log(contador); contador++ console.log(contador); contador++ console.log(contador); ```Prueben ejecutando este código, el output será: `0` `1` `2`
Mi ejemplo de variables :)![](https://static.platzi.com/media/user_upload/image-5fa5c974-99e8-4852-9e99-b9b796786241.jpg)![](https://static.platzi.com/media/user_upload/image-4944edf7-ab3c-4efd-ad5b-80c370713476.jpg)
En muchos proyectos no se le dio la importancia necesaria a las variables que luego costaron muchas horas más de trabajo de las esperadas. 🥲
![](https://static.platzi.com/media/user_upload/image-eb58e2d7-bb7f-453a-afc3-6c7ea91a0ba7.jpg)mi lindo ejercicio creando variables
Que yo sepa sí se recomienda poner **;** al final de cada sentencia.
Buenas con todos volviendo a recordar y reforzar con esta gran profesora admito que todos los ejemplos los estoy haciendo referente a One piece comparto mi código ![](https://static.platzi.com/media/user_upload/image-dfa78629-2e98-4894-b48c-c03ea7a0b27b.jpg)
Acerca de las diferencias entre let y const: -'let' \- `let` te permite reasignar un nuevo valor a la variable más adelante en tu código. \- `let` puede ser declarado sin un valor inicial y asignarse más tarde. \- `const` \- `const` \*\*no\*\* permite la reasignación; una vez asignado, el valor no puede cambiarse. \- `const` debe ser inicializado con un valor cuando es declarado. ![image.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/9c2af251-f754-4250-b555-e92834a21bf7/2fff4eba-fd34-4a07-b8d7-752619269b35/image.png)
Este es un ejemplo que muestra todo lo que se ha dado en esta clase:*// Estoy recordando los fundamentos de javascript*const prompt = require('prompt-sync')(); let user;let email;let password;let rep\_pass; user = prompt("Introduzca su usuario: ");email = prompt("Introduzca su e-mail: "); do{    password = prompt("Introduzca su contraseña: ");    rep\_pass = prompt("Repita su contraseña: ");    if (password != rep\_pass)    {        console.log("Las contraseñas no coinciden!")        i = 0;    }}while (password != rep\_pass); const f\_user = user;const f\_email = email;const f\_password = password; for (let i = 0; i < 10; i++){    console.log(" ");}console.log("Datos: ")console.log(" ");console.log(f\_user);console.log(f\_email);console.log(f\_password); ```js // Estoy recordando los fundamentos de javascript const prompt = require('prompt-sync')(); let user; let email; let password; let rep_pass; user = prompt("Introduzca su usuario: "); email = prompt("Introduzca su e-mail: "); do { password = prompt("Introduzca su contraseña: "); rep_pass = prompt("Repita su contraseña: "); if (password != rep_pass) { console.log("Las contraseñas no coinciden!") i = 0; } }while (password != rep_pass); const f_user = user; const f_email = email; const f_password = password; for (let i = 0; i < 10; i++) { console.log(" "); } console.log("Datos: ") console.log(" "); console.log(f_user); console.log(f_email); console.log(f_password); ```
**Code Runner** es una extensión para editores de código, como Visual Studio Code, que permite ejecutar código de diferentes lenguajes de programación de manera rápida y sencilla. Aquí tienes un resumen de sus funcionalidades: ### Funciones de Code Runner 1. **Ejecución de Código**: Permite ejecutar fragmentos de código directamente desde el editor sin necesidad de abrir una terminal o consola separada. 2. **Soporte Multilenguaje**: Code Runner es compatible con varios lenguajes de programación, como Python, Java, JavaScript, C++, Ruby, PHP, entre otros. 3. **Configuración Personalizada**: Puedes personalizar la configuración, como la terminal que se utiliza para la ejecución y los parámetros específicos de cada lenguaje. 4. **Resultados Rápidos**: Muestra los resultados de la ejecución en una ventana de salida, lo que facilita la revisión y depuración. 5. **Atajos de Teclado**: Proporciona atajos de teclado para ejecutar rápidamente el código seleccionado o el archivo completo. 6. **Integración con el Editor**: Funciona sin problemas dentro del entorno del editor, mejorando la eficiencia del flujo de trabajo de programación. ### Resumen En resumen, Code Runner es una herramienta útil para desarrolladores que buscan ejecutar código de manera rápida y eficiente dentro de su editor de código, soportando múltiples lenguajes y ofreciendo una experiencia de desarrollo más fluida.
let numero = 0; //0 numero = numero+1; //1 numero = numero+1; //2 const fija= "Hola mundo!" fija = "adc" //ERR hice un pequeño programa para cambiar el valor de "numero"de tipo let para que al sumarle 1 me cambiara el valor de 0 a 1. Sin embargo al intentar cambiar un texto en tipo "const" me da un error.
![](https://static.platzi.com/media/user_upload/variables-be24ac0f-7d71-4106-bfc5-7f35cc827517.jpg)
.
tengo problemas con "el espacio entre palabra y palabra en el título", lo escribo como ella y sin embargo la consola no me tira resultado, qué hago?
bad video quality!
Una variable fija también es útil para el uso de las Api key.
Aquí mis apuntes de esta clase, para quien los necesite: ![](https://static.platzi.com/media/user_upload/image-4d53268b-e9d3-4e2a-99ed-e87b278b66b0.jpg)
Que pasa si uso const para guarda una variable que cambia en el tiempo y viceversa, puede afectar el funcionamiento del código
Como parte de la organización lo ideal es declarar nuestras variables al inicio de todo el código.
lo importante de los nombres de variables deben tener un nombre referente a lo que estamos almacennado. un dicho: "coloca el nombre de una variable, como si eligieras el nombre de un hijo".
Haciendo un pequeño ejercicio de entendimiento de la variable Let: \*Conversión de grados Celsius a Fahrenheit: // Declaramos una variable 'celsius' usando 'let' y le asignamos un valor: let celsius = 25; // Declaramos una variable 'fahrenheit' usando 'let' y calculamos el valor en Fahrenheit: let fahrenheit = (celsius \* 9/5) + 32; // Imprimimos el valor en Fahrenheit en la consola: console.log(fahrenheit);
Mi ejemplo ;) ![](https://static.platzi.com/media/user_upload/image-5a235ee4-fe42-4eea-9f2b-b161d1e02fa8.jpg)
# Anatomia de una variable Una variable en `Javascript` es una contenedor que se utiliza para almacenar datos o valores que pueden cambiar durante la ejecucion de un programacion. son de gran utilidad ya que permiten a los desarrolladores escribir programas dinamicos y flexibles ya que los valores o datos pueden ser manipulados y utilizados en diversas operaciones a lo largo del codigo. ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/244a12a6-3e4c-49e8-a294-8642ad0d61f1/cd672214-5259-43a0-b237-c3d485796e65/Untitled.png) * **Palabra Clave de Declaración** * **Nombre de la Variable (Identificador)** * **Valor**
Muy buena clase.
VARIABLES Si se pudieran resumir con una palabra seria sencillamente CAJAS. Con las variables, podemos guardar informacion que podremos utilizar mas adelante, al igual como en una caja podemos guardar objetos que podremos usar despues. EJEMPLO DE VARIABLES let car = 'Tesla' var model = 'Model S' const color = 'Black' ### DIFERENCIAS **let**: Tiene alcance de bloque, lo que significa que solo están disponibles dentro del bloque `{}` donde se declara. `if (true`) { ` let car = 'Tesla'`; ` console.log(car); // Nos devuelve Tesla` } `console.log(car); // Nos da error porque solo está disponible dentro de la condicional.` No se pueden acceder a ellas antes de su declaración. Por ejemplo: `console.log(car); // Da error` `let car = 'Tesla'`; `console.log(car); // Nos devuelve Tesla` Y no se puede redeclarar: `let car = 'Tesla'`; `let car = 'Toyota'; // Nos da error porque ya car está declarado.` **var**: A diferencia de `let`, podemos usarlas antes de la declaración, pero su valor será `undefined` hasta que la misma se inicialice. Ejemplo: `console.log(model); // undefined` `var model = 'Model S'`; `console.log(model); // Nos devuelve: 'Model S'` Además, podemos declararla dentro de una condicional o función, y aun así poder reutilizarla fuera de la misma. Ejemplo: `if (true`) { ` var model = 'Model S'`; } `console.log(model); // 'Model S'` También, estas sí se pueden redeclarar: `var model = 'Model S'`; `var model = 'Model X'; // No nos da error.` **const**: Al igual que `let`, no se pueden redeclarar, tienen alcance de bloque y son inmutables: `const color = 'Black'`; `console.log(color); // Nos devuelve Black` `color = 'red'; // Nos da el error TypeError: Assignment to constant variable.` Si se declara dentro de un bloque, solo está disponible dentro de ese bloque: `if (true`) { ` const color = 'Black'`; ` console.log(color); // Black` } `console.log(color); // Nos da: ReferenceError: color is not defined.` Espero que les sea útil!!
Mi ejemplo para esta clase: ![](https://static.platzi.com/media/user_upload/clase1-0220a5ab-8c3e-4c0a-8310-947cda438354.jpg)