This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
JL Flores Mena
Posted Aug 13 - Read on Facebook

Some findings I wanted to share about skinny arrows & fat arrows:
- First take a look at the Coffeescript code on the right.
- This is an example of a simple class with 2 attributes (version, text) and 2 methods (getVersion, getText).
- I create an instance (called entry), pass the attributes and then I run its methods.
- Notice how 'version' gets back as undefined, but 'text' works.
- The only difference is in the nestedFunction. I used a skinny arrow inside getVersion, and a fat arrow inside getText.
- Now take a look at the JavaScript code on the left. The tricky scope thing is either more clear or way more confusing now.

I'm still trying to understand the how and why of this topic. This is my homework for this week, just wanted to share in case this reference helps someone else.

5 Comments

Rob Byrd

I'm not too familiar with coffeescript, but I am with closures and the binding of "this". When "this" is called inside of a function, it references the context of that function. Which in the skinny arrow case, the inner functions context, or "this" is not the same as the outer functions context. The fat arrow is doing the binding for you through an IFFE, the context of "this" is passed from outer function and into the nested one. The outer functions "this" is being referenced as _this. If you console out _this and "this" from within that function you should see the inner context as "this" and the outer context you were expecting as "_this".

Jared Palmer

Double vs. single arrows allow you to control lexical 'this' and autobinding

Sam Thorne

The thing to remember about functions is that they are objects themselves. This means they are self contained; they know nothing about the external scope unless you explicitly pass it to them when you execute them. In the same way you wouldn't expect a normal object to know about things outside it.

This is also why you see weird things like:
var here = this;
setInterval( 100, function(){
console.log("Where is " + this);
console.log("Where is "+ here);
}).

Using bind or apply is a cleaner more flexible way of doing the same thing. => is the equivalent of saying bind(this).

Read the entire post on Facebook