JavaScript: Function chaining or property accesses?

Question

If one has a choice to design things one way or the other, is it generally better (by way of performance, maintainability, readability, functionality, etc...) to do function chaining or use object property accessors for hierarchical access, and why?

Does it depend entirely on use case, or is one generally superior?

Example:

var foo = bar.get('parent').get('child').get('grandChild')...

// vs

var foo = bar['parent']['child']['grandChild']...
// or
var foo = bar.parent.child.grandChild...

Or is there a better way to do it altogether?

Note that dot notation . may not always be viable due to source minification, using property values that are not valid JavaScript identifiers, etc.

EDIT:

Since that's too generic, what about a more specific example...

Consider the following...

var animals = {
    dogs: {
        'Chloe': {
            name: 'Chloe',
            fetch: function() {},
            rollover: function() {},
            pups: {
                'Charlie': {
                    name: 'Charlie',
                    fetch: function() {},
                    rollover: function() {}
                },
                'Lily': {
                    //...
                }
            }
        },
        'Toby': {
            //...
        }
    },
    cats: {
        'Fido': {
            name: 'Fido',
            meow: function() {},
            kittens: {
                'Mia': {
                    name: 'Mia',
                    meow: function() {}
                },
                'Shadow': {
                    //...
                }
            }
        }
    }
}

Note that this is an attempt to show a heirarchy and does not show any prototypical inheritance, although it may be present (and probably would be in the example).

In the heirarchy as shown, one would use property access to get to a certain pup as follows

var myPup = animals.dogs['Chloe'].pups['Charlie'];
// or
var myPup = animals.dogs.Chloe.pups.Charlie;
// or
var myPup = animals['dogs']['Chloe']['pups']['Charlie'];

Is this ideal? Or are there significant benefits to using functions to access the pup

var myPup = animals.dogs('Chloe').pups('Charlie');

Answer 1

I think you are using the wrong tool for the wrong job. Deep nesting of objects like you did is a really bad choice of data modeling. Here's what your data model looks like:

+ animals
|
+--+ dogs
|  |
|  +--+ Chloe
|  |  |
|  |  +--+ Charlie
|  |  |
|  |  +--+ Lily
|  |
|  +--+ Toby
|
+--+ cats
   |
   +--+ Fido
      |
      +--+ Mia
      |
      +--+ Shadow

This kind of a data model is called the hierarchical model because the data is arranged in the form of a hierarchy.

The hierarchical data model is not a good data model because it doesn't provide access path independence. This simply means that (because of the way data is modeled) it is impossible to find a given object without knowing its access path.

For example the access path of Lily is animals.dogs.Chloe.Lily and the access path of Toby is animals.dogs.Toby. Access path independence is important because it means that you don't need to worry about where the object is located in the data model. This makes programming simpler and also ensures that every object will be accessed in the same amount of time.

In the above example it takes more time to access Lily than it takes to access Toby because it is one level deeper. To illustrate how access path dependence makes programming more difficult, consider the following code:

function findParentOf(animal) {
    var dogs = animals.dogs;

    for (var dog in dogs)
         if (dogs[dog].pups.hasOwnProperty(animal))
             return dog;

    var cats = animals.cats;

    for (var cat in cats)
         if (cats[cat].kittens.hasOwnProperty(animal))
             return cat;

    return null;
}

Now imagine you had lots of different types of animals like dogs, cats, rabbits, hamsters, etc. Can you see the amount of redundant code you would have?

In fact you data model has a lot of redundancies in it too. For example every object has a name even though its key has the same value. In addition every dog and pup has a fetch and rollover function and every cat and kitten has a meow function.

All this can be easily generalized using the correct abstraction. For example this is what I would do:

function animal(kind, parent, name) {
    return {
        kind: kind,
        parent: parent,
        name: name
    };
}

var dog = animal.bind(null, "dog", null);
var pup = animal.bind(null, "dog");

var cat = animal.bind(null, "cat", null);
var kitten = animal.bind(null, "cat");

var animals = [
    dog("Chloe"),
    pup("Chloe", "Charlie"),
    pup("Chloe", "Lily"),
    dog("Toby"),
    cat("Fido"),
    kitten("Fido", "Mia"),
    kitten("Fido", "Shadow")
];

This way of modeling data is known as the relational model. One of the best things about the relational model is that it has access path independence. Hence you can easily find objects and do other tasks. For example:

function findAnimal(name) {
    return animals.find(function (animal) {
        return animal.name === name;
    });
}

function findParentOf(name) {
    var animal = findAnimal(name);

    if (animal) {
        var parent = animal.parent;
        return parent && findAnimal(parent);
    }
}

function findChildrenOf(name) {
    return animals.filter(function (animal) {
        return animal.parent === name;
    });
}

Now that we have access path independence we can easily find objects. For example:

var lily = findAnimal("Lily");
var toby = findAnimal("Toby");
var fido = findParentOf("Shadow");
var miaAndShadow = findChildrenOf("Fido");

Finally, when it comes to the fetch, rollover and meow functions, you could define them as follows:

function fetch(animal) {
    if (animal.kind === "dog") {
        // do something
    }
}

function rollover(animal) {
    if (animal.kind === "dog") {
        // do something
    }
}

function meow(animal) {
    if (animal.kind === "cat") {
        // do something
    }
}

Or even better, put them into a namespace. Thanks to Richard Simpson for giving me the idea:

dog.fetch = function (animal) {
    if (animal.kind === "dog") {
        // do something
    }
};

dog.rollover = function (animal) {
    if (animal.kind === "dog") {
        // do something
    }
};

cat.meow = function (animal) {
    if (animal.kind === "cat") {
        // do something
    }
};

Then you could do something like:

dog.rollover(findAnimal("Charlie"));

Or with function composition:

var rolloverDog = compose(dog.rollover, findAnimal);

function compose(f, g) {
    return function (x) {
        return f(g(x));
    };
}

rolloverDog("Charlie");

Just my two cents. Hope this helps.