Functions

Function

• Every JavaScript function is actually a Function object. This can be seen with the code (function(){}).constructor === Function

• Functions created with the Function constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the Function constructor was created.

• In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.

  • They may be named by variables.
  • They may be passed as arguments to procedures.
  • They may be returned as the results of procedures.
  • They may be included in data structures.

Function Declarations vs Function Expression

// Function Declaration
function doSomething(){
  console.log("something")
}

// Function Expression
const something = function(){
  console.log("something")
}

• Callbacks use function expression
• Function declaration, also known as function statement,
• Function expression is assigned to a variable. It's most common that the function is defined as an anonymous function.

// Function Expression using named function
const something == function somename(){
  console.log("something")
}

• function declaration is hoisted. On the other hand, function expression's variable is hoisted but not the function.
• Because the variable is hoisted, its declared but not initialized. Resulting in undefined when console logging before the line.
• In JS, function is assignable to a variable.
• Function declarations load before any code is executed.
• Function expressions load only when the interpreter reaches that line of code.
• The main difference between a function expression and a function declaration is the function name, which can be omitted in function expressions to create anonymous functions. A function expression can be used as an IIFE (Immediately Invoked Function Expression) (opens new window) which runs as soon as it is defined.

Arrow Functions

Arrow functions do not have their own this value. The value of this inside an arrow function is always inherited from the enclosing scope.

function Person() {
  // The Person() constructor defines `this` as itself.
  this.age = 0;

  setInterval(function growUp() {
    // In nonstrict mode, the growUp() function defines `this`
    // as the global object, which is different from the `this`
    // defined by the Person() constructor.
    this.age++;
  }, 1000);
}


function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

• Use non-arrow functions for methods that will be called using the object.method() syntax. Those are the functions that will receive a meaningful this value from their caller.
• Use arrow functions for everything else.