8

There are three ways of creating objects in JavaScript:

  1. by simple Object creating
  2. by Factory function
  3. by Constructor function

  1. Simple Object Creation:

    var ronaldo = {
    name: "Ronaldo",
    age: "35",
    quote: "Hi I am Ronaldo", 
    salary: function(x){ return x+2500; }
};

  2. Factory Function:

    function human(x,y,z,i){
    return{
        name: x,
        age: y,
        quote: z,
        salary: function(i){ return i+2500; }
    }
};
var Zini = human('Zenidan','41','I am Zidane',7500);

  3. Constructor Function:

    var human = function(x,y,z,i){
    this.name = x,
    this.age = y,
    this.quote = z, 
    this.salary = function(i){ return i+2500; }
};
var Lampd = new human('Frank Lampard','39','I am Frank J Lampard',5500);

Can someone provide simple illustrations of when to use which of these methods to create objects in simple terms, so that a naive can also understand?

I went through the following links, but it’s a bit complicated to understand:

So I’m asking for some simple practical cases.

Community
  • 1
  • 1
Deadpool
  • 7,811
  • 9
  • 44
  • 88
  • 3
    i am also want to see practical cases for above mention question ☻ – Shailendra Sharma Oct 29 '15 at 06:49
  • 1
    There are more ways to create objects in JS, `new`-keyword and `Object.create()` – Per Eriksson Oct 29 '15 at 09:17
  • Can you provide simple 'code snippents' for those. It would be helpful. Also, no answer so far. ;( – Deadpool Oct 29 '15 at 09:30
  • You're basically asking for "how, when, and why do I use various JS OOP methods". IMO this is too broad, and extensively covered by tutorials, books, and previous SO questions. – Dave Newton Oct 29 '15 at 11:48
  • What is the difference between a Factory and a function constructor? – Vandervidi Oct 31 '15 at 11:33
  • the style convention for JavaScript is to capitalize constructor function names and use lowercase names for instance variables. http://javascript.crockford.com/code.html – Max Heiber Oct 31 '15 at 22:54
  • @VanderVidi A factory constructs objects based on arbitrary criteria given to the factory. A function constructor is just that, a function constructor. – Dave Newton Oct 31 '15 at 23:12

1 Answers1

3

Use simple objects for data: when all you need is a bundle of key/value pairs.

In your example of a simple object, you have more than just data: the salary method adds behavior to the object. If you're going to end up with many objects like that, it's better for performance and maintainability to have just one salary method that is shared between all of the objects, rather than each object having its own salary method. A way to share a method among many objects is to put the method on a prototype of the objects.

You can use a constructor function when you need to create an object that is an instance of a prototype. This is a good place to read about that, but it's a little dense: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

The MDN link above also demonstrates ECMAScript 2015 class syntax, which is an alternative to constructor functions.

Update: See Dave Newton's comment for a good example of when to use a factory

Max Heiber
  • 14,346
  • 12
  • 59
  • 97
  • 3
    Factories are useful under the same circumstances as other OOP languages, e.g., if you're consuming JSON data and you need data/behavior based on some form of marker (pretend this is JSON): `{ id: n, type: 'some_type', data: { whatever } }`. If you have multiple types you'd need a factory to generate behavioral objects from them, for example, a type might have its own editor implementation. – Dave Newton Oct 31 '15 at 23:03
  • Also, when you don't need `this`, I'd recommend using a regular function or static method instead of an instance method http://stackoverflow.com/a/29291666/2482570. To me, making a function an instance method signals that you intend to use `this`. In your example, `const salary = x => x + 2500` would be a fine way to write the function. – Max Heiber Apr 13 '17 at 01:51