coffescript scope misunderstanding

Question

I'm trying to understand variable scopes in coffeescript and got confused a little bit, here's an example:

CoffeeScript code:

  x = "localscope"
  z = () -> 
    x = "functionscope"
    console.log(x)

  console.log(x)

Javascript compiled result:

(function() {
  var x, z;

  x = "localscope";

  z = function() {
    x = "functionscope";
    return console.log(x);
  };

  console.log(x);

}).call(this);

As I know in pure javascript all variables wrapped in function acts in the same scope. So as I understood all variables written in coffescript are global?

In pure javascript a variable which is declared in function is accessible in every scope, am i right? — Plugataryov Yura, Dec 10 '12 at 17:37
The variable `x` is declared in the big `(function() {}).call(this);` scope, so it is accessible in every scope within that, not outside of it — Ian, Dec 10 '12 at 17:39
I'm not sure if this is what you mean, but the line `x = "functionscope";` is setting the same variable as `x = "localscope";`. If it were `var x = "functionscope";`, it wouldn't affect the x from the outer scope. — Shmiddty, Dec 10 '12 at 17:50
http://stackoverflow.com/questions/4214731/coffeescript-global-variables I've found a question with a simmilar problem, but i can't completely understand the way of defining global variable in coffeescript — Plugataryov Yura, Dec 10 '12 at 17:53
You're trying to declare global variables? Like the link you posted says, just extend the `window` object, since that is the global collection. If you need something global, use `window.VARIABLE_NAME = something;` or `window["VARIABLE_NAME"] = something;`. Make sense? — Ian, Dec 10 '12 at 19:52
Or, as the final line of the accepted answer says, use `root = exports ? this; root.foo = -> 'Hello World';` where `foo` is the global variable you want to define — Ian, Dec 10 '12 at 19:53

score 1 · Answer 1 · answered Dec 10 '12 at 17:37

To shadow a variable in coffeescript you need to do something like this:

x = "localscope"
z = ((x) -> () -> 
    x = "functionscope"
    console.log(x)
)(x)
console.log(x)

Resulting javascript is:

var x, z;

x = "localscope";

z = (function(x) {
  return function() {
    x = "functionscope";
    return console.log(x);
  };
})(x);

console.log(x);

In your example, the x is not local to the innermost function, but referred to the same "global" x you declared at beginning. By "global", I mean accessible everywhere in the same file.

Or http://coffeescript.org/#try:x%20%3D%20%22localscope%22%0Az%20%3D%20do%20(x)%20-%3E%20()%20-%3E%20%0A%20%20%20%20x%20%3D%20%22functionscope%22%0A%20%20%20%20console.log(x)%0A(x)%0A%0Aconsole.log%20x%0Az() — Andrew Kirkegaard, Feb 22 '13 at 17:46

score 0 · Answer 2 · answered Sep 02 '13 at 09:51

Javascript has a global scope as default scope. CoffeeScript has typically 'scope per file' by the anonymous function call as default scope. This prevents variable clash between script files in CoffeeScript.

I'm assuming you would like to create a global variable, wouldn't you? For that purpose you need to attach your variable to 'root object'. For a browser script it will be window object. So you just need to:

window.x = 'globalscope'

...and done.

If you ment the opposite, so the variable isolation at function level. It will be created as such but you need to use different name. Please check the example from coffeescript.org (text search for 'scope'):

CoffeeScript

outer = 1
changeNumbers = ->
  inner = -1
  outer = 10
inner = changeNumbers()

Compiled to JavaScript

var changeNumbers, inner, outer;

outer = 1;

changeNumbers = function() {
  var inner;
  inner = -1;
  return outer = 10;
};

inner = changeNumbers();

score 0 · Answer 3 · answered Sep 04 '14 at 00:18

It looks like you're confused about how CoffeeScript handles local scoping.

When a variable is defined, CoffeeScript hoists its variable definition to the top of the scope at which the variable is defined. Thus,

x = 'localscope'
z = ->
  x = 'functionscope'

gets parsed exactly as you described to

var x, z;
x = 'globalscope';
z = function () {
  x = 'localscope';
};

When the entire file is compiled, CoffeeScript wraps all of the code you've written into an anonymous function so that even your highest scoped variables do not bleed into the global namespace. That's the (function () { ... }).call(this) that you see at the top and bottom of the JavaScript version of your code.

If you're used to writing in Ruby, your expectation would be

> x = 5
> def z
>   x = 7
>   puts x
> end
> z # logs '7'
> x # still 5

Ruby automatically scopes every variable declaration locally unless the variable is defined otherwise (e.g. as an instance variable or a global variable).

JavaScript, on the other hand, scopes variables any time it sees the var prefix.

var x = 5;
function z () {
  var x = 7;
  console.log(x);
};
z(); // logs '7'
x; // still 5

CoffeeScript assumes that you might want your variables to permeate from higher scope to lower scope, and except for global variables (which can be set on the window object), there's no way to set an 'instance variable'-like variable that is scoped sort-of locally.

As @Esailija notes (although the solution isn't implemented quite perfectly), you can ensure that the x is scoped locally to the z function by passing in x as an argument, since JavaScript automatically scopes arguments only locally to the function that accepts them:

var x = 5;
function z (x) {
  x = 7;
  console.log(x);
};
z(); // logs '7' -- in JS, it's OK to execute a function without a named argument, which defaults to undefined
x; // still 5

or in CoffeeScript:

x = 5
z = (x) ->
  x = 7
  console.log x
z()
console.log x

As a side note, @Esailija 's solution is more idiomatically written using the do invocation:

x = "localscope"
z = do (x) -> () ->
  x = "functionscope"
  console.log(x)
console.log(x)

coffescript scope misunderstanding

3 Answers3