Why doesn't this CoffeeScript/JavaScript set the properties of created object?

Question

I've the following two CoffeeScript class definitions. I expected them to the same behavior, but they don't. In particular accessing A on instances of DoesNotWork is undefined.

fields = ["A","B","C"]

class DoesNotWork
  constructor: () ->
    _.each(fields, (f) -> @[f] = ko.observable(''))

class DoesWork
  constructor: () ->
    @A = ko.observable('')
    @B = ko.observable('')
    @C = ko.observable('')

the above code compiles to

var DoesNotWork, DoesWork, fields;
fields = ["A", "B", "C"];
DoesNotWork = (function() {
  function DoesNotWork() {
    _.each(fields, function(f) {
      return this[f] = ko.observable('');
    });
  }
  return DoesNotWork;
})();
DoesWork = (function() {
  function DoesWork() {
    this.A = ko.observable('');
    this.B = ko.observable('');
    this.C = ko.observable('');
  }
  return DoesWork;
})();

What newbie JS subtly am I missing?

It does work... it just doesn't do what you wanted it to do. — Thomas Eding
– Thomas Eding, Commented Mar 29, 2011 at 18:12

Trevor Burnham · Accepted Answer · 2011-03-29 20:32:29Z

6

Yet another solution (arguably the most readable and efficient) is to skip _.each and instead use CoffeeScript's for...in iteration:

for f in fields
  @[f] = ko.observable ''

You could even postfix the loop to make it a one-liner:

@[f] = ko.observable('') for f in fields

Remember that loops in CoffeeScript don't create context or affect scope; only functions do.

answered Mar 29, 2011 at 20:32

Trevor Burnham

77.5k33 gold badges165 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Essel Over a year ago

both answers are great choices. A shame there isn't a collection.each built into coffeescript, much like in Ruby. underscore does a fine job of patching this style but coffeescript comprehensions are pretty slick. I guess I prefer the loop mechanic up front as opposed to trailing (old c habits)

Trevor Burnham Over a year ago

Right, CoffeeScript doesn't modify prototypes. You could use CoffeeScript in conjunction with Prototype.js if you want an each method on your arrays.

Craig · Accepted Answer · 2011-03-29 18:11:04Z

4

'this' in the anonymous function passed to _.each is bound to the anonymous function, not the parent object. _.each does allow passing a context object so that this will be bound properly though

http://documentcloud.github.com/underscore/#each

so pass a ref to the object you are trying to bind to in the 3rd arg of each:

class ShouldWorkNow
  constructor: () ->
    _.each(fields, ((f) -> @[f] = ko.observable('')),this)

edited Mar 29, 2011 at 18:11

answered Mar 29, 2011 at 17:57

Craig

7,7314 gold badges31 silver badges47 bronze badges

4 Comments

gen_Eric Over a year ago

The function should be in (). It should be: _.each(fields, ((f) -> @[f] = ko.observable('')), this)

Craig Over a year ago

@Rocket: Thanks, I just copied the code in the example. Fixed.

Trevor Burnham Over a year ago

One small correction: this isn't bound to the anonymous function by default, but rather to the global context, as when you write func.call null, ....

Alex Wayne Over a year ago

You really rarely need _.each in Coffee Script. I highly recommend for/in instead.

Trevor Burnham · Accepted Answer · 2011-03-29 20:28:04Z

3

Craig's answer is correct, but an alternative solution is to define your anonymous function as a bound function. In this case, that would let you write

_.each(fields, ((f) => @[f] = ko.observable('')))

The => binds the function to the context in which it's defined, so that this always means the same thing in the function no matter how it's called. It's a very useful technique for callbacks, though in the case of _.each, it's a bit less efficient than passing this in.

You could do the same thing using Underscore by writing

callback = _.bind ((f) -> @[f] = ko.observable('')), this
_.each(fields, callback)

but => saves you a lot of typing!

answered Mar 29, 2011 at 20:28

Trevor Burnham

77.5k33 gold badges165 silver badges200 bronze badges

Collectives™ on Stack Overflow

Why doesn't this CoffeeScript/JavaScript set the properties of created object?

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related