name配列の文字列が分割される

Question

前提・実現したいこと

加藤さんの成績は85点です。
武田さんの成績は78点です。

このように表示したいのですが・・・

発生している問題・エラーメッセージ

加さんの成績は85点です。
藤さんの成績は78点です。
,さんの成績はundefined点です。
武さんの成績はundefined点です。
田さんの成績はundefined点です。

上記の結果になってしまいます。

該当のソースコード

var name = ["加藤", "武田"];

var result = [85, 78];

document.write("<p>");
for (var i = 0; i < name.length; i++) {

document.write(name[i] + "さんの成績は" + result[i] + "点です。<br />");

}
document.write("</p>");

試したこと

join
for...in
map
よけいに分からなくなってしましました。

補足情報（FW/ツールのバージョンなど）

Brackets
リリース 1.12 ビルド 1.12.0-17621 (release d3b783b99)
を使用しています。

Answer 1

window.name との名前衝突

グローバルコード上では、window.name が参照されるからです。

• window.name - Web API インターフェイス | MDN

対策

対策は二通り。

• 関数スコープ、ブロックスコープ内で変数宣言する
• window のプロパティ名と干渉しない名前でグローバルコード上で変数宣言する

コード。

• window.name との衝突回避(names) - JSFiddle
• window.name との衝突回避(const) - JSFiddle

Re: karen0310 さん

Comments

[karen0310]

ご回答有難うございます。
「プロパティ名と干渉しない名前でグローバルコード上で変数宣言する」を試しましたが、結果はもっと細かく表示されてしまいました。
関数スコープ、試しましたが「氏名」の文字数に対して点数が表示されました。
ブロックスコープはよくわかりません。
お手数ですが、具体的なコードを教えて頂けると嬉しいです。

[think49]

親記事に追記しました。
が、この場合は他人のコードを丸写しにするよりも自分のコードのミスを見直した方が良いと思います。

[yambejp]

あまり意味はありませんが、var→constの他にletでもいけるみたいですね

[karen0310]

ご回答いただきました皆様、有難うございました。
constで解決出来ましたが、なぜconstで解決出来るのか勉強不足で
よく分かりません。
これから学習しようと思います。これからもご指導よろしくお願いいたします。

[karen0310]

nameが原因なんですね？
少し見えて来ました。

[think49]

グローバル変数の宣言とは、 window.variableName への代入と等価です。
window.name はString型と規定されている為、代入処理は強制的にString型に変換されます。
const, let はブロックスコープで変数定義するので、グローバル変数の宣言とならず、引いては window.name への代入処理とならず、本現象を回避出来ます。
関数コード内でvar宣言しても同じ理屈で回避できます。
グローバル変数は衝突の問題が大きいので、基本的には避けることになります。

[karen0310]

ご丁寧な解説、ありがとうございました。
グローバル変数、ブロックスコープの理解が少し進みました。