Why does JavaScript split() produce different output with different variable names?

Question

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

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
– Corbin, Commented Mar 21, 2012 at 8:55
Same as Using the variable “name” doesn't work with a JS object. One should be closed as duplicate of the other. — Oriol
– Oriol, Commented Apr 14, 2016 at 21:41

James Allardice · Accepted Answer · 2012-03-21 09:07:26Z

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"]
}

edited Mar 21, 2012 at 9:07

answered Mar 21, 2012 at 8:53

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martijn Over a year ago

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.

ZER0 · Accepted Answer · 2012-03-21 08:59:59Z

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"

answered Mar 21, 2012 at 8:59

ZER0

25.5k5 gold badges53 silver badges57 bronze badges

Comments

RSeidelsohn · Accepted Answer · 2012-03-21 08:59:19Z

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.

answered Mar 21, 2012 at 8:59

RSeidelsohn

1,2081 gold badge22 silver badges41 bronze badges

Collectives™ on Stack Overflow

Why does JavaScript split() produce different output with different variable names?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related