JavaScript syntax: what is ({ }) Is it a function or object?

Question

as a developer with OOP background(c#, Java) OOP JavaScript is wild horse for me. I am trying learn nuts and bolts of language and then jump on libraries (Am I wrong?);

so, I checked dozen of books/tutorials about objects, functions...etc..learned several ways to create objects but syntax used in almost every JS library confuses me. namely

var Person = Backbone.extend.Model({
 //pretty complex staff
 })

what is Model behind the scenes? object? function?

Answer 1

That is not the correct backbone syntax. That should actually be:

Backbone.Model.extend({

});

In that case, extend is a function. Note that you are invoking it with (). However, functions in javascript are also objects (more on that in a moment). You may be confused about the {} inside of it. That is because you are passing that object as a parameter to the function.

If extend was a function that expected a string as a parameter/argument, it would look like this: extend('some string'). In this case, it is taking an object. For example:

var someObject = {
  someProperty: 'someValue'
}
var Person = Backbone.Model.extend(someObject);

is the same as:

var Person = Backbone.Model.extend({
  someProperty: 'someValue'
});

Here's just a sample of how that might look in the function:

Backbone.Model.extend = function(obj) {
  console.log(obj.someProperty); //logs "someValue"
}

As I said, in javascript, functions are also objects. Actually, most things are objects. I recommend you study more on this. As it's not the focus of your question, I'll just briefly demonstrate:

var someObj = {
  someProperty: '123'
};
console.log(someObj.someProperty); //logs "123"

var someFunction = function() {

};
someFunction.someProperty = '123';
console.log(someFunction.someProperty); //logs "123"

Though, it would be better to add to the prototype so that inheritance will work like this:

someFunction.prototype.someProperty = '123';
var foo = new someFunction();
console.log(foo.someProperty); //logs "123"

Here's a little demo you can mess with (click).

So.. in summary, JavaScript is win-sauce.

Answer 2

Are you sure you typed this in correctly? I think you reversed the order of Model and extend. I'm looking at the documentation now, and I see:

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes.

The extend function is implemented in many Javascript libraries: Backbone, Underscore, and jQuery for a few. What it does is to take an object and add methods and instance variables to it. After all in Javascript, objects are simply hashes. This creates an object that has a few methods and data.

var counter = {};
counter.count = 0;
counter.increment = function() {
    this.count++;
}
counter.decrement = function() {
    this.count--;
}

If you want inheritance, you use the object or its constructor's prototype property. The extend method is a way of simulating that. Here's more of the Backbone documentation:

extendBackbone.Model.extend(properties, [classProperties])

To create a Model class of your own, you extend Backbone.Model and provide instance properties, as well as optional classProperties to be attached directly to the constructor function.

extend correctly sets up the prototype chain, so subclasses created with extend can be further extended and subclassed as far as you like.

var Note = Backbone.Model.extend({

    initialize: function() { ... },

    author: function() { ... },

    coordinates: function() { ... },

    allowedToEdit: function(account) {
        return true;
    }

});

In conventional Javascript, you'd write:

function Note() {
    this.initialize  = function() {...};
    this.author      = function() {...};
    this.coordinates = function() {...};
    this.allowedToEdit = function(account) {
        return true;
    };
}

Note.prototype = new Model();  // Inheritance.

Inheritance in JavaScript reminds me of the Perl maxim: There's More than One Way to Do This.