0

I am trying to understand the javascript objects, but I am having a hard time with the different types of declarations.

As I read there are two main way to define an object

Method 1:

var student1 = {
    name: "Peter Foti",
    course: 'JavaScript',
    grade: 'A',
    dispInfo: function(){
         return this.name + ' has an ' + this.grade; 
    }
};

Method 2: 

function student (a, b, c) {
    this.name = a;
    this.course= b;
    this.grade = c;
    this.dispInfo = function(){
         return this.name + ' has an ' + this.grade; 
    }
}

For the method 2 I understand the concept, if I want to create a variable of type student I simply need to call : 

student1 = new student("Jean Dupont", "wine tasting", "A");
console.log(student1.dispInfo);

However, with the method 1, how can I create a student2 without writing again all the inner function such as dispInfo?

I would like to do something like

var student2 = {
    name: "Olivier Perraut",
    course: 'Pétanque',
    grade: 'F'
};

console.log(student2.getInfo);
Improve this question

3 Answers 3

Reset to default
2

The first method is for creating an object that you only ever intend to have one of. It's for singletons. It creates the student1 object directly.

The second method is a constructor function. Constructor functions can be used again and again to create as many of these objects as you need.

By convention, constructor functions should be initially-capped (e.g., Student rather than student), like JavaScript's own objects (Date, RegExp, ...).

You could use the JavaScript prototype chain so that all of the Student objects use the same dispInfo function (with different this values) rather than creating a dispInfo for every object:

function Student (a, b, c) {
    this.name   = a;
    this.course = b;
    this.grade  = c;
}
Student.prototype.dispInfo = function(){
     return this.name + ' has an ' + this.grade; 
};

var s1 = new Student("Mary", "Algebra", "A");
var s2 = new Student("Joe", "Classical Sculpture", "B+");

As of ES5 (and this is possible with "shims" as well, for older browsers), you don't have to use a constructor function to have objects that share a prototype, you can use Object.create to do that. I prefer constructor functions, but you can also use builder functions:

var StudentPrototype = {
    dispInfo: function(){
        return this.name + ' has an ' + this.grade; 
    }
};
function BuildStudent(a, b, c) {
    var student    = Object.create(StudentPrototype);
    student.name   = a;
    student.course = b;
    student.grade  = c;
    return student;
}
var s1 = BuildStudent("Mary", "Algebra", "A");
var s2 = BuildStudent("Joe", "Classical Sculpture", "B+");

Note that we don't use new with builder functions, just with constructor functions. (It's usually harmless if you did, but it's unnecessary and misleading to anyone reading the code, so you don't want to.)

Or you don't even need the builder function in that simple case, you can just use Object.create directly, but it's a bit cumbersome because if you pass in property descriptors (the second argument), each one has to be an object describing the property, not just a value for it (there's a good reason for that), so you have to do {value: "the value"} (of course, you might want to specify other things about the property, like whether it's enumerable, etc.):

var StudentPrototype = {
    dispInfo: function(){
         return this.name + ' has an ' + this.grade; 
    }
};
var s1 = Object.create(StudentPrototype, {
        name:   {value: "Mary"},
        course: {value: "Algebra"},
        grade:  {value: "A"}
});
var s2 = Object.create(StudentPrototype, {
        name:   {value: "Joe"},
        course: {value: "Classical Sculpture"},
        grade:  {value: "B+"}
});

Personally, I prefer constructor functions, but the great thing about JavaScript is that it supports multiple styles of programming, including ones where things like builders or using Object.create directly are more appropriate.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thx for the answer. The thing is I will not always want to inisialize the object with all the parameters. Thats why an sort of array would have been nice. I know I can always use s.name = "Mary"
@PaulFournel: You can just leave off the ones you want to leave off (if they're at the end); within the constructor function, they'll be undefined. E.g., var s = new Student("Mary"); results in a student with a name and with the value undefined for course and grade. You can also pass in an "options" object to the constructor, which grabs what it needs from properties on that object (jQuery -- you've probably heard of it -- uses that for $.ajax and such, as do other libraries).
@PaulFournel: Or, of course, it may make more sense to you, for what you're doing, to use Object.create directly (see the end of the answer). I'm not a big fan of using it directly, but there are lots of people who are. :-)
Great answer, thx again! I may need a little time to process it all. :D
2

JavaScript is a so-called prototype-based object-oriented language. This means that objects don't get their behavior defined by classes, traits, mixins etc., but instead inherit it directly from other objects.

So, if you want to have a student2 that behaves like a student1 with only some minor differences, then you simply inherit from student1 and override those properties that are different. In JavaScript, prototypal inheritance is set up using the Object.create function, which takes in the object to inherit from and an optional property descriptor map with the overridden properties.

var student1 = {
    name: "Peter Foti",
    course: 'JavaScript',
    grade: 'A',
    dispInfo: function() { return this.name + ' has an ' + this.grade; }
},

    student2 = Object.create(student1, {
    name:   { value: 'Olivier Perraut' },
    course: { value: 'Pétanque' },
    grade:  { value: 'F' }
});

console.log(student2.dispInfo());
// Olivier Perraut has an F

Often times, you will see a pattern emerging, where instead of having "business" objects inherit directly from each other, you will set up a pristine "template" object and have all your business objects inherit from that, kind of like this:

var studentTemplate = {
    dispInfo: function() { return this.name + ' has an ' + this.grade; }
},

    student1 = Object.create(studentTemplate, {
    name:   { value: 'Peter Foti' },
    course: { value: 'JavaScript' },
    grade:  { value: 'A' }
}),

    student2 = Object.create(studentTemplate, {
    name:   { value: 'Olivier Perraut' },
    course: { value: 'Pétanque' },
    grade:  { value: 'F' }
});

console.log(student1.dispInfo());
// PeterFoti has an A

console.log(student2.dispInfo());
// Olivier Perraut has an F

By the way, I think it would be a good idea to make dispInfo a getter property instead of a method:

var studentTemplate = {};

Object.defineProperty(studentTemplate, 'info', {
    get: function() { return this.name + ' has an ' + this.grade; }
});

var student1 = Object.create(studentTemplate, {
    name:   { value: 'Peter Foti' },
    course: { value: 'JavaScript' },
    grade:  { value: 'A' }
});

console.log(student1.info);
// PeterFoti has an A
Improve this answer

2 Comments

Thx for your answer. Is there a way to define the object without having to use name: { value: 'Olivier Perraut' } but simply name: 'Olivier Perraut'
@PaulFournel: Not in the Object.create call itself (you can just assign student1.name = "Joe" after Object.create, though). This is because the descriptor has to be an object, it can't just be the value (because otherwise there'd be ambiguity -- if you used an object, did you mean the object as a value for the property or as a descriptor?). This is part of why I prefer constructor functions or builder functions, rather than using Object.create directly. Using it directly can be a bit verbose.
0

Try this. Though I would prefer to go with the method 2 to achieve this.

var student1 = {
    name: "Peter Foti",
    course: 'JavaScript',
    grade: 'A',
    dispInfo: function(){
         return this.name + ' has an ' + this.grade; 
    }
};

function GenerateObject (objValues)
{
    var object = Object.create(student1);
    for(var i in objValues)
    {
        object[i] = objValues[i]
    }
    return object;
}
var student2 = GenerateObject({
    name: "Olivier Perraut",
    course: 'Pétanque',
    grade: 'F'
    });
Improve this answer

1 Comment

Yes the method 2 seems the better solution is this case. Thx for your fast answer :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.