Javascript Fat Arrows

JavaScript Fat Arrows

... sure, fat arrow functions mean a few less keys to type, but the real value is in the reference to THIS; standard functions use THIS to refer to whatever object called the function, and the value of THIS would change accordingly. Fat arrows preserve the value of THIS to generate a consistent reference.

USAGE: Copy and paste the code samples below into the Javascript console in your browser, then simply hit return on your keyboard to see the code in action.

//3rd example fat arrow demonstrating "this"
//use a .html page with a <button>Test</button> element
var button = document.querySelector('button');
//fat arrow this maintains the scope of the function
var fn2 = () => {console.log(this)};
//old fashioned functions this refers to object that is calling the function
function fn() {console.log(this)};
button.addEventListener('click',fn2);


Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/javascript/javascript-fat-arrows/
Copyright 2019. All Rights Reserved.