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)};

// build a class w/a constructor that accepts a name when instantiated
class Person {
    constructor(name){ = name; 

	//print name, traditional function call, it redefines "this" scope to the calling function (comes back empty)
        setTimeout(function() {
            console.log('Function: ' +; 
        }, 100)

	//...same exact print fn but uses fat arrow, "this" scope preserved to the method's scope (returns 'Rich')
        setTimeout(() => {
            console.log('Arrow: ' +; 
        }, 100)
let person = new Person('Rich');

Link your website to this page! Copy and paste the URL below:
Copyright 2021. All Rights Reserved.