¡Te damos la bienvenida a este reto!

1

¡Bienvenido al mundo de JavaScript!

Día 1

2

Variables, funciones y sintaxis básica

3

Tipos de datos

4

Playground - Retorna el tipo

5

Tipos de datos - pt 2

Día 2

6

Operadores

7

Hoisting y coerción

8

Playground - Calcula la propina

9

Alcance de las variables

Día 3

10

Condicionales

11

Playground - Calcula años bisiestos

12

Switch

13

Playground - Obten información de mascotas según su tipo

14

Ciclos

15

Playground - Dibuja un triangulo

Día 4

16

Arrays

17

Playground - Encuentra al michi mas famoso

18

Objetos

19

Playground - Obten el promedio de los estudiantes

Día 5 - Checkpoint

20

Playground - encuentra el palindromo más grande

Día 6

21

Reasignación y redeclaración

22

Modo estricto

Día 7

23

Debugging y manejo de errores

24

Programación funcional

Quiz: Día 7

Día 8

25

Closures

26

Playground - Crea una calculadora con closures

27

Higher order functions

28

Playground - Crea tu propio método map

Día 9

29

ECMAScript

30

TC39

Quiz: Día 9

Día 10 - Checkpoint

31

ES6

32

ES7

33

Playground - Task planner

Día 11

34

Asincronismo

35

Playground - Promesas

36

Manejando el asincronismo

37

Playground - Resuelve el callback hell usando promesas

38

Playground - Resuelve el callback hell usando async/await

Día 12

39

Arrays a profundidad

40

Métodos de arrays: Every, Find y findIndex

41

Playground - Válida el formulario

Día 13

42

Métodos de arrays: Includes, Join y concat

43

Playground - agrupa los productos

44

Métodos de arrays: Flat y FlatMap

45

Playground - Encuentra la ubicación del valor buscado

Día 14

46

Mutable functions

47

Playground - Modifica una lista de compras

48

Métodos de arrays: sort

49

Playground - Ordena los productos

Día 15 - Checkpoint

50

Playground - Sistema de reservaciones de un hotel

Día 16

51

Programación orientada a objetos en JavaScript

52

Objetos literales

53

Playground - Congela el objeto recursivamente

Día 17

54

Prototipos en JavaScript

55

Playground - Modifica el prototype de los arrays

56

Playground - Crea un auto usando clases

Día 18

57

Abstracción en JavaScript

58

Playground - Sistema de carrito de compras

59

Encapsulamiento en JavaScript

60

Playground - Encapsula datos de los usuarios

Día 19

61

Herencia en JavaScript

62

Playground - Jerarquía de animales

63

Polimorfismo en JavaScript

64

Playground - Sistema de pagos

Día 20 - Checkpoint

65

Playground - Agenda de vuelos

Día 21

66

Patrones de diseño

67

Sinlgeton y Factory pattern en JavaScript

68

Playground - Implementa singleton en un chat

Día 22

69

Adapter y Decorator pattern en JavaScript

70

Playground - Personaliza productos de una tienda

71

Builder y Protype pattern en JavaScript

72

Playground - Mejora el código usando builder pattern

Día 23

73

Facade y proxy pattern en JavaScript

74

Playground - Proxy en servicio de mensajería

75

Chain of responsability y Observer pattern en JavaScript

76

Playground - Implementación de Observador en Newsletter

Día 24 - Checkpoint

77

Playground - Crea un task manager con patrones de diseño

Día 25

78

Estructuras de datos en JavaScript

79

Playground - Crea tu propia implementación de un array

80

Hash tables en JavaScript

81

Playground - Implementación de una HashTable para Contactos

Día 26

82

Set en JavaScript

83

Playground - Remueve duplicados de una lista

84

Maps en JavaScript

85

Playground - Crea un organizador de tareas

Día 27

86

Singly Linked List en JavaScript

87

Playground - Agrega métodos a la singly linked list

88

Playground - Implementación de una singly linked list

Día 28

89

Stacks en JavaScript

90

Playground - Crea un stack para una playlist

Día 29

91

Queues en JavaScript

92

Playground - Crea una cola de emails

Día 30

93

¡Lo lograste!

Live Class

94

30 días de JS con Juan DC

95

30 días de JS con Nicobytes

96

30 días de JS con GNDX

97

30 días de JS con LeoCode

98

30 días de JS con Teffcode

99

Sesión: Cierre de los 30 días de JavaScript

Variables, funciones y sintaxis básica

2/99

Lectura

Las variables son ubicaciones de almacenamiento en la memoria de la computadora que se utilizan para guardar valores que se pueden utilizar más tarde en el programa. En JavaScript, existen 3 formas de declarar variables: varlet y const.

Las variables declaradas con var y let pueden cambiar su valor a lo largo del tiempo, mientras que las variables declaradas con const son constantes y no pueden cambiar su valor una vez asignado.

Y en JavaScript las puedes usar de la siguiente forma:

// Variables que pueden cambiar con el tiempo
var edad = 30
let hora = 12

// Constante que no pueden cambiar
const nombre = "Platzi"

En el ejemplo anterior declaramos e inicializamos todas las variables ¿Que quiere decir esto?

Básicamente el proceso de declarar una variable es especificar su nombre sin asignarle ningún valor, esto solo se puede hacer con variables (let y var) debido a que const al no poder cambiar su valor, no podremos inicializarla sin declararla al mismo tiempo.

// Declaración
var edad
let hora

Mientras que el inicializar una variable es el asignarles cualquier valor.

// Declaración
var edad
let hora

// Inicialización
edad = 30
hora = 12

// Declaración & inicialización
const name = "Platzi"

Como te habrás dado cuenta, en JavaScript, no es necesario declarar explícitamente el tipo de datos de una variable al asignarle un valor. En su lugar, el lenguaje determina el tipo de datos de la variable en tiempo de ejecución basándose en el valor que se le asigna. Esto hace que JavaScript sea un lenguaje débilmente tipado.

Es importante tener cuidado al trabajar con variables débilmente tipadas, ya que pueden traer problemas si no mantienes las variables del tipo que esperas que sean. Por ejemplo, si intentas realizar una operación matemática con una variable que contiene un valor de texto en lugar de un número, obtendrás un error. Por lo tanto, es importante asegurarse de que las variables contengan los valores adecuados para el tipo de operación que se está realizando.

Funciones

Las funciones son una de las características más importantes y poderosas de JavaScript. Una función es un bloque de código que se puede reutilizar en diferentes partes de un programa.

Las funciones se usan para realizar una tarea específica y pueden recibir uno o más argumentos (también conocidos como parámetros dependiendo la situación) y pueden devolver un valor como resultado.

Para declarar una función en JavaScript, se utiliza la palabra clave function, seguida del nombre de la función y una lista de parámetros entre paréntesis. El cuerpo de la función se escribe entre llaves y contiene el código que se ejecutará cuando se llame a la función.

function miFuncion(parametro1, parametro2) {
  // Código de la función
}

Para llamar a una función, simplemente escribes su nombre seguido de paréntesis.

miFuncion(valor1, valor2);

Las funciones también pueden devolver un valor como resultado usando la palabra clave return. El valor devuelto se puede asignar a una variable o utilizar en una expresión.

function suma(a, b) {
  return a + b;
}

let resultado = suma(2, 3);
console.log(resultado); // Imprime 5

Aunque esta es la forma tradicional que se le conoce como “Function declaration”en JavaScript existen otras 3 formas de hacer uso de funciones.

  1. IIFE (Immediately Invoked Function Expression): una función que se autoejecuta inmediatamente después de ser definida. Esta función es anónima y no se puede reutilizar.
(function () {
  console.log("Soy una IIFE");
})();
  1. Función expresión: una función que se define como una expresión y puede ser asignada a una variable. Esta función también puede ser llamada y reutilizada.
let saluda = function () {
  console.log("Hola");
};

saluda();
  1. Arrow function: una función que se define utilizando la sintaxis () =>. Esta función es una forma más concisa de escribir funciones y es útil para funciones de una sola línea.
let saluda = () => console.log("Hola");

saluda();

Sintaxis básica

Ya que conoces este par de conceptos de JavaScript es importante que tomes en cuenta los siguientes aspectos para no tener typos en tu código o errores comunes.

Punto y coma ;

El uso de punto y coma es totalmente opcional, a excepción de algunos casos especiales como en ciclos o cuando se quiere separar declaraciones en una misma línea.

Un código así 👇

const saludo = "Hola"
const nombre = "Platzi"
const saludoCompleto = saludo + " " + nombre
console.log(saludoCompleto) // "Hola Platzi"

Hace exactamente lo mismo que el siguiente 👇

const saludo = "Hola";
const nombre = "Platzi";
const saludoCompleto = saludo + " " + nombre;
console.log(saludoCompleto); // "Hola Platzi"

Como consejo, si vas a usar el punto y coma desde un inicio trata de mantenerlo en cada linea para que por cuestiones de legibilidad se vea bien.

Corchetes o llaves {}

Las llaves {} se utilizan para encapsular bloques de código, funciones, bucles y otros elementos en JavaScript. También se utilizan para declarar objetos, un tipo de dato que veremos en la siguiente clase.

const carro = {
  color: "rojo",
  llantas: 4,
  marca: "Audi"
}

Es importante tener cuidado al trabajar con punto y coma y llaves en JavaScript, ya que el olvido o el uso incorrecto de estos elementos puede llevar a errores en el código.

Todo esto y más lo puedes aprender en el curso Curso Básico de JavaScript

Aportes 29

Preguntas 8

Ordenar por:

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

Creo que hay un error en la lectura. En la parte donde explican la declaración e inicialización de una variable están mezclando los dos conceptos. Tengo entendido que declarar la variable es indicar al programa que existe y darle nombre mientras que inicializarla es asignarle un valor. Pero corríjanme si me equivoco

Aquí te dejo algunos datos curiosos sobre variables, tipos de variables y funciones en JavaScript:


.

  • A diferencia de otros lenguajes de programación, en JavaScript las variables no tienen tipos de datos predefinidos. Esto significa que una variable puede contener cualquier tipo de datos en cualquier momento.
    .
  • JavaScript es un lenguaje de programación con tipado dinámico, lo que significa que el tipo de una variable puede cambiar durante la ejecución del programa. Por ejemplo, una variable que al principio contiene un number puede cambiar su tipo a string o booleano más tarde en el programa.
    .
  • En JavaScript, las variables pueden declararse con var, let o const. var y let permiten que el valor de la variable cambie, mientras que const es una variable de solo lectura.
    .
  • Las funciones en JavaScript son ciudadanos de primer orden (first-class citizens), lo que significa que pueden tratarse como cualquier otra variable. Las funciones pueden asignarse a una variable, pasar como argumento a otra función o devolverse como resultado de una función.
    .
  • JavaScript permite la creación de funciones anónimas, que son funciones sin nombre que se pueden asignar a una variable o pasar como argumento a otra función.
    .
  • En JavaScript, las funciones pueden tener parámetros opcionales que se pueden omitir al llamar la función. Esto se logra asignando un valor predeterminado a los parámetros de la función.
    .
  • En JavaScript, las funciones pueden devolver cualquier tipo de datos, incluyendo otras funciones. Esto permite la creación de funciones de orden superior, que son funciones que toman una o más funciones como argumento y devuelven una nueva función.

Tratando de hacer cada clase llamativa para mí con mis apuntes.

Aunque tengo conocimientos previos, siempre es importante refrescar conceptos y asegurarme de tener una base sólida en la programación. ¡Vamos por más aprendizaje! 💪🏼💻

Que grave. Estaba esperando el live de hoy donde hablan LeoCode y GNDX acerca del reto. ¡Veremos las reacciones del primer día del curso
https://platzi.com/eventos/developer-group-2102

Nada es grave, vengo del live de… Active Learning en la escuela de Desarrollo Web. jejeje

buena clase, tiene cierta similitud con python por lo que leo 🤓☝️

Algunas de las principales diferencias entre let y var:

  • Su alcance (scope): las variables var no se limita al bloque de código en el que se definen, puesto que se puede acceder a ella desde afuera en la función en la que se encuentra dicho bloque; var es de alcance de función (function-scoped), mientras que let (al igual que const) es de alcance de bloque (block-scoped):

    En el ejemplo anterior se declara y se inicializa la variable color usando var dentro de un bloque if, el cual a su vez está dentro de una función llamada start. Podemos ver que si usamos el método console.log para imprimir el valor de ‘color’ por fuera del bloque if (y dentro de la función), podemos acceder a dicha variable, cosa que no sucede si usamos let en lugar de var:

    Al tratar de imprimir el valor de ‘color’ nos va a generar un error, ya que estamos por fuera de su alcance.

  • Relación con el objeto window: Las variables declaradas con var fuera de una función (como variable global) se convierten en propiedades del objeto window (un objeto global que se crea automáticamente al cargar una página web en un navegador), pero si usamos let o const, esto no ocurre:

    En el anterior ejemplo, si buscamos en la consola la propiedad de window.color, retornará el valor que le asignamos a dicha variable (‘red’) gracias al haber usado var. Por otro lado, en la variable ‘age’ se usó let, y si buscamos esa propiedad (window.age), nos retornará como indefinida. Pueden profundizar esas diferencias aquí.

Este documento es una guía detallada de las reglas y características que definen el lenguaje de programación JavaScript. La última versión de esta guía se encuentra en https://tc39.es/ecma262/ .

El documento contiene todas las características y reglas más recientes de JavaScript, y está disponible para que cualquier persona pueda leerlo y aprender de él. El documento está dividido en secciones y se puede ver en una sola página o en varias páginas.

Es importante tener en cuenta que el documento puede ser bastante técnico y detallado, pero es una referencia valiosa para cualquier persona que desee aprender a programar en JavaScript o profundizar en su conocimiento de este lenguaje de programación.

En su momento pensé que este tema de las variables no era muy importante pero con el tiempo he aprendido que es fundamental ya que al desarrollar código lo vemos todo el tiempo y de ello depende que nuestro programa pueda correr bien.

Diferencias entre variables vat let const

Declaracion variables Javascript

Es bueno aclarar que no necesariamente al declarar una función se deben agregar parámetros ya que depende de lo que requiera solucionar con la misma.

  • Podemos tener funciones sin parámetros
function saludar() {
	console.log("Hola team Platzi");
}
  • Funciones sin parametros que retornar un valor (ejemplo la hora actual)
function consultarHora() {
	const fecha = new Date();
	return `Hora actual: ${fecha.getHours()}:${fecha.getMinutes()}:${fecha.getSeconds()}`;
}
  • Funciones con parámetros
function sumar(a, b) {
	return a + b;
}

Las variables declaradas con var y let pueden cambiar su valor a lo largo del tiempo, mientras que las variables declaradas con const son constantes y no pueden cambiar su valor una vez asignado.

apuntes de sintaxis simple

Un resumen de la parte de variables, espero haberlo echo bien n.n

Empezando y ya me esta gustando 😃

Hacer operaciones con diferentes tipos de datos en JavaScript no siempre da error, por lo no se debe esperar que aparezca un mensaje en la consola o que el programa se detenga.
Ejemplos:

Cómo se puede ver en la imagen, sumar un número y un string, o un número y un objeto, no mostrará un error y tampoco se detendrá el programa, por lo que como menciona el doc, es importante tener cuidado al trabajar con variables débilmente tipadas.

Me gustan mucho este tipo de resúmenes, una vez que ves el curso de java en video y lees esto, el conocimiento es más fácil de que quede guardado en tu mente, y lo explican de forma sencilla

Solo quiero recalcar que según tengo entendido se le llama parámetros cuando se crea una función, y argumentos cuando se llama.
Lo del punto y coma en un ciclo y/o en una misma línea no lo sabía, interesante…! 😃

Hasta donde tengo entendido, los conceptos de declarar, asignar e incializar una variable no eran estos?:

// Declarar
var edad
let hora

// Asignar
edad = 30
hora = 12

// Inicializar
const name = "Platzi"

Alguien saqueme de esta pequeña duda 😅

La información es bastante directa y compacta así que es de rápido aprendizaje.
.
Aunque sin practica nada se aprende, solo desarrollamos conocimiento haciéndolo.

Día 1, ahí vamos!

Poniéndome al corriente.
Día #1 ✅

Día #1: ¡Vamos por más aprendizaje! 💪🏼💻

// Declarar
var edad
let hora

Acá estamos declarando la variable, es decir que le estamos diciendo a js que guarde un espacio en memoria para la variable edad y hora, pero en este momento el valor por defecto que le asigna js de esa variable es undefined, por lo que no se ha inicializado…

// Asignar o inicializar
edad = 30
hora = 12

Cuando le asignamos un valor a cada una de las variables lo que estamos haciendo es iniciañizando la variable, es decir que le estamos diciendo a js, que el valor que tenia reservado para la variable ya no va a ser undefined sino que va a ser el que le asignamos.

// declarar e Inicializar
const name = "Platzi"

Y acá estamos declarando una variable const y al mismo tiempo le estamos asignando o inicializando un valor, en este caso en particular con const, debemos si o si inicializar la variable puesto que const tiene la particularidad de que va a ser constante ese valor, es decir no lo vamos a poder cambiar en el futuro, salvo que sea un objeto o un arreglo, pero esto es porque no estamos modificando su tipo sino su contenido, sino lo inicializas js por defecto le va a asignar el valor undefined pero esto es un error.