Different ways of writing a function bringing undesired effects in JavaScript?

Question

UPDATE:

QUESTION SOLVED! I realized that the reason for this is due to 'hoisting.' Basically, the JavaScript interpreter parses the code and declares all variables (but does not initialize them) at the beginning of the function. That's why the second examples isn't working. Because JavaScript interpreter declares var changed; at the beginning of the function, but does not initialize it until it reaches the body of the code.

For function declaration like the first example, instead of JavaScript moving up just the variable name like the second example, it moves up (or 'hoists') up the entire function at the beginning of the parent function, which is why it works!

Anyway, I wrote this for personal reference and thanks for the answers...

This one works: http://jsbin.com/emarat/7/edit

$(function(){
  $name = $('#test');
  $name.change(changedName);

  function changedName (e){
      console.log('e: ', e); 
      console.log('e.currentTarget: ', e.currentTarget); 
      console.log('$(e.currentTarget).val(): ', $(e.currentTarget).val());
      $('#test-display').text($(e.currentTarget).val());
    }
});

but this one doesn't: http://jsbin.com/emarat/9/edit

$(function(){
  $name = $('#test');
  $name.change(changed);

  var changed = function(e){
      console.log('e: ', e); 
      console.log('e.currentTarget: ', e.currentTarget); 
      console.log('$(e.currentTarget).val(): ', $(e.currentTarget).val());
      $('#test-display').text($(e.currentTarget).val());
    };
});

Why?

score 4 · Accepted Answer · edited May 23 '17 at 12:20

4

The latter one is equivalent to:

$(function(){
  var changed;
  $name = $('#test');
  $name.change(changed);

  changed = function(e){
      //...
    };
});

which makes it obvious why it doesn't work. At the time of usage, the changed variable is not yet initialized (undefined).

But if you declare a function using the function yourFunctionName() syntax, it is available in the whole scope. (Which, in JavaScript, is the parent function.) Otherwise it wouldn't be possible to use functions prior to their declaration. It is called hoisting.

2

@Farmor Not null but undefined. – Ates Goral Feb 01 '12 at 08:18
@TomaszNurkiewicz: you’re very welcome — I struggled with the distinction between the two ways of creating a function in JavaScript, and your explanation of hoisting here helped me understand it further. I just thought I’d add a bit of explicit detail for slow-brains such as myself. – Paul D. Waite Feb 01 '12 at 09:46

score 0 · Answer 2 · answered Feb 01 '12 at 08:08

0

Because the variable is defined after its use.

var a = 1;
var c = a + b;
var b = 2;

You wouldn't expect that code to run.

answered Feb 01 '12 at 08:08

Farmor

8,604
7
34
59

score 0 · Answer 3 · answered Feb 01 '12 at 08:12

The first one defines a function in the scope. The second one creates a inline function and stores a reference to it in the local variable changed. The problem is that you fill the variable after you use it.

This would work:

$(function(){
  var changed = function(e){
      console.log('e: ', e); 
      console.log('e.currentTarget: ', e.currentTarget); 
      console.log('$(e.currentTarget).val(): ', $(e.currentTarget).val());
      $('#test-display').text($(e.currentTarget).val());
  };

  $name = $('#test');
  $name.change(changed);
});

http://jsbin.com/emarat/11/edit

Different ways of writing a function bringing undesired effects in JavaScript?

3 Answers3

See also: