7

Following is some codes and output from the Chrome Developers' Console

Case 1:

var myarr = document.location.hostname.split(".");    //typed
undefined                                             //output
myarr[0]                                              //typed
"ptamz"                                               //output: ONE

Case 2:

var name = document.location.hostname.split(".");     //typed
undefined                                             //output
name[0]                                               //typed
"p"                                                   //output: TWO

Why are the two outputs (commented Output: ONE, and Output: TWO) different?

Screenshot:

enter image description here

dreftymac
  • 31,404
  • 26
  • 119
  • 182
ptamzz
  • 9,235
  • 31
  • 91
  • 147
  • 2
    Isn't `name` a reserved term? maybe that's why. – jackJoe Mar 21 '12 at 08:52
  • The two undefined's are expected since the dev console outputs whatever the expression evaluates to (you probably know that, but just figured I'd throw it out there). The name[0] and myarr[0]... Must be as James' answer says. – Corbin Mar 21 '12 at 08:55
  • Same as [Using the variable “name” doesn't work with a JS object](http://stackoverflow.com/q/10523701/1529630). One should be closed as duplicate of the other. – Oriol Apr 14 '16 at 21:41

3 Answers3

13

name is a property of window. It appears that when you try to set that property to an array, the keys are joined with a comma (the result of calling toString on an array). So you are actually setting the window.name property to the concatenation of each element of document.location.hostname.split("."), separated by commas.

Here's a screenshot from my Chrome console demonstrating what happens:

enter image description here

The reason name[0] then results in p is that you can access the characters of strings using square brackets:

name = "hello,world";
console.log(name[0]); //"h"

Edit

As others have mentioned, this will only be the case in the global scope. You are free to declare a variable named name inside a descendant scope. Although, obviously, omitting the var keyword in this case would still result in you accessing window.name:

function example() {
    var name = ["hello", "world"];
    console.log(name); //["hello", "world"]
}
James Allardice
  • 164,175
  • 21
  • 332
  • 312
  • 1
    True. If you try the line `var name = document.location.hostname.split(".");` inside a function, it works as expected, since that var has narrower scope than the global object, and so takes precedence. Chrome refuses to define a new 'name' variable if it’s already defined on the `window` object, so anything you assign to it will be converted to string. – Martijn Mar 21 '12 at 09:02
4

James is right: because name is a string property of window, if you're executing this code in the global scope you're set that property not your variable. So, if you set an array, it set to window.name the string version of that array (basically, array.toString() that is the same of array.join()).

Because it's a string – and not an array – using the square notation let you access to the single character based on a specific index. So:

var str = "ptamz";
str[0] // "p"
str[1] // "t"

It's equivalent to:

var str = "ptamz";
str.charAt(0) // "p"
str.charAt(1) // "t"
ZER0
  • 24,846
  • 5
  • 51
  • 54
1

name in global scope is an empty string, so in the latter case you get the array returned by split transformed into a string "www,hostname,com". So name[0] gets you the first letter only.

RSeidelsohn
  • 1,149
  • 18
  • 33