YouTipJs Function Invocation
# JavaScript Function Invocation
In JavaScript, defining a function is only the first step; the code inside a function is executed when the function is **invoked** (called).
How a function is invoked determines its execution context—specifically, the value of the `this` keyword. JavaScript supports four different ways to invoke a function.
---
## The `this` Keyword
In JavaScript, `this` refers to the object that "owns" or is currently executing the active function.
> **Note:** `this` is a reserved keyword. You cannot modify or assign a new value to `this` directly.
---
## 1. Invocation as a Function
The most straightforward way to invoke a function is to call it directly by its name followed by parentheses.
### Example
```javascript
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // Returns 20
```
### The Global Object Context
When a function is declared without being attached to any custom object, it belongs to the default global object.
* In a web browser, the default global object is the browser window (`window`).
* Therefore, `myFunction()` and `window.myFunction()` are identical.
```javascript
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // Returns 20
```
### Behavior of `this`
When a function is invoked as a standard function, the value of `this` becomes the global object (`window` in browsers).
```javascript
function myFunction() {
return this;
}
myFunction(); // Returns the window object
```
> **Warning:** Invoking functions as global functions is a common approach but is generally considered bad practice. Global variables, methods, or functions can easily cause naming collisions and bugs that crash your application.
---
## 2. Invocation as a Method
In JavaScript, you can define functions as properties of objects. When a function is a property of an object, it is referred to as a **method**.
### Example
Below, we create an object (`myObject`) with two properties (`firstName` and `lastName`) and one method (`fullName`):
```javascript
var myObject = {
firstName: "John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // Returns "John Doe"
```
### Behavior of `this`
When a function is invoked as an object method, `this` points to the object that owns the method. In the example above, `this` refers to `myObject`.
We can verify this by returning `this` directly from the method:
```javascript
var myObject = {
firstName: "John",
lastName: "Doe",
fullName: function () {
return this;
}
}
myObject.fullName(); // Returns (the owner object itself)
```
---
## 3. Invocation with a Constructor
If a function invocation is preceded by the `new` keyword, it is invoked as a **constructor**.
### Example
```javascript
// Constructor function:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
var x = new myFunction("John", "Doe");
x.firstName; // Returns "John"
```
### Behavior of `this`
A constructor invocation creates a brand-new object. This new object inherits the properties and methods defined inside the constructor function.
> **Note:** The `this` keyword inside a constructor does not have a value when the function is written. The value of `this` is bound to the new object instance only when the function is instantiated using the `new` operator.
---
## 4. Invocation with Function Methods (Indirect Invocation)
In JavaScript, functions are first-class objects. This means they have their own properties and built-in methods.
Two of the most powerful built-in methods for functions are `call()` and `apply()`. Both methods allow you to invoke a function while explicitly setting the value of `this`.
### Using `call()`
The `call()` method takes the target `this` object as its first argument, followed by individual arguments passed to the function.
```javascript
function myFunction(a, b) {
return a * b;
}
// Invokes myFunction with myObject as the 'this' context
myObject = myFunction.call(myObject, 10, 2); // Returns 20
```
### Using `apply()`
The `apply()` method is similar to `call()`, but it accepts arguments as an array instead of listing them individually.
```javascript
function myFunction(a, b) {
return a * b;
}
myArray = [10, 2];
// Invokes myFunction with myObject as the 'this' context and myArray as arguments
myObject = myFunction.apply(myObject, myArray); // Returns 20
```
### Key Differences & Strict Mode Behavior
* **Argument Passing:** `call()` accepts an argument list (separated by commas), whereas `apply()` accepts a single array of arguments.
* **Strict Mode vs. Non-Strict Mode:**
* In **Strict Mode** (`"use use strict";`), the first argument of `call()` or `apply()` becomes the exact value of `this`, even if it is a primitive value (like a string or number) or `null`/`undefined`.
* In **Non-Strict Mode**, if the first argument is `null` or `undefined`, JavaScript automatically replaces it with the global object (`window`).