Iterate string array error, runs for first item's letters

Question

I have a simple array loop, runs perfect in jsFiddle showing all items, see https://jsfiddle.net/8odoros/b27ocs4d/1/

What's strange is that putting the same script here as a snippet runs by letter, showing the first string letter by letter. I feel stupid, am I missing something? Check it out:

var name = ['Helen','Jim','Thomas','Luke','Theodore'];
var div = document.getElementById('cards');
for(var i=0;i<5;i++){
	var newHtml = name[i]+'&emsp;'+i+'</br>';
	div.innerHTML = div.innerHTML + newHtml;  	
}

<div id="cards"></div>

here is an overwiev of js's reserved words: w3schools.com/js/js_reserved.asp — Tom Wellbrock
– Tom Wellbrock, Commented Nov 18, 2016 at 11:33

pradeep1991singh · Accepted Answer · 2016-11-18 11:44:52Z

3

Word name is a reserved word (as @prasad answered) in javascript that why your code was not working as expected.

See below code, after changing name with names. Its seems working as was working in jsfiddle.

var names = ['Helen','Jim','Thomas','Luke','Theodore'];
var div = document.getElementById('cards');
for(var i=0;i<5;i++){
	var newHtml = names[i]+'&emsp;'+i+'</br>';
	div.innerHTML = div.innerHTML + newHtml;  	
}

<div id="cards"></div>

Note: name can only be used as local variable inside a function or iife and can not used as global varibale.

edited Nov 18, 2016 at 11:44

answered Nov 18, 2016 at 11:27

pradeep1991singh

8,4054 gold badges24 silver badges31 bronze badges

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

2 Comments

Blindman67 Over a year ago

Name is not a reserved word in Javascript!!! It is a variable in the global scope used by the browser to define the window name.

Theodore K. Over a year ago

To be clear, as the above link states "These are predefined names of implementation-dependent JavaScript objects, methods, or properties (and, arguably, some should have been reserved words)"

prasanth · Accepted Answer · 2016-11-18 11:35:40Z

2

Try any one of the function its working. name is reserved word of javascript.But applied with in function .Its not act as a reserved word.This is one of the way preventing the action.

(function () {
var name = ["Helen","Jim","Thomas","Luke","Theodore"];
var div = document.getElementById('cards');
for(var i=0;i<5;i++){
  var newHtml = name[i]+'&emsp;'+i+'</br>';
	div.innerHTML = div.innerHTML + newHtml;  	
}
  })()

<div id="cards"></div>

edited Nov 18, 2016 at 11:35

answered Nov 18, 2016 at 11:30

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

2 Comments

Tom Wellbrock Over a year ago

this works because the name attribut has no global scope anymore.

Blindman67 Over a year ago

Name is not a reserved word in Javascript. It is the name of the window and is thus a variable. You simply can not assign a value to any reserved words or use a reserved word as a variable anywhere within any javascript context, or scope. -1

Salman Arshad · Accepted Answer · 2016-11-18 12:23:04Z

Apparently name is a property of window and it has a setter which converts the input value to a string. Your code is trying to assign an array to that property which is magically converted to a string:

var name = ["foo", "bar"];
console.log(name); // array converted to "foo,bar"

So why does it work on jsFiddle? The answer is that, by default, jsFiddle wraps your code inside a function, something like this:

<script>
  window.onload = function() {
    var name = ["foo", "bar"];
    console.log(name); // ["foo", "bar"]
  }
</script>

This creates a closure where var name creates a new variable instead of referring to window.name. If you change your jsFiddle settings (JavaScript tab > Load type > No wrap - in body) then you get the same result as the StackSnippet like this:

<script>
  var name = ["foo", "bar"];
  console.log(name); // "foo,bar"
</script>

The solution is not to pollute the global namespace in the first place. That way you do not have to lookup the list of "words not to use as JavaScript variables".

Blindman67 · Accepted Answer · 2016-11-18 12:02:19Z

1

`name` AKA `window.name`

Well name is most definitely not a reserved word in javascript.

name AKA window.name is the name of the window. Its value is set by a setter function and as the window name should be a string. So when you set it with name=["foo","bar"] it is converted to a string.

It is unfortunate that Javascript must share the global name space with every man and his dog and this illustrates another reason to avoid the global scope whenever possible.

answered Nov 18, 2016 at 12:02

Blindman67

54.6k11 gold badges88 silver badges152 bronze badges

Collectives™ on Stack Overflow

Iterate string array error, runs for first item's letters

4 Answers 4

2 Comments

2 Comments

Comments

`name` AKA `window.name`

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

name AKA window.name

Comments

Your Answer

Sign up or log in

Post as a guest

Related

`name` AKA `window.name`