Functions

Let’s start with the easiest conception - a function.

Negotiation: a function name should be a verb.

Rest operator:

function customFunciton(a, b, ...rest) {
    // ... rest is an array of additional parameters.
}

Function declaration

function getRectArea(width, height) {
  return width * height;
};

We can use such functions even before declaration.

Function expression

var getRectArea = function(width, height) {
  return width * height;
};

We can use such function only after initiating a variable.

Arrow functions

In ES6 and later, there is a shorthand syntax for defining functions. This concise syntax uses => to separate the argument list from the function body, so functions defined this way are known as arrow functions.

Arrow functions are most commonly used when you want to pass an unnamed function as an argument to another function. The preceding code looks like this when rewritten to use arrow functions:

Arrow function doesn’t have its this context, but it takes this context from a parent function.

const plus1 = x => x + 1;        // The input x maps to the output x + 1
const square = x => x * x;      // The input x maps to the output x * x

plus1(y)                        // => 4: function invocation is the same
square(plus1(y))                // => 16

// Equal definitions:
const calc = (a, b) => a + b;
const calc = (a, b) => { return a + b; };

Callback functions

Docs.

function showName(name, callback) {
    console.log(name);
    callback();
}

showName("Andrew", () => {
    console.log("Done!");
});

Closures

Detailed description of closures.

Before understanding closures let’s understand what is lexical environment. In JavaScript, every running function and code block {...} have an internal (hidden) associated object known as the lexical environment.

The Lexical Environment object consists of two parts:

• Environment Record – an object that stores all local variables as its properties (including this).
• A reference to the outer lexical environment, the one associated with the outer code.

Roughly speaking, a running function has links to the inner variables (inner lexical environment), and has links to the outer variables (outer lexical environment). Moreover, these environment links are created at the time the function is created, and not when or where it is called.

function makeCounter() {
  let count = 0;

  return function() {
    return count++;
  };
}

let counter = makeCounter();

In this example, counter will have access to count because it is still placed in its outer lexical environment.

// Lexical environment of the function refers to the outer lexical environment object
// which still has the "count" variable:
// counter.[[Environment]] -> {count: 0} 

Use Scope section in your JS debugger to study this.

After a function is finished executing, the inner lexical environment is destroyed.

When a function is called, a new inner lexical environment is created.

A closure is a function that remembers its outer variables and can access them. In JavaScript, all functions are naturally closures.

IIFE

Immediately invoked function expression:

(function () {
    // ...
}());

(function () {
    // ...
})();

Example of how we can create an object interface:

const user = (function () {
    const getName = function() {};
    return {
        getName: getName 
    };
}());

Context “this”

this (aka “the context”) is a special keyword inside each function and its value only depends on how the function was called, not how/when/where it was defined.

this always refers to some object.

Example:

var addColorField = function() {
    this.color = "red";
}

var someObject = {
    height: 150,
    addColor: addColorField
};

someObject.addColor();

// someObject => {height: 150, color: 'red', addColor: ƒ}

If we call addColorField() in a browser, we will set Window.color property.

function test() {
    console.log(this); // we will get the `window` object.
}

'use strict';
function test() {
    console.log(this); // we will get 'undefined'.
}

Inject object context into a function:

function test() {
    console.log(this.name);
}

const user = {
    name: "Andrew"
};

test.call(user); // If a function has parameters, we will pass them using commas.
test.apply(user); // If a function has parameters, we will pass them in an array.

bind

Every function has the method .bind, which returns a new function with this bound to a value. The function has exactly the same behavior as the one you called .bind on, only that this was set by you. No matter how or when that function is called, this will always refer to the passed value.

var f = setInterval(function() {
    // ...
}.bind(this));

Creating a new function using bind:

function count(num) {
    return this * num;
}

const double = count.bind(2); // We will get a permanent function where num is always 2.