JavaScript creating new instance of objects

Question

So I am designing a grade book interface and I have a course defined as:

<script>
course = new Object();
 var name;
 var gradingareas;
 var finalgrade;
</script>

then later I want to create a new instance:

 var gradingareas = new Array("Homework", "Classwork", "Exams");

 course1 = new course("CS1500", gradingareas, 85);

I have also tried without the var in front to no avail. I get an "Uncaught TypeError: Object is not a function" I am very new to javascript so I don't even know if Im going about this the correct way. Any help is appreciated Thanks.

Please read the basics here first: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects. — VisioN, Mar 19 '13 at 16:43

score 56 · Accepted Answer · answered Mar 19 '13 at 16:44

56

Your existing code:

// Creates a new, empty object, as a global
course = new Object();
// Creates three new variables in the global scope.
var name;
var gradingareas;
var finalgrade;

There is no connection between the variables and the object.

It looks like you want something more like:

function Course(name, gradingareas, finalgrade) {
    this.name = name;
    this.gradingareas = gradingareas;
    this.finalgrade = finalgrade;
}

Then:

var course1 = new Course("CS1500", gradingareas, 85);

Note the use of a capital letter for naming the constructor function. This is a convention in the JS community.

answered Mar 19 '13 at 16:44

Quentin

914,110
126
1,211
1,335

Then how would I reference the fields of the course created with the function? The idea is I want to hold onto these like an instance of a class in java. – user1991562 Mar 19 '13 at 16:46
Thank you for your explanation! you saved me. I lost a couple of hours trying to fix a bug, the problem was I didn't understand the oo structure of javascript. – Hugo Nava Kopp Feb 25 '16 at 21:52

score 40 · Answer 2 · answered Aug 21 '13 at 13:08

JS is prototypical, rather than class based and if you are new to it there are advantages to learning this immediately rather than trying to mush classical inheritance models from it, however, classical inheritance is alive and well in JS.

Anyhow, to answer how you would access your variables:

course1.name works fine with the example above.

If you wanted to privatise your data you could take this approach using closure:

var Course = function(name, grade) {
  // Private data
  var private = {
    name: name,
    grade: grade
  }

  // Expose public API
  return {
    get: function( prop ) {
      if ( private.hasOwnProperty( prop ) ) {
        return private[ prop ];
      }
    }
  }
};

Then instantiate a new object:

var course = new Course('Programming with JavaScript', 'A');

and start using all that private data:

course.get('name');

Of course, you'd probably want setters to manipulate that data too ;)

Even though both answers are correct, this one made more sense to me than the accepted answer. — carbontwelve, Jan 07 '15 at 21:25

score 1 · Answer 3 · answered Oct 10 '18 at 12:23

The code that you described does the following:

// Declares a memory variable called course and stores and object in it
var course = new Object();

// Declares three variables
 var name;
 var gradingareas;
 var finalgrade;

These declared variables aren't automatically connected to the object. If you want these properties declared on the object you have 2 options:

Declare them as properties of the object
Declare them on the prototype of of the object

Example1: declare them as properties of the object:

// Declares a memory variable called course and stores and object in it
var course = new Object();

// Access or create new properties with . or [] operator
course.name = 'math';
course.gradingareas = 'muliple';
course['finalgrade'] = 'A'

console.log(course);

Example2: Declare them on the prototype:

// Create a constructor function
function Course (name, grade) {
  this.name = name;
  this.grade = grade;
}

// course is added on the prototype
Course.prototype.gradingareas = 'some gradingareas';

// the name and the grade are added on the object itself
var course = new Course ('willem', 10);

console.log(course);

Diego Montania · Answer 4 · 2022-10-02T02:03:00.733

To create a very simple object with constructor and default values, you can do :

//My object with constructor
var myObjectWithConstrutorFunction = {

    //construtor function with default values in constructor
    myConstrutor: function(Name = 'bob', Age = 18){
        this.Name = name;
        this.Age = age;
    }
};

// instance
var myInstance = new myObjectWithConstrutorFunction.myConstrutor();

// show on console
console.log('object with constructor function: ', myInstance);

// show properties 
console.log(myInstace.Name, myInstance.Age);

PS : It's a good practice create a constructor's name with the same name of the class, if you are creating a external class.

JavaScript creating new instance of objects

4 Answers4