JavaScript Functions

w3schools.com

JS Functions, Function Declarations, Function Definitions, Function Parameters,
Function Expressions, The Function() Constructor, Function Invocation, Function Call
Function Apply, Function Closures, Function Hoisting

The parenthesis around function( ) are mandatory: without those parenthesis, you would get a syntax error.
That's because the parenthesis tell the JavaScript language parser to treat the function definition as an expression.

Code Block: Any code with the Curly Braces { } is called a Block of Code

w3 Schools

Object Method Binding

In these examples, this is the person object (The person object is the "owner" of the function):

  const person = {
    firstName  : "John",
    lastName   : "Doe",
    id         : 5566,
    myFunction : function() {
      return this;
    }
  };

Explicit Function Binding

The call() and apply() methods are predefined JavaScript methods.

They can both be used to call an object method with another object as argument.

You can read more about call() and apply() later in this tutorial.

In the example below, when calling person1.fullName with person2 as argument, this will refer to person2, even if it is a method of person1:

  const person1 = {
    fullName: function() {
      return this.firstName + " " + this.lastName;
    }
  }
  const person2 = {
    firstName:"John",
    lastName: "Doe",
  }
  person1.fullName.call(person2);  // Will return "John Doe" 

The Arguments Object

JavaScript functions have a built-in object called the arguments object.

The argument object contains an array of the arguments used when the function was called (invoked).

This way you can simply use a function to find (for instance) the highest value in a list of numbers:

  x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
  let max = -Infinity;
  for (let i = 0; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}

* YouTube FireShip Functions *

// JavaScript Console Log => cl;1 console.log(arguments); = keyword in JS

- Anatomy of a Function, - Statement vs Expression, - IIFE, - Parameters, - Arrow Functions

- Higher Order Functions, - Pure Functions, - Recursion

Arrow Functions

1. Function Declarations
2. Function Expressions
3. Function() Constructor
4. Function Hoisting
5. Self-Invoking Functions
6. Functions Can Be Used as Values
7. Functions are Objects
8. Arrow Functions

Lexical Scope in JavaScript

JavaScript Tutorial

Summary: in this tutorial, you will learn about the JavaScript functions that allow you to structure your code into smaller and more reusable units. When you write a program, you often need to perform the same action in many places. For example, you want to show a message to the users when they complete an action. To avoid repeating the same code all over places, you can use a function to wrap that code and reuse it.

  function add() {
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
      sum += arguments[i];
  }
  return sum;}

  // JavaScript Console Log => cl;1
console.log(add,(1,2,3,4));

Do Factory

JavaScript Info

MDN Mozilla

ES Lint

First Class Citizens

The Global Object

When a function is called without an owner object, the value of this becomes the global object. In a web browser the global object is the browser window. This example returns the window object as the value of this:

  let x = myFunction();            // x will be the window object

  function myFunction() {
    return this;
  }

Invoking a Function as a Method

In JavaScript you can define functions as object methods. The following example creates an object (myObject), with two properties (firstName and lastName), and a method (fullName):

  const myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
      return this.firstName + " " + this.lastName;
    }
  }
  myObject.fullName();         // Will return "John Doe"

Invoking a Function with a Function Constructor

If a function invocation is preceded with the new keyword, it is a constructor invocation.
It looks like you create a new function, but since JavaScript functions are objects you actually create a new object:

  // This is a function constructor:
  function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
  }
  
  // This creates a new object
  const myObj = new myFunction("John", "Doe");
  
  // This will return "John"
  myObj.firstName;

JavaScript Closures

Returning a value

  function add(a, b) {
    return a + b;
}
let sum = add(10, 20);
console.log('Sum:', sum);

JavaScript Hoisting

  let x = 20,
    y = 10;

let result = add(x,y);
console.log(result);

function add(a, b){
return a + b;
}

Summary

JavaScript Immediately Invoked Function Expression (IIFE)

Put simply, an Immediately Invoked Function Expression is a good way at protecting the scope of your function and the variables within it. The term ‘scope’ might also be a bit fancier than it needs to be — it basically just means where it can be accessed from.

The first I in IIFE stands for immediately but it does not signifies that immediately running a function makes the function an IIFE. I am also intrigued by the use case everybody uses in their tutorials - If you want to write a function and call it immediately. Did you ever come across such a scenario? Functions are there for a purpose. They give you the power of reusability. If you write a function that means you want to re-use it.

With ES6 modules you no longer need IIFEs for the most part. Thus they were mostly reserved for library creators or framework architects. As an application developer you would not use IIFE in your day to day work.

  // Regular function
  function regularFunction() {
    var a = 20; // a is visible only within the function
      console.log(a*a);
  }
  regularFunction();
  
  // IIFE
  (function (){
    var a = 20; // a is visible only within the function
      console.log(a*a);
  })()

The Scope dilemma One aspect that I think everybody gets wrong about IIFE is the clause - prevents global scope pollution. Though its true but it does not gives you the differentiating factor. There are several caveats attached to it. Lets understand the whole scope pollution thing in detail. Every where its mentioned that any variable declared inside an IIFE is local to it and does not pollute the global scope. The statement is factually correct BUT remember that every IIFE is just another function. So as a result anything declared inside an IIFE will be available only inside the function body and will not be visible outside thereby preventing the outside scope to get modified. There is nothing special here. Every function has the same characteristic. Thats the whole purpose of having functions in a language.

Namespace

Codepen's

Last Visited and Edited

Wednesday November 24 2021 0754 AM

Wednesday November 03 2021 0731 AM

Wednesday September 22 2021

Wednesday August 18 2021 0740 AM