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