Q:

Can anyone explain why array.length would return two different results here?

Can you please look at this:
(function ($) { 
    $.fn.extend({
        grid: function (settings) {
            var defaults = {
                data: [
                    ['Code','Name','Email','Other'],
                    [1,'John','john@domain.com','Johny'],
                    [2,'Bob','bob@domain.com','Bobby'],
                    [3,'Jenny','jenny@domain.com','Jen'],
                    [4,'Mary','mary@domain.com','Maryann']
                ],
                test: this.data.length
            };

            var config = $.extend(defaults, settings);

            return this.each(function(){
                this.innerHTML = config.data.length;
                this.innerHTML += "<br />" + config.test;
            });

        }
    });
}(jQuery));

$('.content').grid();

http://jsfiddle.net/w8PG6/
And explain why the two results are different?
Also how do I achieve the desired result?

A:

The problem is that when you call this.data.length, it's actually counting the length of the jQuery data function and not the length of defaults. Additionally, you can't count the length of defaults.data until after it's been assigned.
Have a look at this working example: http://jsfiddle.net/w8PG6/1/

