Arrow Functions | Table O Contents

A concise way to template functions …

Note. The Flammarion Logo Badge in the page header above is an .svg image file set to the dimensions of 5% width, auto height, and zoom. Go ahead and test the zoom-out feature by hovering over the badge to engage the expansion of the image.

Function Statements

Hint. Watch the this keyword …

Note. The fat arrow => became the new symbol of Javascript functions with the release of ES6.

A standard function with a name in Javascript looks like this …

function a(x) {
  x = "This is a standard Javascript function with a name."
  return x;
}
console.log(`${x}`);
a();

Here, the a in the formula represents a label corresponding to the name of the function.

;where the variable placeholder x is coerced to the type string.

Note. A standard function without a name in Javascript is called an anonymous function.

Function Properties

The function a above takes one argument named x of which is inferred to be a string.

Note. Declaration of the x variable occurs at the point of the declaration of function a.

Function Methods

After declaring and initializing the property x, the next line in the function executes the log method of the Object console, itself inheriting from its parent Object window.

Execution

After the closing brace } of the function a, the code block then passes command back to the program.

The program then “calls” the a function to task from outside the boundaries of the code block.

Result

You may check the result of the program by …

  1. Copying and pasting the code into the source, snippets feature of the Chrome browser development tools,

  2. By right-clicking and saving the program as simple-func.js, and

  3. Then, by executing the program through the pressing of the cmd + enter keys of your development machine keyboard.

After the program executes, the result of the method log can be seen inside the Javascript console window, as follows:

This is a standard Javascript function with a name.
undefined

The program returns the String of x first, and secondly the type undefined.

As the type of variable x was inferred by the structure of its initializing, its type remains undefined.

Let Functions Become Arrows

More to come …

How to change a standard function in Javascript into an Arrow function

First, declare a global variable b …

var b;

Next, set a standard anonymous Javascript function equal to the declared global variable b, as follows:

b = function () {}

Now, leapfrog the argument undefined () from left-to-right with the keyword function…

And, in the process …

Magically change the keyword function into an Arrow function =>, as follows:

b = () => {
  "use strict";
  console.log(`This is a converted Javascript Arrow function with argument undefined.`);
}

Note. If the function body {…} contains a simple return statement only, then the set of curly braces {…} may be omitted, as well.

let c = function () { return "High Ya'll Once!"; }

As follows:

let d = () => "High Ya'll Twice!";

To execute any or all of the above functions:

Simply copy and paste the function into your browser console, and type one of the following execution commands:

a();
b();
c();
d();

Note. The act of first copying the function to your browser console will return undefined.

However, when you subsequently enter the respective execution command for the function into the console …

And, then press the Enter key …

The result of the function will then appear in the console.

IFEE Functions

Rule. All arrow functions are anonymous functions.

An anonymous function that calls itself internally from outside its braces {...}, but also from within its self-contained enclosing set of parenthesis (...) is called an …, or IFEE.

Higher Order Functions

// Declare an `object` named `user` ...
// Set the value of `user` to `key - value` pairs
const user = {
  name: "john",
  date_joined: 'May 12th, 2013'
}

The Algorithmic Steps B

// Task. Create a function to capitalize the first letter of the `attributes` of `property` name.
// Set the function to a constant `capitalize`
// The function may now be `called` w `capitalize`
// const capitalize = function (name) {
  // return the finished product of the function
  // return `${name.charAt(0).toUpperCase()}${name.slice(1)}`;
  // End of function
// }

Conversion

How to transfer the above main function from standard format to arrow format?

Algorithmic Steps

// Remove the `function` keyword from the formula.
// Insert the fat arrow `=>` between the declared function attribute(s), and
// The first curly brace.
// Note. Because there exists simply one parameter declared as an attribute ...
// Then, the set of parenthesis surrounding the parameter `name` may also be dropped.
// The set of curly braces enveloping the body of the function may be dropped, as well.
// Further, because an `Arrow Function` implicitly calls a `return` statement ...
// No explicit `return` keyword is required, either!

The Code B

const capitalize = name => 
  // implicitly return the finished product of the function
  `${name.charAt(0).toUpperCase()}${name.slice(1)}`;
  // End of Arrow function
console.log(capitalize('roberto'))

Higher Order

Note. All callback functions are Higher Order functions

The Code C

function greetUser(name, callback) {
  return callback(capitalize(name));
}

The Algorithmic Steps

// Remember from above ...
// Insert the fat arrow `=>` between the declared function attribute(s), and
// The first curly brace.
// const result = greetUser(user.name, (name) => {
  // `Hi there, ${name}`;
// });

// console.log(result);

The Code D

const result = greetUser(user.name, name => `Hi there, ${name}`);
console.log(result)

Last Subtitle

More to come …

Note. The above synopsis was derived from a video lecture written, produced and performed by …

Reed Barger: [1].

For additional reference on the topic of De-structuring see the Mozilla Developer Network: [2]

For a working Internet development platform for Javascript Closures see Scrimba: [3]

  1. Javascript: The Complete Developer, 2020

  2. Mozilla Developer Network

  3. Scrimba Javascript Developer Platform

Support

Please support the co-workers who aggregate the Source Links for our projects.

Patreon

Like what you see in this project? If so, then support the authors and machine-elves who aggregate the source links and pages for our projects via Patreon.