Function Context Cheatsheet

Types of Invocation

• Applies to only named and unnamed functions
• Doesn’t matter for fat arrow functions

Function-style invocation

• Context of the function will be global context UNLESS binded

Method-style invocation

• Context of the function will be the object which the function is called on UNLESS binded

const obj = {
  name: 'Example Object',
  unnamedFunc: function() {
    console.log(this.name);
  }
};

// Method-style invocation
obj.unnamedFunc(); // 'Example Object' 

// Function-style invocation
const unnamedFunc = obj.unnamedFunc;
unnamedFunc(); // Global context

Types of Functions

Named Function

• explicit return keyword required
• curly braces {} around function body
• NOT saved to a variable
• parameters must be surrounded by parentheses ()
• context is defined by how it’s invoked or called
  • function-style: global context
  • method-style: context is object that function is being called on
• calling bind on the function will return a function binded to the context of the bind argument

function namedFunc(params) {
  return 'named function'
}

// bindedNamedFunc will have the context of obj
const bindedNamedFunc = namedFunc.bind(obj);

Unnamed Function

• explicit return keyword required
• curly braces {} around function body
• MUST be saved to a variable
• parameters must be surrounded by parentheses ()
• context is defined by how it’s invoked or called
  • function-style: global context
  • method-style: context is object that function is being called on
• calling bind on the function will return a function binded to the context of the bind argument

const unnamedFunc = function(params) {
  return 'unnamed function'
}

// bindedUnnamedFunc will have the context of obj
const bindedUnnamedFunc = unnamedFunc.bind(obj);

Explicit Fat Arrow Function

• explicit return keyword required
• curly braces {} around function body
• MUST be saved to a variable
• parameters must be surrounded by parentheses () IF more than one parameter
• takes the context of where it’s defined
• CANNOT be binded using bind

const explicitFatArrow = params => {
  return 'explicit fat arrow function'
};

Implicit Fat Arrow Function

• NO return keyword
• function body can only consist of what is being returned
• Optional parentheses () around function body > NOTE: Parentheses needs to be used if returning an object ex: ({ key: value })
• MUST be saved to a variable
• parameters must be surrounded by parentheses () IF more than one parameter
• takes the context of where it’s defined
• CANNOT be binded using bind

const implicitFatArrow = (params) => 'implicit fat arrow function';

const implicitFatArrow = (params) => ('implicit fat arrow function');

const implicitFatArrow = (params) => ({
  function: 'implicit fat arrow'
});

Bind

• bind accepts multiple arguments
• first argument is the context that you want to bind the function to
• any arguments that come afterwards will be passed in when the bound function is called BEFORE the call time arguments