Variable Scope - jQuery/JavaScript

Question

I'm having a bit of trouble with variable scope within jQuery/JavaScript. I'll just give a code example demonstrating my issue as it's probably easier to understand than trying to explain with words.

var example_1 = function() {
    row = 10;
}

var example_2 = function() {
    something.click(function(){
        var something_3 = function() {
            alert(row);
        }
        something_3();
    }
}

The problem is, the row variable cannot be accessed within the something_3 function. I have other variables from the example_1 function being accessed in the example_2 function, but when put in the something_3 function it no longer works. Thanks for any help!

Edit: Added extra code to show what works and what isn't. Row is defined within the Build function as are board and mines. Board and mines can be accessed but row cannot.

var build = function(row) {
  row = typeof row !== 'undefined' ? row : 5;
  board = $('.container');
  mines = [1,2,3,4]; 
}

build();

var start = function() {
  var tile = $('.container div');
  tile.click(function() {
    var this_index = $(this).index();
    var has_mine = $.inArray(this_index, mines);

    var scan = function() {
      alert(row);
    }
    if (has_mine > -1) {
      add_alert("Has mine, you're dead!");
    } else {
      scan();
      $(this).html('Clear!');
    }
 });

  var add_alert = function(msg) {
    board.append("<span class='alert'>" + msg + "</span>")
    $('body').append("<div class='blackout'></div>");
  }

}

start();

can you add a fiddle demonstrating your problem? with your *other variable* as well. — Mritunjay, Aug 15 '14 at 19:29
Without the full code, all we can do is guess. My guess is that you have row declared outside of example_1 function (probably global) making it accessible to example_3. Your other variables are probably declared within example_1 and therefor not accessible. — drneel, Aug 15 '14 at 19:31
Without the full code, hard to tell. Here's a helpful short on scope: http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript — Jonathan M, Aug 15 '14 at 19:31
Your `row` variable is being declared as a global variable. It should be able to be accessed outside `example_1`, but using implicitly declared global variable is very bad. — Ortiga, Aug 15 '14 at 19:34

Liam · Answer 1 · 2014-08-15T20:07:45.290

0

Multiple issues:

If you don't specify var in front of a variable inside a function it becomes a global variable
row doesn't get intialzed because you didn't call example_1(); yet
In an unrelated note, don't forget to use semicolons at end of the anonymous functions as it might be interpreted as self executing functions.

EDIT 2:

var build = function(row) {};

ok so your issue is the row variable is a parameter so isn't a global variable anymore. If you remove your row parameter / update variable name passed to build method, it will work.

edited Aug 15 '14 at 20:07

answered Aug 15 '14 at 19:44

Liam

2,837
23
36

My example was a bit poor so I provided some code, sorry about that. – glitchedbits Aug 15 '14 at 19:47
No problem - just making sure we don't use bad practices as it causes more issues than convenience. – Liam Aug 15 '14 at 19:55
Definitely, didn't know about semicolons at the end of anonymous functions so I appreciate that! You're also right about row being a parameter that was causing the issue, I had a feeling it might have been that but tried to fix it in the wrong way. – glitchedbits Aug 15 '14 at 20:05

Ortiga · Accepted Answer · 2014-08-15T19:59:59.557

var build = function(row) {
  row = typeof row !== 'undefined' ? row : 5;
  //[...]
}

rowis not being defined as a variable, but instead is a parameter. This way, it doesn't leak as a global variable.

Simply changing the name of parameter should work:

var build = function(rowValue) {
  row = typeof rowValue !== 'undefined' ? rowValue: 5;
  //[...]
}

However, you shouldn't be using implicitly global variable. Global variables are already bad enough.

Option one, declaring variables:

var row, board, mines;

var build = function(rowValue) {
  row = typeof rowValue !== 'undefined' ? rowValue : 5;
  board = $('.container');
  mines = [1,2,3,4]; 
}

Option two, using the global identifier:

var build = function(row) {
  window.row = typeof row !== 'undefined' ? row : 5;
  window.board = $('.container');
  window.mines = [1,2,3,4]; 
}

This fixes my issue and is very informative, thanks! – glitchedbits Aug 15 '14 at 20:11 — glitchedbits, Aug 15 '14 at 20:11

Variable Scope - jQuery/JavaScript

2 Answers2