Choosing Between CoffeeScript Fat Arrow and Regular Arrow Functions

Decision and constraints

When writing CoffeeScript you must decide whether a method should capture the surrounding this lexically (so it always refers to the instance where it was defined) or keep the dynamic this that depends on how the function is called. The decision is driven by three constraints:

• The generated JavaScript must run in ES5‑compatible environments.
• Code should remain readable for teammates who know CoffeeScript.
• The solution must not break existing code that relies on dynamic this binding.

Supported options

Option	Syntax	this binding	Verbosity
Regular arrow	->	Dynamic, based on call site	Low
Fat arrow	=>	Lexical, bound at definition	Low
Explicit bind	function(){}.bind(this)	Lexical via bind	High
Variable capture	var _this = this; function(){}	Lexical via closure	Medium

Trade‑offs

The fat arrow (=>) gives you lexical this with no extra boilerplate, but the CoffeeScript compiler emits a __bind helper for each fat‑arrow function. This helper slightly increases the output size and can appear in stack traces, which may affect debugging. Regular arrows (->) preserve the dynamic this useful for callbacks that should receive the caller’s context, and they produce no helper. Explicit bind and manual variable capture give you full control but are more verbose.

Concrete implementation

Consider a button class where the click handler needs to refer to the button instance:

class Button
  constructor: (@element) ->
    @element.addEventListener 'click', =>
      console.log 'Clicked', @element

The fat arrow ensures that inside the listener @element refers to the instance stored in the constructor, even though the listener is invoked by the DOM.

Verification and validation

1. Compile the CoffeeScript file: coffee -c button.coffee (requires the CoffeeScript compiler installed).
2. Inspect the generated button.js; you should see a call to __bind wrapping the listener function and the listener referencing the captured this value.
3. Run the compiled JavaScript in a browser or Node environment, create a Button instance attached to a DOM element, and click the element. The console should log the element associated with that instance, confirming lexical this binding.
4. To assess size impact, compare the output of the fat‑arrow version with a version that uses a regular arrow (->) and manual bind using a tool such as uglifyjs --stats; the fat‑arrow build will be slightly larger due to the __bind helper.

Limitations

• The __bind helper adds runtime overhead and can obscure stack traces.
• Fat arrow only works for functions defined within CoffeeScript; if you pass a plain JavaScript callback that expects lexical this, you must ensure the callback is generated by CoffeeScript or manually bind it.
• If your team prefers to avoid any compiler‑generated helpers, consider using explicit bind or the variable‑capture pattern instead.