Funciones de flecha y el this

Clase 15 de 24 • Curso de Clean Code y Buenas Prácticas con JavaScript

Clase anteriorSiguiente clase

José Antonio Medina Sánchez

student•

Saludos!!!

Reinaldo Mendoza

student•

Ja, pero no

freddy conto mena

student•

(function)(); para auto invocar es mas limpio.

José Antonio Medina Sánchez

student•

Yo utilizaría las funciones de flecha con los array methods, como lo son: some, reduce, filter, find, every, etc. Saludos!!!

Sergio Brandon De Lucio Chavero

student•

personalmente las uso en todos lados xD

Bryan Castano

student•

Hiii, Yo tambien las uso dentro de Array methods, \n

Genial .

LEONARD CUENCA

student•

Clase 15: Funciones de flecha y el this

Una expresión de función flecha es una alternativa compacta a una expresión de función tradicional, pero es limitada y no se puede utilizar en todas las situaciones.
Diferencias y limitaciones: No tiene sus propios enlaces a this o super y no se debe usar como métodos.
Esta funcionalidad viene con el EMAC6
Cuando creas una arrow functions su this queda relacionado al ambito externo.

// El return está implícito sino añadimos las llaves.
const getResult = () => "Results";

//Sin arrows functions
[1, 2, 3]
  .map(function (n) {
    return n * 2;
  })

  [
    // Con arrows functions
    (1, 2, 3)
  ].map((n) => n * 2);

// Ejemplos del this
const counter = {
  number: 0,
  increase() {
    setInterval(() => console.log(++this.number), 1000);
  },
};

counter.increase(); //> 1 2 3 4 5

const counter = {
  number: 0,
  increase() {
    setInterval(function () {
      console.log(++this.number);
    }, 1000);
  },
};

counter.increase(); //> NaN, NaN, NaN, NaN, NaN

const counter = {
  number: 0,
  increase() {
    setInterval(
      function () {
        console.log(++this.number);
      }.bind(this),
      1000
    );
  },
};

counter.increase(); //> 1 2 3 4 5

Markin Piero Pulache Guarniz

student•

buen aporte

Maday Choque

student•

los callback con función flecha heredan el this del contenedor

Kevin Giovanni Cano Blanco

student•

A mi me gustan las arrow function por que son mas simples a la vista.

Edith Ortiz

student•

¿Cuándo conviene usar this?

Brandon Lee Aguero Fernandez

student•

Sería cuando trabajes con prototipos o con la sintaxis CLASS(Opinión personal). Pero...lo puedes usar también en objetos para construir métodos. CONCLUSIÓN: Usalo según tus necesidades.

Juan Camilo Salazar Rojas

student•

Tengo una duda. ¿Es recomendable usar función flecha en vez de de las funciones normales?

Sandra Rosa Arroyo Paredes

student•

La elección entre funciones flecha y funciones normales depende del contexto y el propósito específico. No hay una recomendación universal de usar siempre un tipo sobre el otro.

Recomendaciones de uso:

Usa funciones flecha cuando:

Necesitas una función corta y simple, especialmente para callbacks en línea.
Quieres preservar el contexto de this del ámbito que la contiene.
Trabajas con métodos de array funcionales como map, filter, reduce.
Necesitas una sintaxis más concisa y no te preocupa la vinculación de this.

Usa funciones normales cuando:

Defines métodos de objetos que necesitan acceder a this.
Creas funciones constructoras (con new).
Necesitas acceder al objeto arguments.
Requieres hoisting (elevación de la función).
Necesitas la flexibilidad de vincular, desvincular o re-vincular this.

Consideraciones adicionales:

Las funciones flecha no tienen su propio this, lo que puede ser ventajoso o problemático dependiendo del caso.
Las funciones normales son más flexibles en términos de cómo se puede manipular this.
Las funciones flecha no pueden ser usadas como constructores.
Si necesitas que una función sea llamada con diferentes contextos de this, usa una función normal.

En resumen, no es recomendable usar exclusivamente funciones flecha o funciones normales. Lo mejor es entender las diferencias y elegir el tipo de función adecuado según el contexto y los requisitos específicos de tu código. La clave está en usar cada tipo de función donde sus características particulares sean más beneficiosas.

Guillermo Jimenez

student•

El código esta sencillo de entender pero la explicacion deberia ser mas aprofundida de por que funciona o enfatizar mas en el estandar ECM6

José Miguel Vásquez Guerra

student•

La gente que programa con fondo blanco ha de vivir en el sol.

Ana Rotela Cabrera

student•

Resumen de la clase

Luis Eduardo Payano Villar

student•

const counter ={
    number: 0,
    increase(){
        setInterval(() =>console.log(++this.number), 100);
    },
};

counter.increase();

Misael Valdez

student•

Alguien sabe que tema usa la profe en su editor? Esta muy bueno!

José Miguel Vásquez Guerra

student•

Ya lo he preguntado antes, pero creo que no hay notificación para cuando te responden y no recuerdo en cuales videos lo hice x_X

Funciones de flecha y el this

Introducción al Clean Code

Deuda técnica y refactorización de código

Reglas del diseño simple

Qué es Clean Code

Nombre y uso de las variables

Uso correcto de var, let y const

Reglas para la nomenclatura

Cómo nombrar según el tipo de dato

Nombres de Variables y Funciones Correctos en JavaScript

Ámbito de las variables

Ámbito global

Ámbito local o de función

Ámbito de bloque

Ámbito estático

Hoisting

Funciones

Declaración y expresión de funciones

Parámetros y argumentos

Funciones de flecha y el this

Clases

POO con ES6 (constructores, métodos y herencia)

Herencia en JavaScript

Tamaño reducido (responsabilidad única)

Organización

Optimizaciones

Cuándo usar comentarios

Formato coherente (codear en equipos)

Principio DRY

Tipos de Algoritmos y Complejidad Big O en JavaScript

Cierre

Sigue aprendiendo JavaScript