0

The following snipped is modified from MDN

const person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    console.log(name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + name[0] + '.');
  }
};

person.bio();
person.greeting();

Notice that I removed this from before name[0]. When I do this, Bob is output as J? WTF? :|

There isn't even a capital 'J' anywhere in the code? What is going on???

CodeFinity
  • 1,142
  • 2
  • 19
  • 19
  • Cannot reproduce in my console. – Sterling Archer Apr 03 '18 at 23:22
  • http://jsbin.com/razugax/edit?js,console Does this help? @SterlingArcher – CodeFinity Apr 03 '18 at 23:23
  • 2
    name is global variable. Thats all. So you are accessing variable set somewhere on page.. Try to console.log(age). You get undefined. – bigless Apr 03 '18 at 23:24
  • 2
    Without `this`, `name` references the global scope. Print out `window.name`, and you'll see where the `J` comes from. In your linked snippet, the value of `window.name` is `JS Bin Output` (note the 0'th character is `J`). – CRice Apr 03 '18 at 23:25
  • 1
    @bigless is correct. `name[0]` in this case is accessing `window.name[0]` which is the string `"JS Bin ..." – Sterling Archer Apr 03 '18 at 23:26
  • That's the thing, if you see: http://jsbin.com/razugax/edit?js,console there is no other code. That is all code in its entirety...let me try in normal IDE outside of JSBin...... – CodeFinity Apr 03 '18 at 23:26
  • OMG! WTF! JSBin is sabotaging things now?! – CodeFinity Apr 03 '18 at 23:27
  • Maybe not duplicate @SterlingArcher I do understand global vs local scoping. But, couldn't see that name was assigned to 'JSBin' in this case. It's not apparent. – CodeFinity Apr 03 '18 at 23:27
  • @CodeFinity JSBin isn't doing anything other than setting a name for the tab. It's hardly being a saboteur. – Paul Apr 03 '18 at 23:28
  • @Paulpro IK Just being a bit overdramatic, but you must admit that that's not immediately apparent... – CodeFinity Apr 03 '18 at 23:29
  • 1
    @CodeFinity Agreed, but you will find the similar behaviour on any page. All properties of `window` are accessible as globals in a browser (https://developer.mozilla.org/en-US/docs/Web/API/Window). So there are lots of other examples like `length` or `location`. – Paul Apr 03 '18 at 23:31
  • @Paulpro OIC So, window.name outputs basically title of the page... I didn't know that actually. – CodeFinity Apr 03 '18 at 23:34
  • @CodeFinity Yeah, so hopefully you can see that JSBin specifically isn't doing anything strange. The strangeness you see would happen anywhere, even on your own pages. `name` isn't actually the title though (my bad for comparing it to an HTML `` tag), it's often an empty string (in which case `name[0]` would be `undefined`), but it is usually set to some non-empty string for iframes. – Paul Apr 03 '18 at 23:35
  • 1
    @bigless `console.log(age);` should throw a Reference Error, not output `undefined`, unless there actually is a global (or any other accessible scope) called `age` with the value `undefined`. – Paul Apr 03 '18 at 23:42
  • @Paulpro you also probably know what I would to say.. But you are right. I thought undefined variable reference, not undefined as value. – bigless Apr 03 '18 at 23:47

1 Answers1

-1

On jsbin, if you do console.log(name), you will get "JS Bin Output ". name[0] is therefor "J".

http://jsbin.com/zaquvipuma/1/edit?js,console

dave
  • 62,300
  • 5
  • 72
  • 93