What is the correct way to invoke a function contained within an object that is stored in an array?

Question

What is the correct way to invoke a function contained within an object that is stored in an array?

I've encountered a problem with my program. I'm attempting to invoke a function that is part of an object stored in an array, but I'm having difficulty calling the function correctly.

//Initialize Array for Storing Projects
let allProjects = [];

//Define Parent Class for Creating Project Objects
class Project {

    constructor(projTitle, projDescription, projHours, projReserved) {

        //Declare variables
        this._name = projTitle;
        this._description =  projDescription;
        this._hours = projHours;
        this._reserved = projReserved;

        //Add newly created object to array
        allProjects.push(this);

        //TODO Reserve function
        function reserve() {
            if (this._reserved === false ) {
                this._reserved === true;
            } else {
                console.log('The project you are trying to reserve has already been taken.');
            }
        }
    };
}

//Invoke the reserve function of the object at index 0 in the array.
allProjects[0].reserve();

Upon running the program, I encounter the following error:

allProjects[0].reserve();
           ^
TypeError: allProjects[0].reserve is not a function

Any assistance or advice would be highly appreciated.

javascript debugging

Answer 1

Answer №1

If you would like the reserve function to be callable on the instantiated object, it should be placed on the prototype. Remember, === is for comparison, not for assignment; make sure to change

this._reserved === true;

to

this._reserved = true;

In its entirety:

class Project {
  constructor(projTitle, projDescription, projHours, projReserved) {
    this._name = projTitle;
    this._description =  projDescription;
    this._hours = projHours;
    this._reserved = projReserved;

    allProjects.push(this);
  }
  reserve() {
    if (this._reserved === false ) {
      this._reserved = true;
    } else {
      console.log('The project has already been reserved.');
    }
  }
}

An alternative approach that is technically correct but not very efficient (which might have been your original intention) would involve assigning the function to the instantiated object's reserve property within the constructor:

class Project {
  constructor(projTitle, projDescription, projHours, projReserved) {
    this._name = projTitle;
    this._description =  projDescription;
    this._hours = projHours;
    this._reserved = projReserved;

    allProjects.push(this);
    this.reserve = function() {
      if (this._reserved === false ) {
        this._reserved = true;
      } else {
        console.log('The project has already been reserved.');
      }
    }
  }
}

Answer 2

If you would like the reserve function to be callable on the instantiated object, it should be placed on the prototype. Remember, === is for comparison, not for assignment; make sure to change

this._reserved === true;

to

this._reserved = true;

In its entirety:

class Project {
  constructor(projTitle, projDescription, projHours, projReserved) {
    this._name = projTitle;
    this._description =  projDescription;
    this._hours = projHours;
    this._reserved = projReserved;

    allProjects.push(this);
  }
  reserve() {
    if (this._reserved === false ) {
      this._reserved = true;
    } else {
      console.log('The project has already been reserved.');
    }
  }
}

An alternative approach that is technically correct but not very efficient (which might have been your original intention) would involve assigning the function to the instantiated object's reserve property within the constructor:

class Project {
  constructor(projTitle, projDescription, projHours, projReserved) {
    this._name = projTitle;
    this._description =  projDescription;
    this._hours = projHours;
    this._reserved = projReserved;

    allProjects.push(this);
    this.reserve = function() {
      if (this._reserved === false ) {
        this._reserved = true;
      } else {
        console.log('The project has already been reserved.');
      }
    }
  }
}

What is the correct way to invoke a function contained within an object that is stored in an array?

Answer №1

Similar questions

Preview functionality is disabled in the iOS share extension

Connecting via web sockets through SSL is not functioning properly

Is it true that by utilizing Vue's v-for, every line of HTML code becomes a

Encountering issues with scope: Unable to retrieve value and receiving an error message stating 'Cannot assign value to undefined property'

Utilizing React Router with Material-Table for Efficient Column Value Filtering

What steps can be taken to address the build problem with Angular version 13?

The system couldn't locate the module: Issue: Unable to find module 'fs' within the directory

PHP issues caused by Ajax form compatibility

Updated Multer version causing issues with uploading image files

Modifying SASS variable values based on the presence of specific text in the page URL

Discovering parent elements far up the DOM hierarchy using jQuery

After a two-second period of inactivity, the buttons on the item should trigger an action

Exclude the key-value pair for any objects where the value is null

Looking to pass two distinct variables using a single props with v-if in Vue-JS. Any suggestions?

Interpolating backticks in Javascript allows for constructing a URL containing empty spaces

Delegate All Events to the Document

Exploring Angular 9: Harnessing the Power of Fork Join with an Array of

Utilize AJAX to update the database through a bootstrap modal interface

Leverage object properties as data table field values in VueJS

Using XMLHttpRequest with gzip compression