'thisArg' parameter

Utilizing ChatGPT to assist in explaining the code example found at: https://javascript.info/array-methods

·

3 min read

Table of contents

No heading

No headings in the article.

let army = {
  minAge: 18,
  maxAge: 27,
  canJoin(user) {
    return user.age >= this.minAge && user.age < this.maxAge;
  }
};

let users = [
  {age: 16},
  {age: 20},
  {age: 23},
  {age: 30}
];

// find users, for who army.canJoin returns true
let soldiers = users.filter(army.canJoin, army);

alert(soldiers.length); // 2
alert(soldiers[0].age); // 20
alert(soldiers[1].age); // 23
If in the example above we used users.filter(army.canJoin), then army.canJoin would be called as a standalone function, with this=undefined, thus leading to an instant error.

A call to users.filter(army.canJoin, army) can be replaced with users.filter(user => army.canJoin(user)), that does the same. The latter is used more often, as its a bit easier to understand for most people.
  1. The army object has a canJoin method that takes a user object and checks if the user's age is within the minAge and maxAge range, which are properties of the army object.

  2. The users array contains objects representing different users with their ages.

  3. The filter function is called on the users array, with army.canJoin as the callback function and army as the thisArg parameter.

  4. When the filter function iterates through the users array, it calls the army.canJoin method with each user object. By passing the army object as the thisArg parameter, the context of the canJoin method is set to the army object, ensuring that this.minAge and this.maxAge refer to the correct values within the army object.

    The filter function is a method available on JavaScript arrays, which creates a new array containing elements that satisfy a specified condition. The condition is determined by a callback function provided as the first argument to the filter method. The callback function is invoked for each element in the array, and if it returns true, the element is included in the resulting array.

    In this example, the filter function is called on the users array:

    let soldiers = users.filter(army.canJoin, army);

    Here, army.canJoin is provided as the callback function, which will be called for each element in the users array. This function checks if a user is eligible to join the army based on their age.

    The second argument, army, is the thisArg parameter. When thisArg is provided, it sets the value of this inside the callback function (army.canJoin) to the specified object (army). By setting the this value to the army object, the canJoin method can access the minAge and maxAge properties of the army object, which are needed to determine if a user is eligible to join the army.

    When the filter function iterates over the users array, it calls the army.canJoin method with each user object. Since the army object is passed as the thisArg parameter, the canJoin method will have the correct context, and the this.minAge and this.maxAge expressions inside the method will refer to the minAge and maxAge properties of the army object.

    In summary, calling the filter function on the users array with army.canJoin as the callback function and army as the thisArg parameter ensures that the canJoin method is called with the correct context for each user, allowing it to check if each user is eligible to join the army based on their age.

  5. If users.filter(army.canJoin) was used without the thisArg parameter, the canJoin method would be called without the proper context, and this would be undefined inside the method, causing an error when trying to access this.minAge and this.maxAge.

  6. As an alternative to using the thisArg parameter, you can use an arrow function to create a new function that calls army.canJoin(user) with the correct context. The arrow function automatically captures the surrounding context, so army.canJoin(user) will be called with the correct this value (the army object).

In summary, the thisArg parameter is used to set the context (this) for the callback function when it's called within another function, like filter. In this example, passing the army object as the thisArg ensures that the canJoin method is called with the correct context, allowing it to access the minAge and maxAge properties of the army object.