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

Arrow function y enlace léxico

23/55
Recursos

Aportes 15

Preguntas 5

Ordenar por:

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

Las Arrow Function son útiles porque permiten: * Escribir métodos más concisos * Simplificar una línea de código para que sea más legible * Aprovechar las características de retorno implícito y el no uso de paréntesis * Olvidarse de manejar el contexto this * Definir de manera compacta una función convencional * Eliminar las llaves y la palabra return si la función tiene solamente una sentencia que devuelve un valor * Reducir el código aún más utilizando parámetros
Cuando se usa una función flecha como método de un objeto, el `this` dentro de la función flecha no apunta al objeto que invocó el método. En cambio, el valor de `this` se hereda del contexto de ejecución en el que se definió la función flecha. Esto significa que `this` se refiere al `this` del entorno circundante (en el que se creó la función), y no puede ser cambiado con métodos como `call`, `apply` o `bind`. O sea en este ejemplo this de la arrow function apunta al objeto global window. Corregirme si estoy mal por el bien de los demás compañeros. Muchas gracias
**APUNTES:** ![](https://static.platzi.com/media/user_upload/image-2ab0471f-cb03-4dae-9077-4bdbb4449614.jpg)
Hola, He estado revisando la información que mencionaste pero no logro encontrar el recurso específico, ¿Podrías ayudarme a ubicarlo o confirmas si ha sido removido? Saludos !
Implementando Arrow Function en mi proyecto para el curso: ```js /** * Validamos que el ID de la tarea cumpla con un criterio específico para poder trabajar con las tareas. * @param {number} taskId * @returns {boolean} si no se cumple la validación nos retorna un true, en caso contrario false. */ const validateTaskId = (taskId) => { const restultValidation = taskId < 1 || taskId > arrOfTasks.length ? true : false; return restultValidation; } ```
Buenos dias Profe, Disculpe, hay alguna manera que usted pueda escribir en espanol los nombres de las funciones y solo dejar en Ingles las palabras reservadas de JS? Porque entiendo que usted no habla Ingles pero su pronunciacion me confunde aun mas y veo que le toma mas tiempo escribir en Ingles palabras que no son reservadas de JS. Todavia no sincronizo con el metodo de ensenanza en Platzi, pero aqui en Usa el tiempo es Oro debido al alto costo de vida y la mucha competencia. En Usa estamos acostumbrados a ser muy preciso en teimpo record. Es solo un feedback de un estudiante de Usa. Muchas gracias Profe Stephanie,
## Funciones tradicionales y Arrow Functions * En esta clase se habló sobre las funciones tradicionales y el lexical binding. * Se explicó cómo crear funciones tradicionales con un nombre, parámetros, cuerpo y llamado de función. * Se introdujeron las arrow functions como una alternativa más concisa y sin vinculación de contexto (this). ## Características de las funciones tradicionales * Tienen la palabra clave `function`, un nombre, parámetros y un cuerpo. * Permiten manipular el contexto de ejecución utilizando `this`. ## Arrow Functions * Las arrow functions eliminan la necesidad de la palabra clave `function`. * Usan la sintaxis `const nombreFunción = (parámetros) => { cuerpo }`. * Simplifican la creación de funciones y no vinculan el contexto de `this`. ## Ejemplos de creación de funciones * **Función tradicional:**const saludo = function(name) { return `Hola, ${name}`; } * **Arrow function con retorno explícito:**const saludo = (name) => { return `Hola, ${name}`; } * **Arrow function con retorno implícito:**const saludo = name => `Hola, ${name}`; * **Arrow function con múltiples parámetros:**const saludo = (name, lastName) => `Hola, yo soy ${name} ${lastName}`; ## Lexical Binding y contexto de ejecución * **Función tradicional:**const fictionalCharacter = { name: 'Uncle Ben', messageWithTraditionalFunction: function(message) { console.log(`${this.name} dice: ${message}`); } } fictionalCharacter.messageWithTraditionalFunction('With great power comes great responsibility'); * **Arrow function:**const fictionalCharacter = { name: 'Uncle Ben', messageWithArrowFunction: (message) => { console.log(`${this.name} dice: ${message}`); } } fictionalCharacter.messageWithArrowFunction('Beware of Doctor Octopus'); En el ejemplo anterior, la arrow function no tiene su propio `this`, por lo que `this.name` no se vincula correctamente al objeto `fictionalCharacter`. ## Resumen * Las arrow functions son útiles para escribir funciones más concisas y sin vinculación de contexto. * Las funciones tradicionales permiten manipular el contexto de ejecución utilizando `this`. * El lexical binding es una característica clave de las arrow functions, que no vinculan `this` al contexto del objeto. ## Próximos pasos * Practicar la creación de funciones tradicionales y arrow functions. * Experimentar con el lexical binding y entender cómo afecta el comportamiento de `this`. * Usar extensiones y herramientas para evitar errores tipográficos en el código.
![]()const functionalCaracter = { name: 'Tio Ben', mensajeConTradicionalFuncion: function (message) { console.log(`${this.name} dice: ${message}`); }, mensajeConArrowFuncion: (message) => { console.log(` ${functionalCaracter.name} dice: ${message}`); } } functionalCaracter.mensajeConTradicionalFuncion('Un gran poder conlleva una gran responsabilidad.');functionalCaracter.mensajeConArrowFuncion('Cuidado con el doctor Octopus');```js const functionalCaracter = { name: 'Tio Ben', mensajeConTradicionalFuncion: function (message) { console.log(`${this.name} dice: ${message}`); }, mensajeConArrowFuncion: (message) => { console.log(` ${functionalCaracter.name} dice: ${message}`); } } functionalCaracter.mensajeConTradicionalFuncion('Un gran poder conlleva una gran responsabilidad.'); functionalCaracter.mensajeConArrowFuncion('Cuidado con el doctor Octopus'); ```
Hay un par de maneras de resolver el problema de lexical binding a las arrow functions. Esta es una de ellas. Declararla dentro de una función "tradicional" y pasarle como el contexto otra variable: . ```js const character = { name: 'Peter Parker', messageTradFunction: function (message) { return `Hi, I'm ${this.name}, and ${message}` }, messageArrowFun: (message) => `Hi, I'm ${this.name}, and ${message}`, messageArrowFunThis: function (message) { that = this const arrow_fun = (message, that) => `Hi, I'm ${that.name}, and ${message}` return arrow_fun(message, that) } } const phrase = "I'm just a kid from Queens." console.log(character.messageTradFunction(phrase)) // Hi, I'm Peter Parker, and I'm just a kid from Queens. console.log(character.messageArrowFun(phrase)) // Hi, I'm undefined, and I'm just a kid from Queens. console.log(character.messageArrowFunThis(phrase)) // Hi, I'm Peter Parker, and I'm just a kid from Queens. ```
arrow functions forevah
Las Arrow Function son muy útiles ya que las mismas permiten: * Escribir métodos más concisos y precisos ayudándonos a identificar las funciones nombradas, lo cual a la hora de escribir nuestro código nos aportan mucho al tener que identificarlos. * Aprovechar las características de retorno implícito y el no uso de paréntesis * Olvidarse de manejar el contexto this * Definir de manera compacta una función convencional * Eliminar las llaves y la palabra return si la función tiene solamente una sentencia que devuelve un valor * Reducir el código aún más utilizando parámetros
* El contexto this se refiere al objeto sobre el cual se esta ejecutando una function. * Las arrow function heredan el contexto this de su entorno exterior, es decir lo heredan. * Las funciones tradicionales generan un nuevo contexto. * Si en un contexto global (fuera de una función) usamos el this, este sera el objeto global (window). * Entonces en este caso para la función ***incrementar***, si queremos heredar el contexto this, no nos conviene usar una function tradicional, sino una array function. ```js function Persona () { this.edad = 0 function incrementar () { this.edad++ console.log(this.edad) } } const p = new Persona () ```
![](https://static.platzi.com/media/user_upload/image-13742daf-8fb1-4cf0-a895-79d90e64a2a6.jpg) ![](https://static.platzi.com/media/user_upload/image-25f141e4-70de-4d8c-8ba0-8062164bcf5a.jpg)
Creo que me había hecho falta reiterar que se pueden quitar las llaves. Lo comprobé así: messageWithArrowFunction2: message => console.log(`${this.name} says: ${message}`) Por supuesto también devuelve undefined
Me enamoré de las Arrow function ![]()![](https://static.platzi.com/media/user_upload/image-2c6da402-fd31-48df-a892-b94a84dbb02c.jpg)