JavaScript - Arrow Functions

More examples are in the TypeScript section.

There are many ways to define a function in JavaScript, and the modern specification (ES6) introduced a new way, arrow functions . It is a way to define a function without typing the keyword "function", but rather by using an arrow symbol. This shorter syntax is preferable not only because it's shorter, but also because it behaves more predictably with closures.

Syntax basics

• Do not use the function keyword. const is preferred.
• You can omit the curly braces if you can define your return statement (function body) in one line.
• If you do omit the curly braces and use a single line, you can use optional parenthesis to encapsulate an expression.
• If you use curly braces to define your return statement (function body), then you must include a return statement.
• They are not well suited for defining object methods.

// example 1
// you can omit the arguments () and the braces & return statement.
const SayHello => "Hello";

// example 2
// you can include the arguments () if you like and omit the braces & return statement.
const SayHello = () => "Hello";

// example 3
// one line return. you can omit the arguments () and the braces & return statement.
const squareIt = (x) => x * x;

// example 4
// one line return. You can do this if you like....
const squareIt = (x) => (x * x);

// example 5
// multiple lines of return code - I need to use curly-braces and return statement
const MyFunction = (arg1, agr2) =>
{
    let results = 0;
    // fake logic...
    if(arg1 > arg2)
    {
        // logic here
        // results = ....
    }
    else
    {
        // logic here
        // results = ....
    }
    return results;
});

Confusion about 'this'

A regular function always binds the value for its this keyword for its caller. If it didn't have an explicit caller, the value of this keyword will be determined by the calling environment.

An arrow function does not care who calls it, while a regular function cares very much about that. The this keyword in an arrow function is determined on where the arrow function was defined.

'this' in regular functions == who called it? 'this' in arrow functions == where was this defined?

function RegFunction()
{
    // old boring global function.
    // who is "this"? The caller.
    // it always binds the value for it's "this" keyword to the caller.
    // this might be better known as "caller" in this scenario.
    // if it didn't have an explicit caller, it is bound to the calling environment like Window.
    // this is the Window object
    console.log(`RegFunction: ${this}`);
    console.dir(this);
    return this;
}

// notice that `this` is the **person** object.
// 'this' is contained within this object scope
let person =
{
    FirstName: "Penelope",
    LastName: "Barrymore",
    FullName: function ()
    {
        console.log(`Person Obj: ${this}`);
        console.dir(this);
        return this.FirstName + " " + this.LastName;
    }
}

// Arrow function example
// notice that `this` is the window object again even though it was the car
// object who called it. Why? Because it, the function, was defined in the Window object.
let CalculateCost = () =>
{
    console.log(`CalculateCost: ${this}`);
    console.dir(this);
    return 1000000 * 1;
}

let car =
{
    Color: "Red",
    Speed: "Fast",
    Cost: CalculateCost
}

let testerObj =
{
    // the properties of this obj are defined by functions
    FunctProp1: function () { console.log("FunctProp1", this); return this; },
    FunctProp2: () => { console.log("FunctProp2", this); return this; }
};

$(function ()
{
    $("#example1").text(RegFunction());
    $("#example2").text(person.FullName());
    $("#example3").text(car.Cost);
    $("#example4").text(testerObj.FunctProp1());
    $("#example5").text(testerObj.FunctProp2());
});