Angular/Typescript function(){} vs ()=>{}

Question

Angular/Typescript: Could someone please give an easily understandable explanation of the difference between function(){} and ()=>{}

I know it affects the this keyword but I am not exactly sure how. Please don't reference me to docs as docs aren't always easily understandable.

Answer 1

function(){} uses its own context, aka this refers to the function's context.

()=>{} (also named arrow functions) keep the context of the object where they are declared, which is why it's used a lot in callbacks, to avoid const that = this.