Link Search Menu Expand Document
Web Dev Two

Javascript Functions

Functions are one of the key building blocks of Javascript applications. The can be used to modularize your code and can be passed to other function as callbacks.

In this section will look into three topics you’ll run into when working with React:

  • Anonymous functions
  • “Arrow” functions
  • Functions as Object Properties

Table of Contents

  1. Standard Functions
  2. Anonymous Functions
  3. Callback Functions
  4. Arrow Functions
  5. Arrow Function Variants - No Braces
  6. Explicit* Return
  7. Arrow Function Variants - Unadorned
  8. Anonymous Arrow Callbacks
  9. Functions as Object Properties

Standard Functions

A standard function is defined like this:

function snail() {
  console.log("Hello Snail! 🐌");
}

snail(); // And called by name.

Anonymous Functions

Unnamed function are called anonymous*:

setTimeout(function(){ console.log("Hello Mail! 📨"; }, 500);

Anonymous functions can be assigned to variables:

let nail = function () {
  console.log("Hello Nail! 💅");
};

nail(); // And called liked named functions.

*Anonymous, derived from the Greek word ἀνωνυμία, anonymia, meaning “without a name” or “namelessness”.

Callback Functions

In Javascript functions can be passed as parameters to other functions. We call these “callback functions” as they aren’t executed immediately.

Example: setTimeout takes a callback function and a time in milliseconds as arguments. The callback function is executed after the provided time elapses.

function whale() {
  console.log("Hello Whale! 🐋");
}

let tail = function () {
  console.log("Hello Tail! 🦨");
};

setTimeout(whale, 500); // Named function as callback.

setTimeout(tail, 1500); // Variable-assigned anonymous function as callback.

// Inline anonymous callback functions are also handy:

setTimeout(function () {
  console.log("Hello Sail! ⛵");
}, 2000);

☝️ Callbacks can be named functions, anonymous functions, or anonymous functions assigned to variables.

Arrow Functions

Another way to define anonymous function is with the “arrow operator” =>:

let gale = () => {
  console.log("Hello Gale! 🌬️");
};

gale(); // Called by variable name.

Arrow functions can also be defined with parameters:

let rail = (times) => {
  for (let i = 0; i < times; i++) {
    console.log("Hello Rail! 🚊");
  }
};

rail(5);

Arrow Function Variants - No Braces

Arrow functions that contain a single statement can be written without curly braces.

These are called “implicit* return” functions.

let implicit = (word, emoji) => `Hello ${word}! ${emoji}`;

Implicit return functions automatically return the value of the function statement.

// Here, the implicit function returns a string which is then logged:
console.log(implicit("Trail", "🌠"));

// Hello Trail! 🌠

Explicit* Return

The above implicit function is equivalent to:

let explicit = (word, emoji) => {
  return `Hello ${word} ${emoji}`; // Explicit Return Statement
};

console.log(explicit("trail", "🌠"));

*Implicit means something implied but not stated directly. Explicit means something made clear and stated plainly.

Arrow Function Variants - Unadorned

One line, one argument, arrow functions can be written without parentheses or curly braces:

let unadorned = (emoji) => `Hello Scale! ${emoji}`;

console.log(unadorned("⚖️"));

// Hello Scale! ⚖️

Unadorned arrows are also implicit return functions.

⏳ Wait for it… We’ll use this style a lot in the coming sections on array helpers.

Resources

Anonymous Arrow Callbacks

Arrow functions are a nice way to define clear and concise callback functions.

Compare the readability of this regular callback:

setTimeout(function () {
  console.log("Hello Veil! 👰");
}, 225);

With the arrow version:

setTimeout(() => console.log("Hello Veil! 👰"), 225);

There’s a lot less “punctuation noise”, which makes the code easier to read for others.

Functions as Object Properties

Functions can be added to objects too:

const user = {
  username: "stungeye",
  age: 42,
  printInfo: function () {
    console.log(`${this.username} is ${this.age}.`);
  },
};

user.printInfo();

// "stungeye is 42."

Functions attached to objects are called methods.

⚠️ Warning: Arrow functions don’t bind to the object’s this so they don’t work well as object properties:

const brokenUser = {
  username: "stungeye",
  age: 42,
  printInfo: () => {
    console.log(`${this.username} is ${this.age}.`);
  },
};

user.printInfo(); // "undefined is undefined."

Resources