Objects in Javascript

In Javascript, there are many ways, it seems, to create, instantiate, and edit objects. As part of my ongoing (noble) quest to make clear these curious structures, I want to create a resource for myself (and friends!) for how to manipulate objects in Javascript. Then I want to go back and compare how Python handles objects & what you can and can’t do with either language. MASTERY!

Ways to Make Objects

1

var rachelsObjectLiteral {
    objectColor: "red",
    objectSize: "friggin' huge",
    rachelsMethod: function (parameterToCall) {
        console.log("this is a 'hidden' function or method of the object
        rachelsObjectLiteral, calling " + parameterToCall + ".  the way to 
        call this Method is only via the object name, so 
        'rachelsObjectLiteral.rachelsMethod(argumentToCall)");
    },
    var rachelsOtherMethodMadePlain = function () {
        console.log("and this one you can just call outside the object
        without needing to reference rachelsObjectLiteral.  sounds like
        python's global.");
    }
};

rachelsObjectLiteral["objectHappiness"] = "really happy"

So as the object name announces, this is the Object Literal way to object creation. All of these things can be accessed via rachelsObjectLiteral.attribute, for example rachelsObjectLiteral.objectColor would refer to “red.” And a method is a function inside of an object. It’s hidden because you can’t call rachelsMethod without the object name. Also note that in an object literal construction, it’s COMMAS that go after each attribute (but not the final one), not semicolons.

And also note that I can add an attribute super easily here, e.g. "objecthappiness".

2

function objectConstructor (objectAttribute1, objectAttribute2) {
    this.objectAttribute1 = objectAttribute1;  # as someone helped me with this is comparable
    this.objectAttribute2 = objectAttribute2;  # to python's self.attributeName = attributeName
    this.objectMethod = function(parameter) {
        return parameter;
    };
}

var constructee = new objectConstructor (27, "floppy");

I really like this method of object creation. Name the superstructure, give it the attributes its constructed objects will eventually have, and then make a var as a new version of that superstructure. It’s just so easy to construct objects once you’ve created the structure!

Next we’ve got what seems to be a sort of pared down version of the second method, an object which at first has no attributes and whose attributes are assigned with keys, one by one. This second type of Constructor-style reminds me a lot of Pythonic dicts:

3

var newThing = new Object();
newThing["attribute1"] = "happy go shiny";
newThing["attribute2"] = "here's the second one!";

A really small version of the method three is var objectName = {}; and attributes can be assigned in the same way, or with dot notation, à la objectName.attribute3 = "hooray!";.

Finally, we’ve got the prototype of objects. Once an object’s been created, if you want to add more attributes you can do as we did in example 1, AND you can use prototype like so!

function Task (taskName) {
    this.taskName = taskName;
};

var coding = new Task("writing Python");

Task.prototype.checkOver = function() {
    return "you did it right, right?";
};

coding.checkOver();

var cleaning = new Task("tidying");

cleaning.checkOver();

Prototyping is probably the most challenging piece of this language for me, and along with that, it’s likely one of the most powerful. Ok! I will be coming back to this post probably constantly, hopefully you find it useful too!

Advertisements