Rediscovering Javascript Objects

Javascript object like a sir

In this post I will introduce Javascript objects, how to define them, how to add attributes and methods and how to access them. Maybe you have heard that Javascript is an object oriented language but that definition is not very precise, specially when comparing to other languages. There are no classes! (and it is considered a prototypal object oriented language). Anyway now we will dip our toes into the waters just a little to become familiar with the notation. Prototypes, inheritance and other advance stuff will come next.

Creating an object

Did you read well? We are creating an object, not a class. Hey, this looks like a JSON String. You know what? JSON stands for JavaScript Object Notation, it has nothing to do with the argonauts or that amiable chap of Camp Crystal Lake. Basically you put key-value pairs inside curly brackets, where values can be any kind of js data: number, boolean, string, arrays, functions or even objects

// One single object
var oneUser = {
  login : 'falken',
  password : 'josua'
};

typeof oneUser;

otherUser = oneUser;

otherUser.login = 'root';
// Other way to access property
oneUser['password'] = '1234';

// The reference to the same!
console.log('One: ')
console.log(oneUser);
console.log('Other: ');
console.log(otherUser);

Object { login="root",  password="1234"}
Object { login="root",  password="1234"}

As you can see both oneUser and otherUser variables hold a reference to the same object.

Keys with quotes or not

We can leave out quotes, unless we want to use a key with special charactes, blank spaces, etc.. In the next example we can see how to reach attributes in two different ways and how to deal with nested objects.

var oneCustomer = {
  name : 'John Doe',
  'Customer address' : 'c/ unknown',
  '-+-+-+' : 'wtf',
  payment : { ptype : 'Visa',
             card  : '33442324234',
             'expiry date' : 'never'
            }
};

console.log(oneCustomer);

oneCustomer['name'] = '';
oneCustomer['-+-+-+'] = 'Something';
oneCustomer.payment['ptype'] = 'Account';
oneCustomer['payment'].card = '666';
oneCustomer['payment']['expiry date'] = 0;

console.log(oneCustomer);

Functions as data

Ok, if we want these objects to behave as objects in other languages, we should add some code to them. Easy peasy.

var student = {
  id : 2,
  name : 'John Doe',
  sayHello : function () {
              return 'Hello';
            }
}

console.log(student);
console.log(student.sayHello());

Hello

By now maybe you have realized that Javascript hashtables are in fact objects

Adding more properties and methods

Why not? Javascript is interpreted and weakly typed. But don't get confused. We are still playing with objects, not with classes. When we want to extend attributes of functions to a class we can use prototype (not covered yet).

...
// Adding new properties and methods:
student.age = 28;
student.sayGoodbye = function () { return 'bye';};

console.log(student.sayGoodbye());
bye

this

The well-known this is available too in Javascript. It refers current object. It comes in handy when we need to refer to our own properties in the object functions.

This operator referes to current object

var invoice = {
  description : 'Sample invoice',
    price:100.0,
    vat: 5.0,
  subtotal : function () {
              return this.price;
            },
  total : function () {
              return this.price + ((this.price * this.vat)/100);
            }
}

console.log(invoice);
console.log(invoice.total());

Constructors

Ok, we have been playing around with single instances, but what if we want to create different instances of the same kind of object. There is no class keyword, but we can define a constructor function and the call it using new reserved word to create a fresh new instance.

The next example shows a class of a kind in Javascript. It is a function with the name starting with uppercase (a convention to make it clear that this is not an ordinary function but a constructor), and inside we just add attributes and functions.

/**
* constructor for Web objects
*/
function Web () {
  this.url = 'http://localhost';
  this.name = 'Localhost';
  this.showInfo = function () {
    return this.url + ': ' + this.name;
    }
}

var oneWeb = new Web();
oneWeb.url = 'http://www.pello.info';
oneWeb.name = 'Home sweet home';

console.log(oneWeb);
console.log(oneWeb.showInfo());

var otherWeb = new Web();
otherWeb.url = 'http://www.elmundo.es';
otherWeb.name = 'El Mundo';

console.log(otherWeb);
console.log(otherWeb.showInfo());

Calling this function with new will create different instances.

Constructor with arguments

Being a function, adding arguments to the constructor is pretty straightforward.

/**
* constructor for Web objects
*/
function Web (url, name) {
  this.url = url;
  this.name = name;
  this.showInfo = function () {
    return this.url + ': ' + this.name;
    }
}

var oneWeb = new Web('http://www.pello.info','Home sweet home');

console.log(oneWeb);
console.log(oneWeb.showInfo());

var otherWeb = new Web('http://www.elmundo.es','El Mundo');

console.log(otherWeb);
console.log(otherWeb.showInfo());

constructor property and instanceof operator

Every object has at least a constructor property that we can check. Also, we can check if an object is an instance of certain type. I'm reluctant to say class.

typeof oneWeb;
"object"

oneWeb.constructor;
Web(url, name)

// Instance of operator
if (oneWeb instanceof Web) {
    console.log('Instance of Web');
}

Factory

Do you prefer factories to create instances? just create a function that returns an object.

function factory (title,text) {
  return {
    title : title,
    text : text,
    show: function () {
              return title + ': ' + text;
           }
  };
}

var comment = factory('sample','bla bla');
var comment2 = factory('sample2','bla2 bla2');
var comment3 = factory('sample2','bla2 bla2');

comment.title = 'Other';
console.log(comment);
console.log(comment.show());

console.log(comment2);
console.log(comment2.show());

Equality

Are two object equals? Not at all, the equality refers to be the same reference, that is, to point to the same object.

// Both of these are not equals
if (comment2 == comment3) {
    console.log('Are equals ==');
} else {
    console.log('Are not equals ==');
}
Are not equals ==

if (comment2 === comment3) {
    console.log('Are equals ===');
} else {
    console.log('Are not equals ===');
}
Are not equals ===

Now by reference turns out to be... true

var comment4 = comment3;

if (comment3 == comment4) {
    console.log('Are equals ==');
} else {
    console.log('Are not equals ==');
}
Are equals ==
if (comment3 === comment4) {
    console.log('Are equals ===');
} else {
    console.log('Are not equals ===');
}
Are equals ===

That's all for today. Object oriented Javascript is a hard road at first, but the payoff is worth it. Or so they say, greetz ;)

by Pello Altadill 04/08/2015 00:05:38 - 2104 hits

Rediscovering Javascript functions

Javascript functions are apparently simple yet very flexible. Functions are data. Functions can be anonymous. Functions can even be shape shifters. And of course, closures deserve a look. Simple function This is a simple sample functions that generates a String, an excuse to introduce the most basic jsdoc notation. /** * Repeats a word * @aut...

by Pello Altadill 04/06/2015 00:28:43 - 2168 hits

More »

Rediscovering Javascript basics

This will be just another quick reveiw of the Javascript language basics. For any seasoned developer this may seem a pointless effort but perhaps you find something useful, at least to become a js nitpicker or a soon-to-be guru :D. Javascript properties Javascript is a weakly typed, interpreted and multi-paradigm (functional,object oriented,..) language in its own way. It is case-sensitive and its basic sinta...

by Pello Altadill 04/04/2015 23:42:36 - 2182 hits

More »

Rediscovering Javascript

When Node.JS server side engine came into play along with some other ideas like noSQL databases , javascript language definitely got my attention. These are technologies that turned inside out the way we can develop applications after years and years of php, jsp, aspx and the like querying data through SQL. Changes also came to the client side of the web since AJAX started playing a crucial role in massive apps su...

by Pello Altadill 04/02/2015 23:05:15 - 2455 hits

More »

Migrate from google code to github or bitbucket in easy steps

Google code disappears Repent, the end is near. Google has just announced that they are shutting down google code project hosting. In the email of the announcement they make some suggestions to find a new house for your code such as bitbucket or github. I hope that they have been warned in order to be ready for a massive repository...

by Pello Altadill 03/13/2015 10:17:53 - 2644 hits

More »

Vagrant: hello box, thank you for coming

Vagrant is a virtual machines management tool that allows us to easily create, run, configure and share customized virtual systems. The main goal of Vagrant is to provide a centralized way to share preconfigured virtual machines for software developers. In development teams, all members must share not only and up-to-date project source, but also the same system configuration: database management systems, w...

by Pello Altadill 08/13/2014 00:35:34 - 5374 hits

More »

Persistent session control in Node.js with express 4

In this series of posts I'm trying to show, in the simplest way possible, how to develop a web application in Node.js adding all the features that in other environments we take for granted: database access, form validation, i18n, and of course session management. Express is the framework of choice for this purpose, the problem is that maybe many information you find out there may be deprecated or useless since express 4 was released. Here I'm trying to use the latest (express4) and the coolest, but in an...

by Pello Altadill 08/03/2014 00:08:50 - 10603 hits

More »

Node.js internationalization and form validation

In any application, no matter the languages or the environment you are using, it is always necessary to ensure that all data is validated before we try any operation. It's tedious, boring and maybe you prefer to focus on more interesting things but you may fear not only hackers, but also the users who from time to time become true hackers without been really aware of it: just applying unexpected input. For instance a form field could ask for the zip code and a regular user could answer (sincerely) 'I don...

by Pello Altadill 08/01/2014 00:27:41 - 10715 hits

More »

Keeping Node.js app.js clean + custom middleware for express

This post has two purposes: to continue the previous one showing ways to improve the organization of routes and secondly to see how to add your own middleware to an express application. The previous version have a problem when it comes to the routes. We require all of them with a single requ...

by Pello Altadill 07/26/2014 23:03:41 - 8023 hits

More »