Introducción a JavaScript
¿Por qué aprender JavaScript?
¡Hola Mundo! en Mac
¡Hola Mundo! en Windows
Anatomía de una variable
Tipos de datos en JavaScript
Creación de strings
Operadores aritméticos
Conversión de tipos: Type Casting y Coerción
Conversión de tipos explícita e implícita
Estructuras de Control y Lógica
Operadores de comparación
Operadores lógicos
Ejecución condicional: if
Ejercicio: Adivina el número
Ejecución condicional: switch
Loop: for
Loop: for of
Loop: for in
Loop: while
Loop: do while
Funciones y This
Anatomía de una función
Funciones vs Métodos
Funciones puras e impuras
Arrow function y enlace léxico
Contextos de ejecución y scope chain
¿Qué es Closure?
Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?
Manipulación de Arrays
Introducción a Arrays
Mutabilidad e inmutabilidad de Arrays
Modificación básica del final con push( ), pop( )
Iteración con map( ) y forEach( )
Filtrado y reducción con filter( ) y reduce( )
Búsqueda de elementos con find( ) y findIndex( )
Crear copias con slice( )
Spread operator: casos de uso
Programación Orientada a Objetos
Anatomía de un Objeto
Trabajando con objetos en JavaScript
Función constructora
¿Qué es una clase?
Prototipos y herencias
Herencia en la práctica
Prototipos en la práctica
this en JavaScript
Proyecto: Crea una red social
Proyecto: Crea una red social parte 2
Asincronía en JavaScript
¿Cómo funciona el JavaScript Engine?
Promesas en JavaScript
Usando Async y await en JavaScript
For await of
¿Cómo funciona la web?
¿Cómo funciona HTTP?
Método GET en JavaScript
Método POST en JavaScript
Método DELETE en JavaScript
Importancia del id en el método DELETE
ECMAScript 6 y tus siguientes pasos
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
What are Arrow Functions and how do they differ from traditional functions?
Arrow Functions have revolutionized the way we write JavaScript code. By replacing traditional functions, they simplify code and avoid context issues. But why are they so important and how exactly are they different from traditional functions? We explore this essential concept of modern development.
Why use Arrow Functions if we already have traditional functions?
Traditional functions in JavaScript, while effective, are often large and unwieldy, especially in the context of this handling. This is where Arrow Functions come into play. The main benefits are:
- Conciseness: by eliminating the word "function" and using an arrow
=>, the code becomes more compact. - Lexical binding of
this: Arrow Functions do not have their ownthiscontext, which is a relief in situations where you need to maintain a fixed context.
How to transform traditional functions into Arrow Functions?
Let's transform a traditional function to an Arrow Function to illustrate this evolution.
// Traditional Functionconst greeting = function(name) { return `Hello ${name}`;};
// Arrow Functionconst greetingNew = (name) => `Hello ${name}`;We can see that we have simplified the declaration by removing the word function and using an arrow.
When to use an implicit return?
The simplicity of Arrow Functions allows us to use implicit returns, which means that we do not need to explicitly write return nor the braces {} when the whole body of the function is an expression.
// Implicit returnconst greetingImplicit = name => `Hello ${name}`;This advantage is most obvious with functions that perform simple operations.
How to handle multiple parameters?
When working with multiple parameters, improper use of parentheses can cause errors. In Arrow Functions, parentheses are necessary only when there are multiple parameters.
const greetingComplete = (firstName, lastName) => `Hello, this is ${firstName} ${lastName}`;By keeping the parentheses, we manage the parameters smoothly.
Lexical Binding: A Challenge Solved
Arrow Functions facilitate what is known as lexical binding, especially in the handling of this objects and contexts. Let's see a practical example:
const characterFictitious character = { name: "uncle Ben", messageConTraditionalFunction: function(message) { console.log(`${this.name} says: ${message}`); }, messageConArrowFunction: (message) => { console.log(`${this.name} says: ${message}`); } } };
characterFictitious.messageConTraditionalFunction("With great power comes great responsibility");characterFictitious.messageConArrowFunction("Beware of Dr. Octopus");In this example, the traditional function correctly accesses the this.name, while the Arrow Function does not, since Arrow Functions do not bind their own this.
Recommendations to improve your code with Arrow Functions
- Opt for Arrow Functions for short and simple expressions.
- Use traditional functions when you require
thisin object contexts. - Test your changes: Use code correction tools to avoid typos, especially if you program in other languages.
Arrow Functions not only simplify code, but also solve common problems associated with this, allowing you to focus more on logic and less on context handling. Continue to explore and experiment to discover how they can transform your programming style.
Contributions 32
Questions 5
Sort by:
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
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 !
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,
**APUNTES:**
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;
}
```
Para reparar el arrow function:
```js
const fictionalCharacter = {
name: 'Uncle Ben',
messageWithTraditionalFunction: function (message) {
console.log(`${this.name} says: ${message}`)
},
messageWithArrowFunction: (message) => {
console.log(`${fictionalCharacter.name} says: ${message}`) // Usar directamente fictionalCharacter
}
}
fictionalCharacter.messageWithTraditionalFunction('With great power comes great responsability.');
fictionalCharacter.messageWithArrowFunction('Beware of Doctor Octopus.');
```
Ya pude entender 💆👏
Para quienes no entendieron lo que sucedió al final:
El problema está en la segunda función, `messageWithArrowFunction`. Estás usando una **arrow function =>** en lugar de una función tradicional.
### 📌 **Explicación**:
Las **arrow functions** **no tienen su propio this,** sino que heredan el `this` del **ámbito en el que fueron definidas**. En este caso, `messageWithArrowFunction` se define dentro de `finctionalCaracter`, pero **no tiene acceso al rhis del objeto**, sino al `this` global o del contexto externo.
Entonces, cuando haces:
jsCopiarEditar`messageWithArrowFunction: (message`) => {
`` console.log(`${this.name} says: ${message}```);
}
El `this.name` **no apunta al objeto finctionalCaracter**, sino al `this` global, que en un entorno de ejecución de Node.js sería `undefined` (o en el navegador, en modo no estricto, podría ser `window`).
### 🚀 **Solución**
Cambia la arrow function por una función normal.
La vinculación se refiere al contexto en el que se ejecuta una función, lo que se indica con la palabra clave `this`. En el caso de las funciones tradicionales, `this` se refiere al objeto que invoca la función. En cambio, las arrow functions no tienen su propio `this`, sino que heredan el `this` del contexto léxico donde se definieron. Esto evita confusiones con el contexto en el que se ejecutan, lo que se conoce como enlace léxico.
La flecha `=>` se utiliza en JavaScript para definir **arrow functions** o funciones flecha. Estas funciones permiten escribir funciones de manera más concisa y manejan el contexto del `this` de manera diferente a las funciones tradicionales.
Por ejemplo:
```javascript
const suma = (a, b) => a + b;
```
En este caso, `suma` es una función que toma dos parámetros y retorna su suma. Las funciones flecha son ideales para evitar problemas de vinculación de contexto, especialmente al trabajar con métodos de objetos o callbacks.
Una funcion arrow son muy utilizados y nos ayudan a hacer mas corto el codigo y para evitar contexto previo y simplificarlas.
`const almuerzo = (proteina, verdura) => {`
``return `${proteina} ${verdura}`}``
`}`
`almuerzo('🍔','🥕')`
Podemos dejarlo en una sola linea, en este caso el retorno seria implicito:
`` const newGreetingImplicit = (name) => `Hi, ${name}` ``
De este modo mantendriamos la misma estructura pero simplifacamos mas el codigo.
El Lexical Binding nos sirve para identificar que el valor de ciertas variables o de `this` en una función depende de **dónde** y **cómo** fue declarada la función
Me parece tenaz que el módulo se llama funciones y this, y no ha habido una sola clase explicando el this. Me parece tenaz que me toque estar preguntándole a chatgpt al final de cada clase para entender cosas.
```js
let a = prompt("Ingrese su carne preferidad")
let b = prompt("Igrese con que desea su carne:")
function almuerzo (carne, complemento){
return `${carne} y ${complemento}`
}
let plato = almuerzo(a, b)
console.log(`Su plato esta compuesto por ${plato}`)
```Un ejemplo de como estoy comprendiendo este lenguaje
me gusta mas con arrow function. Me estoy enfocando en React y la verdad se usan mucho.
Un Gran poder conlleva una gran responsabilidad
buenos dias compañeros algun me podria indicar algun enlace para una comunidad de desarrolladores que esten iniciando
\[Contexto de ejecución de JavaScript: cómo funciona JS en segundo plano]\(https://www.freecodecamp.org/news/how-javascript-works-behind-the-scene-javascript-execution-context/)
\[Javascript Arrow Function]\(https://www.programiz.com/javascript/arrow-function)
Por si alguno se lo preguntaba, las comillas que usan se llaman backticks. Aquí lo que me escplicó Chatgpt
1\. **¿Por qué se usan backticks?**
Los **template literals** permiten:
* Insertar variables o expresiones directamente dentro de una cadena usando `${}`.
* Escribir cadenas de texto en **múltiples líneas** sin necesidad de usar el carácter `\n` para saltos de línea.
* Crear **interpolación de variables**, lo que hace el código más legible y fácil de mantener.
### 2. **¿Por qué el símbolo** `$`**?**
El `${}` es una **sintaxis de interpolación** que permite insertar el valor de una variable o expresión dentro de la cadena de texto.
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.
```
```js
padre = {
a: function () { console.log(this); },
b: () => { console.log(this); },
};
padre.a(); // { a: f(), b: f() } (el padre)
padre.b(); // Window
```padre = {
a: function () { console.log(this); },
b: () => { console.log(this); },
};
padre.a(); // { a: f(), b: f() } (el padre)
padre.b(); // Window
Esta es una **diferencia clave** que hay que tener bien en cuenta a la hora de trabajar con las **arrow function** de Javascript:
* 1️⃣ En la función `a()`, una función tradicional, el `this` devuelve el objeto padre de la función.
* 2️⃣ En la función `b()`, una arrow function, el `this` devuelve el objeto `Window` o `globalThis`.
Cuando trabajamos con **funciones tradicionales**, el valor de `this` hace referencia a su «elemento padre». Sin embargo, cuando trabajamos con **arrow functions**, el valor de `this` no se establece. Esto es un punto muy interesante que podemos utilizar a nuestro favor cuando trabajamos con varios niveles de objetos o funciones.
Sin embargo, si combinamos funciones arrow dentro de funciones tradicionales, el `this` que usemos en una **arrow function** va a apuntar realmente al `this` de la función tradicional que se encuentre más cerca subiendo hacia sus padres. Por esta razón, una buena práctica es utilizar funciones tradicionales como las funciones de primer nivel y, luego, en su interior o en funciones callbacks, utilizar **arrow functions**.
no me deja imprimir las funciones arrow, me los envio como texto
Si necesitas que una función de flecha acceda a `name`, puedes definir la función de flecha dentro de un método que tenga acceso a `this`, o referenciar directamente el objeto
En las arrow functions, `this` no se refiere al objeto que la contiene, como en las funciones tradicionales, sino que toma el valor de `this` del contexto donde fue definida. Esto se debe a que las arrow functions tienen un "enlace léxico", lo que significa que no crean su propio contexto de ejecución. Por lo tanto, si necesitas usar `this` dentro de una arrow function, asegúrate de que esté definida en el contexto correcto. Esto es una de las principales características que las diferencia de las funciones tradicionales en JavaScript.
## 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');
```
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 ()
```
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
![]()
Want to see more contributions, questions and answers from the community?