Wednesday, May 11, 2011

Declaring JavaScript Object Properties and Shorthand Syntax

I have always had an obsession with the JavaScript language and to learn new things daily. The fact that you can do so many things with JavaScript makes it a real challenge to master the language as well as the the various coding patterns. So to keep myself up to speed (as well as challenge my readers) I'm starting this "Tricky Javascript Question" section to post my learnings on a particular topic and then follow it up with a tricky question.

After a week or so, I will post the answer to the question as well as an explanation.



Intro
I've picked two topics here, "Declaring Object Properties" basically shows you a few common ways to declare methods/functions/properties to a JavaScript object and the second topic is "Shorthand Syntax" is basically using valid shorthand syntax that looks really complicated to understand but still is 100% valid.


My Learnings
// Multiple ways to assign "methods" to custom JavaScript objects
var person = {getName: function(){}};
person["getAddress"] = function() {};
person.getAge = 28;

// You can now call the methods and properties like so
person.getName();
person.getAddress();
person.getAge;

The Question
var s = {a: function(){return 4;}};

(function (x) {
    s[x]=3;
    delete s.a;
})('b');

s.c = 5;
s['addA'] = function(){ return this.a() + this.b + this.c };
s['addB'] = function(){ return this.b + this.c };
s['addC'] = function(){ return this.c };

// What are the alerted answers and why?
1) alert(s['addA']());
2) alert(s['addB']());
3) alert(s['addC']());


Leave your comments and answers in the comment tool below (Also let me know if you have more tips on this topic, or even if i'm wrong in anyway).

Good luck!


The Answers

1) alert(s['addA']());
Answer - TypeError: this.as is not a function.

Why? Notice that in this block of code
(function (x) {
s[x]=3;
delete s.a;
})('b');

The ('b') snippet invokes the anonymous function and passes in 'b' as the parameter. Also notice that 'delete s.a' deletes the previously set a 'a' property, which is why we get this error.

2) alert(s['addB']());
Answer - 8

3) alert(s['addC']());
Answer - 5


2 comments:

  1. hey dude, person["getAddress"] is the same as person.getAddress - dot notation is much easier to read so use bracket notation only for situations where you don't know which property to lookup until runtime.

    in other words, these are the same:
    person["getAddress"] = function() {};
    person.getAddress = function() {};

    as are these (both invoke the method):
    person.getAddress();
    person["getAddress"]();
    A good pattern to have look at is the 'Revealing Module Pattern', one benefit is not having to use 'this.' before every related function call. e.g. inside getAddress() you would have a simple call to getName() instead of this.getName()

    ReplyDelete
  2. Tnx for the comment Matt.

    Yes, agreed about dot nation being more readable than [] for declaring. I was just showing some of the various ways to declare methods/properties.

    Also interesting tip on the 'revealing module pattern', i'm guessing this is similar/same as 'closures'? any links to resources?

    also, you didn't attempt solving the question? ;P

    ReplyDelete

Fork me on GitHub