what is difference javascript object notation and function

Question

I want to learn the differences between javascript function and object notation for two situation.

Definition-1

function SearchGuide() {
    this.searchTerm = '';
    this.searchBoxPlaceholder = 'Search...';
    this.isSearching = false;

    this.searchAddress = function(){
        console.log(this.searchTerm)
    };
}

Definition-2

var SearchGuide = {
    searchTerm : '',
    searchBoxPlaceholder : 'Search...',
    isSearching : false,

    searchAddress : function(){
        console.log(this.searchTerm)
    }
}

(I will use this in knockout or angularjs MVC tool.)

main difference is that the first one is a constructor of `SearchGuide` class (you can make an instance with `new SearchGuide();`) and the second one is already an instance of class `Object` — doodeec, Feb 25 '14 at 09:26

score 1 · Answer 1 · answered Feb 25 '14 at 09:51

In definition 1 you are defining a function to be invoked as a constructor. You can create several instances of SearchGuide using new SearchGuide().

In definition 2 you are creating an instance of an Object: you cannot create a second instance reusing that code. Note this instance is an Object, but it isn't a SearchGuide instance:

function SearchGuide() {
    this.searchTerm = '';
    this.searchBoxPlaceholder = 'Search...';
    this.isSearching = false;

    this.searchAddress = function(){
        console.log(this.searchTerm)
    };
}

var sg= new SearchGuide();
sg instanceof SearchGuide //true

But with the second definition:

var SearchGuide = {
    searchTerm : '',
    searchBoxPlaceholder : 'Search...',
    isSearching : false,

    searchAddress : function(){
        console.log(this.searchTerm)
    }
}

SearchGuide instanceof Object //true
Searguide instanceof SearchGuide //TypeError: object is not a function

score 0 · Answer 2 · answered Feb 25 '14 at 09:55

The differences between an object and a function are quite significant and i doubt it's what you wanted to ask. I will assume you want to know the differences between an object created with an object literal syntax and an object created by using the new operator with a function:

var objectLiteral = { 
  a : 1, 
  b : function(){} 
}
function FooConstructor = function(){
  this.a = 1;
  this.b = function(){};
}
var constructedObject = new FooConstructor();

Differences:

Every object in JavaScript has an internal [[Prototype]] property, accessible by using Object.getPrototypeOf(obj) from which it "inherits" properties. That property is different for the two objects above:

Object.getPrototypeOf(objectLiteral) === Object.prototype
Object.getPrototypeOf(constructedObject) === FooConstructor.prototype

This means that if you were to define

FooConstructor.prototype.bar = 42;

console.log(objectLiteral.bar) // undefined
console.log(constructedObject.bar) // 42

This approach is usually very useful to save memory when adding read-only properties to many similar objects (usually the read-only properties being methods).

Stemming from the same [[Prototype]] difference, the instanceof operator behaves differently:

constructedObject instanceof FooConstructor // true
objectLiteral instanceof FooConstructor // false

One more difference between the two ways to define the object is in how easy it is to define a second object with the same characteristics:

var anotherLiteral = {
  a : 1, 
  b : function(){} 
}
var anotherConstructed = new FooConstructor();

This difference can be mitigated by using a cloning function or inheriting from a base object, depending on circumstances.

Final note: this answer focuses on the benefits of using a constructor, but the benefits are only present when you have multiple objects of the same type and you want to do more complicated things with them than pass a few properties around. If you need something to encapsulate a few properties, a simple object literal will most likely be enough and you don't have to go through the trouble of defining a constructor for it.

what is difference javascript object notation and function

2 Answers2