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:

2 Días
12 Hrs
8 Min
30 Seg

¿Qué es una clase?

38/55
Resources

How have classes in JavaScript evolved since 2015?

Classes in JavaScript have undergone a significant transformation since the introduction of the current syntax in 2015. Previously, JavaScript used constructor functions to create objects, an efficient but complex method for some developers, especially those familiar with object-oriented programming languages such as Java. The new class syntax not only simplifies this process, but also provides a "sugar syntax" that is more intuitive and familiar to programmers.

What are classes in JavaScript?

A class in JavaScript acts as a blueprint for creating objects. Think of it as a mold, from which multiple instances or copies of an object can be built. The class definition makes it easier to structure and organize coding, as it allows you to clearly separate the properties and methods that characterize it.

How is a class defined with the new JavaScript syntax?

The creation of a class begins with the reserved word class, followed by the class name, which by convention, begins with a capital letter. After defining the body of the class with braces {}, the constructor method is introduced. A simple example would be a class Person with properties name and age.

class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`); } }}

How do you create instances of a class in JavaScript?

An instance is a concrete manifestation of the class. Using the word new together with the class name allows you to create these instances. This process activates the constructor, assigning values to the defined properties.

const persona1 = new Persona('Mariana', 25);persona1.greet(); // Hello, my name is Mariana and I am 25 years old.

What are the benefits of classes in object-oriented programming?

  • Simplicity and clarity: The syntax of classes is more natural and simple for those who come from other object-oriented programming languages.
  • Code reuse: Blueprints allow the creation of multiple similar objects without the need to redefine their characteristics each time.
  • Code organization: By clearly separating methods and properties, classes make code easier to maintain and understand.
  • Encapsulation: Although JavaScript does not implement encapsulation in a robust way like other languages, classes allow better centralization of properties and methods.

How does this new syntax compare to previous methods?

Prior to 2015, constructor functions were the primary alternative for emulating class structures. However, these could be less intuitive, especially for those unaccustomed to the detailed use of prototypes and this in their implementation. Modern class syntax is cleaner and more aligned with other languages, reducing barriers for those migrating from older platforms.

JavaScript is constantly reinventing itself, and the ability to adapt to these evolutions allows developers to create more robust and efficient applications. Learning about classes not only opens the door to more structured code, but also strengthens the knowledge base in object-oriented programming. Continue to explore and strengthen your skills in JavaScript and beyond!

Contributions 18

Questions 1

Sort by:

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

Mini resumen: Es mejor entoces utilizar clases en lugar de funciones constructoras pues eso es del pasado pero se ven para entender código más moderno, ambas generan el prototipo.
Las **clases** en JavaScript son una forma moderna y más sencilla de crear objetos y manejar herencia. Son una "envoltura" para las funciones constructoras tradicionales que proporciona una sintaxis más clara y concisa. Aunque las clases son en realidad funciones en el trasfondo, hacen que el código sea más fácil de entender y de mantener. **¿Cómo se utiliza?** Las clases se utilizan para crear objetos con propiedades y métodos de manera más estructurada. Dentro de una clase, se define un método especial llamado `constructor`, que es donde inicializamos las propiedades del objeto (es decir, aquí es donde la función constructora se integra). Luego, podemos crear instancias de la clase usando la palabra clave `new`, similar a cómo lo hacíamos con las funciones constructoras. ```js // Creacion de una clase con su constructor class Auto { // Definicion del constructor constructor(marca,modelo,año){ this.marca = marca; this.modelo = modelo; this.año = año; } // Creacion de metodo tocarBocina(){ console.log(`Bepp Beep soy ${this.marca} ${this.modelo} del año ${this.año}`); } } let auto1 = new Auto ("toyota","Corolla",2001); const auto2 = new Auto("Honda", "Civic", 2018); auto1.tocarBocina(); auto2.tocarBocina(); ``` * **Clase** `Auto`**:** Creamos una clase llamada `Auto`, que contiene un **constructor**. El constructor es como la función constructora que vimos antes, donde definimos las propiedades que tendrá cada objeto que creemos a partir de esta clase (marca, modelo, año). * **Método** `tocarBocina`**:** Dentro de la clase también definimos un método llamado `tocarBocina`, que accede a las propiedades del objeto usando `this` y emite un mensaje personalizado. * **Creación de instancias:** Luego, creamos dos autos (`auto1` y `auto2`) usando `new Auto()`, cada uno con diferentes valores para las propiedades `marca`, `modelo`, y `año`. Al llamar al método `tocarBocina` en cada instancia, obtenemos un mensaje único para cada auto.
Estructura de una clase: * Nos permite definir las propiedades de mi objeto (constructor). * Definición de métodos a compartir entre las instancias a crear. ```js class Objeto { constructor(var1, var2) { this.key1 = var1; this.key2 = var2 } metodo(){ // detalle de la funcion } } ```
La verdad que diego explica como los mismísimos dioses.
**RESUMEN:** ![](https://static.platzi.com/media/user_upload/image-49e3c02d-e0f2-453c-a4a3-744c6c346217.jpg)
Esto es un blue print: ![](https://t3.ftcdn.net/jpg/01/02/89/40/360_F_102894096_64nFPwpYxxKhCdetV4F4omfsF5DefOhb.jpg)
Sugar syntax El término **"syntactic sugar"** (o "azúcar sintáctica") se refiere a características en el lenguaje de programación que no añaden nuevas funcionalidades al lenguaje, pero hacen que el código sea más fácil de leer y escribir. Estas características ayudan a que el código sea más claro, conciso y, a menudo, más elegante.
JavaScript moderno utiliza clases para crear objetos con propiedades y métodos. Veamos un ejemplo simple: ```js class Coche { constructor(marca, modelo) { this.marca = marca; this.modelo = modelo; } describir() { return `Este coche es un ${this.marca} ${this.modelo}`; } } ``` ## **Puntos clave**: 1. `constructor`: Inicializa las propiedades del objeto. 2. `this`: Se refiere a la instancia actual del objeto. 3. Métodos: Funciones asociadas a la clase (como `describir()`). ## **Uso**: ```js const miCoche = new Coche("Toyota", "Corolla"); console.log(miCoche.describir()); // "Este coche es un Toyota Corolla" ``` Las clases simplifican la creación de múltiples objetos con estructura similar, mejorando la organización y reutilización del código.
\<// aqui estare trabajando con el metdo de clases class Persona{    constructor (nombre , apellido, edad, direccion){        this.nombre = nombre         this.apellido = apellido        this.edad = edad         this.direccion = direccion    }    saludar(){        console.log(`Hola mi nombre es: ${this.nombre}, mi apellido es: ${this.apellido} y mi edad ${this.edad} y yo vivo en ${this.direccion} bye.`)    }} // instacia de la persona const persona1 = new Persona("Lucas", "German",45,"Santo domingo barrio peligro") console.log(persona1)console.log(persona1.nombre) persona1.saludar() Persona.prototype.trabajo = "Trabajador">
`const persona1` es una instancia (objeto) de la clase `Persona`. La clase actúa como un molde para crear objetos, y `persona1` es un ejemplo específico creado a partir de esa clase. En resumen, `Persona` es la clase y `persona1` es el objeto.
Un "Blueprin" es un término que se usa en programación orientada a objetos para referirse a un "molde" o "plantilla" que define cómo crear objetos. En el contexto de JavaScript, una clase actúa como un blueprint. Define propiedades y métodos que las instancias de la clase tendrán. Al igual que un plano arquitectónico, permite construir múltiples objetos a partir de una única definición. Este concepto es clave en la POO, facilitando la organización y reutilización del código.
La "sugar syntax" o "sintaxis azucarada" se refiere a una forma de escribir código que es más legible o fácil de entender, pero que no introduce nuevas funcionalidades al lenguaje. En JavaScript, la sintaxis de clases es un ejemplo de sugar syntax, ya que simplifica la creación de objetos y clases en comparación con las funciones constructoras tradicionales. Esto facilita el trabajo de los desarrolladores al hacer que el código sea más claro y conciso, sin perder la funcionalidad subyacente.
ok cada ves esta mejorando // esta es una clase es algo mas moderno  con funcion y con class function Persona2(nombre,edad) {   this.nombre = nombre;   this.edad = edad;}const persona6 = new Persona2(34,"katy")console.log(persona6); Persona2.prototype.saludar = function(){  console.log(` hola me llamo ${this.edad} y tengo ${this.nombre} años `);}persona6.saludar(); class Persona {  constructor(nombre, edad) {    this.edad = edad;    this.nombre = nombre;  }  saludar() {    console.log(`hola mi nombre es ${this.nombre} y tengo ${this.edad} años como estan `) }}const persona3 =  new Persona("CARLOS",34)const persona4 =  new Persona("diego",24) console.log(persona3);console.log(persona4);
excelente clase me encanta class Persona {  constructor(nombre, edad) {    this.edad = edad;    this.nombre = nombre;  }  saludar() {    console.log(`hola mi nombre es ${this.nombre} y tengo ${this.edad} años como estan `) }}const persona3 =  new Persona("CARLOS",34)const persona4 =  new Persona("diego",24) console.log(persona3);console.log(persona4);
Me gusta este sweet code y esta sintaxis es mas legible y segue estandares de otros lenguages. Que bueno que JavaScript ultimamente se adapta a los estandares!
![](https://files.realpython.com/media/Syntactic-Sugar-in-Python_Watermarked-3.d721e975bba6.jpg) El azúcar sintáctico, o syntactic sugar en inglés,es un concepto de programación que permite hacer que la sintaxis de un lenguaje sea más legible y simple, sin alterar su funcionalidad. . En la imagen de arriba menciona algunas propiedades: * Legible * Limpio * Conciso * Seguro * Uso amigable
## Introducción a las clases en JavaScript * A partir de 2015, JavaScript presentó una nueva forma de definir estructuras orientadas a objetos. * No es algo completamente nuevo, sino una forma más cercana a otros lenguajes orientados a objetos, como Java. * Esta nueva estructura de clases es similar a una función constructora con una sintaxis diferente. ## Definición de clases * Una clase es un "molde" para crear objetos. * Se define usando la palabra reservada `class` seguida del nombre de la clase. * El nombre de la clase debe comenzar con una letra mayúscula. ## Ejemplo de clase en JavaScript class Persona { constructor(nombre, edad) { this.nombre = nombre; this.edad = edad; } saludar() { console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`); } } * En este ejemplo, se define una clase llamada `Persona` con un constructor y un método `saludar`. * El constructor recibe dos parámetros: `nombre` y `edad`. * El método `saludar` imprime un mensaje utilizando las propiedades de la clase. ## Crear instancias de una clase * Para crear una instancia de una clase, se utiliza la palabra reservada `new`. const persona1 = new Persona('Mariana', 25); persona1.saludar(); * En este ejemplo, se crea una instancia de la clase `Persona` llamada `persona1`. * La instancia se inicializa con los valores 'Mariana' y 25 para las propiedades `nombre` y `edad`. * El método `saludar` se llama en la instancia `persona1`, imprimiendo el mensaje correspondiente. ## Beneficios de usar clases * La sintaxis de clases en JavaScript permite definir objetos de manera más estructurada y clara. * Facilita la creación de múltiples instancias con propiedades y métodos comunes. * Alinea la sintaxis de JavaScript con otros lenguajes orientados a objetos, facilitando el aprendizaje y la migración de desarrolladores entre lenguajes. ## Próximos pasos * Practicar creando y utilizando clases en JavaScript para familiarizarse con la sintaxis y las funcionalidades. * Explorar la documentación oficial de JavaScript para profundizar en conceptos avanzados de clases, como herencia y métodos estáticos. * Aplicar el uso de clases en proyectos reales para aprovechar las ventajas de la programación orientada a objetos.
se puede utilizar el comando cl + tab para crear la palabra class mas rapido