JS Functions

Function Parameters

• do not specify data types；
• not perform type checking；
• not check the number of arguments received.

missing arguments

function myFunction(x, y) {
  if (y === undefined) {
    y = 2;
  }
}

default parameter values

function myFunction(x, y = 10) {
  return x + y;
}
myFunction(5);

rest parameter

function sum(...args) {
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}
 
let x = sum(4, 9, 16, 25, 29, 100, 66, 77);

arguments object：
js functions have a built-in object called the arguments object.

x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() {
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}

Function Invoking

// The Global Object
function myFunction() {
  return this;
}
let x = myFunction(); // x will be the window object
// Invoking a Function as a Method
const myObject = {
  firstName: "John",
  lastName: "Doe",
  fullName: function () {
    return this;
  },
};
myObject.fullName(); // return [object Object] (the owner object)
 
// Invoking a Function with a Function Constructor
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName = arg2;
}
const myObj = new myFunction("John", "Doe");
myObj.firstName; // This will return "John"

Function call()

With the call() method, you can write a method that can be used on different objects.

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

The call() Method with Arguments.

const person = {
  fullName: function (city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  },
};
 
const person1 = {
  firstName: "John",
  lastName: "Doe",
};
 
person.fullName.call(person1, "Oslo", "Norway");

Function apply()

With the apply() method, you can write a method that can be used on different objects.

const person = {
  fullName: function () {
    return this.firstName + " " + this.lastName;
  },
};
 
const person1 = {
  firstName: "Mary",
  lastName: "Doe",
};
 
// This will return "Mary Doe":
person.fullName.apply(person1);

The apply() method is similar to the call() method, difference is:

• The call() method takes arguments separately.
• The apply() method takes arguments as an array.

const person = {
  fullName: function (city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  },
};
 
const person1 = {
  firstName: "John",
  lastName: "Doe",
};
 
person.fullName.apply(person1, ["Oslo", "Norway"]);

In JavaScript strict mode, if the first argument of the apply() method is not an object, it becomes the owner (object) of the invoked function. In “non-strict” mode, it becomes the global object.

5

With the bind() method, an object can borrow a method from another object.

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  },
};
 
const member = {
  firstName: "Hege",
  lastName: "Nilsen",
};
 
let fullName = person.fullName.bind(member);

Preserving this

Sometimes the bind() method has to be used to prevent losing this.
In the following example, the person object has a display method. In the display method, this refers to the person object:

const person = {
  firstName: "John",
  lastName: "Doe",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  },
};
 
person.display();

When a function is used as a callback, this is lost.

This example will try to display the person name after 3 seconds, but it will display undefined instead:

const person = {
  firstName: "John",
  lastName: "Doe",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  },
};
 
setTimeout(person.display, 3000);

The bind() method solves this problem.
In the following example, the bind() method is used to bind person.display to person.
This example will display the person name after 3 seconds:

const person = {
  firstName: "John",
  lastName: "Doe",
  display: function () {
    let x = document.getElementById("demo");
    x.innerHTML = this.firstName + " " + this.lastName;
  },
};
 
let display = person.display.bind(person);
setTimeout(display, 3000);

Function Closures

const add = (function () {
  let counter = 0;
  return function () {
    counter += 1;
    return counter;
  };
})();
 
add();
add();
add();
 
// counter = 3