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.


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