Javascript/Jquery beginner question

Question

I am learning some jQuery basics with this great book: http://jqfundamentals.com/book/

There is an example that doesn't return the right result.

Here is the code:

  var myName = 'the global object',

      sayHello = function () {
          console.log('Hi! My name is ' + this.myName);
      },

      myObject = {
          myName : 'Rebecca'
      };

  var myObjectHello = sayHello.bind(myObject);

  sayHello();       // logs 'Hi! My name is the global object'
  myObjectHello();  // logs 'Hi! My name is Rebecca'

The log returns undefined instead of the global object for sayHello(); and I'd like to know why...

Either this is an implementation issue ('cause this works fine in Chrome) — cwallenpoole, Jun 21 '11 at 19:55
@cwallenpoole . . . either it's an implementation issue, or what? — Levi Morrison, Jun 21 '11 at 20:01

score 5 · Accepted Answer · answered Jun 21 '11 at 19:50

5

It should work properly, unless you've wrapped that code in another function, creating a new variable scope.

Example: http://jsfiddle.net/RKYNn/

As such, myName would not be available as a property on the global object.

So if you did this:

(function() {

  var myName = 'the global object',

      sayHello = function () {
          console.log('Hi! My name is ' + this.myName);
      },

      myObject = {
          myName : 'Rebecca'
      };

  var myObjectHello = sayHello.bind(myObject);

  sayHello();       // logs 'Hi! My name is the global object'
  myObjectHello();  // logs 'Hi! My name is Rebecca'

})();

...you'd get undefined because myName is no longer global, and this in the function is a reference to the global object.

answered Jun 21 '11 at 19:50

user113716

318,772
63
451
440

2

@patrick dw: my guess is that it was dave, we both got downvoted simultaneously :P – Robert Jun 21 '11 at 19:52
3

Agreed, this answer is correct. I suspect the OP had his code wrapped in a `$(document).ready()` – Andrew Whitaker Jun 21 '11 at 19:53
@Andrew Funny, that's exactly what I suggested in my post. +1 – Levi Morrison Jun 21 '11 at 19:57
Ok, I get it! Thanks. @Andrew Whitaker you're right about the code wrapped in `$(document).ready()`. It makes sense to me now – user495915 Jun 21 '11 at 20:00

score 3 · Answer 2 · edited May 23 '17 at 12:27

3

My guess is that you are running onDomReady or onLoad. If I am correct, that is your problem (or appears to be when playing around in jsFiddle). Don't wrap it up and load it in the head or body after your jQuery.

See http://jsfiddle.net/morrison/euprL/

The reason has to do with scoping. What is the scope of variables in JavaScript? sums it up quite well, I think.

edited May 23 '17 at 12:27

Community

1
1

answered Jun 21 '11 at 19:51

Levi Morrison

19,116
7
65
85

Robert · Answer 3 · 2011-06-21T20:00:41.833

The global object isn't what it's actually going to say. It was implied that it will return the global window object, which is where global variables and such live. Unless you have a global variable named myName the value will be undefined.

Edit First time through I missed the var myName = 'the global object';. That var makes it it part of the scope it's currently in, so as others have pointed out, unless you're in the global scope, it won't find the variable.

score 1 · Answer 4 · answered Jun 21 '11 at 19:54

Tested your code like this and it works:

<html>
<head>
<script type="text/javascript">
var myName = 'the global object',

      sayHello = function () {
          console.log('Hi! My name is ' + this.myName);
      },

      myObject = {
          myName : 'Rebecca'
      };

  var myObjectHello = sayHello.bind(myObject);

  sayHello();       // logs 'Hi! My name is the global object'
  myObjectHello();  // logs 'Hi! My name is Rebecca'

</script>
</head>
</html>

Can you give us some details on the context of this script?

Yes, context was the key. I wrapped the code in `$(document).ready()` — user495915, Jun 21 '11 at 20:05

Javascript/Jquery beginner question

4 Answers4