JavaScript 変数の中身は上書きされる

シェアする

  • このエントリーをはてなブックマークに追加
PR

あーりーです。

JavaScriptのことをマイペースで書いています。

前回は、変数に情報(数字や文字)を代入する方法を見てきました。

きょうも変数のことを少し。

スポンサーリンク

変数の中身は上書きされる

おなじ変数に次々と情報を代入していくと、どんどん上書きされます。

さんざん上書きしたあとに変数の中身を画面に表示すると、上書きされた最新のものが表示されます。

上書き前の状態

たとえば、こんなサンプルがあるとします。

これはまだ上書きをしていない、ふつう(?)の状態のものです。

上書きをしていないっていうのは、つまり、変数の代入が1回だけっていうことです。

sample.html

<html>
<head>
</head>
<body>

<script>
var xxx; // 変数xxxを使う宣言
xxx="あいうえお"; // 変数xxxに「あいうえお」を代入
document.write(xxx); // 変数xxxを画面に表示
</script>

</body>
</html>

緑色の部分がJavaScriptです。

赤い部分がコメント(説明文)です。コメントの書き方はこちらをご覧ください。

表示結果

これをメモ帳などのエディタにコピペして、HTML形式で保存し、そのファイルを開くと…

こんな表示結果になります。

表示結果

 あいうえお

実験1 変数を上書きしてみよう

では、実験です。

変数を上書きしてみます。

変数xxxに、「あいうえお」「かきくけこ」「さしすせそ」を次々と代入してみますね。

それが、こちら。

sample2.html

<html>
<head>
</head>
<body>

<script>
var xxx; // 変数xxxを使う宣言

xxx="あいうえお"; // 変数xxxに「あいうえお」を代入
xxx="かきくけこ"; // 変数xxxに「かきくけこ」を代入
xxx="さしすせそ"; // 変数xxxに「さしすせそ」を代入

document.write(xxx); // 変数xxxを画面に表示
</script>

</body>
</html>

表示結果

これをメモ帳などのエディタにコピペして、HTML形式で保存して、ファイルを開くと…

こうなります。

表示結果

さしすせそ

最後に代入された「さしすせそ」が表示されます。

ここからわかるのは、おなじ変数(この場合はxxxx)に情報を次々と代入すると、上書きされるっていうことです。

実験2 上書きするたびに表示してみよう

もうちょっと実験してみます。

さっきは、上書きして上書きして、最後の最後に表示しました。

すると、最後に代入した情報が表示されました。

今度は、上書きするたびに表示してみます。

これです。

sample3.html

<html>
<head>
</head>
<body>

<script>

var xxx; // 変数xxxを使う宣言

xxx="あいうえお"; // 変数xxxに「あいうえお」を代入
document.write(xxx); // 変数xxxを画面に表示

xxx="かきくけこ"; // 変数xxxに「かきくけこ」を代入
document.write(xxx); // 変数xxxを画面に表示

xxx="さしすせそ"; // 変数xxxに「さしすせそ」を代入
document.write(xxx); // 変数xxxを画面に表示

</script>

</body>
</html>

変数xxxに情報を代入するたびに、1回1回表示しています。

表示結果

これをメモ帳などのエディタにコピペして、HTML形式で保存して、ファイルを開くと…

こうなります。

じゃーん。

表示結果

あいうえおかきくけこさしすせそ

というわけで。

「xxx」という1つの変数だけで、「あいうえお」「かきくけこ」「さしすせそ」という3つの情報が表示されました。

おまけ 改行するには

上の表示結果は、ずらーっと1行で表示されました。

1行ごとに改行して表示したいときは、<br>タグを使います。

赤い部分が、今回追加した<br>タグです。

sample4.html

<html>
<head>
</head>
<body>

<script>

var xxx; // 変数xxxを使う宣言

xxx="あいうえお<br>"; // 変数xxxに「あいうえお」を代入
document.write(xxx); // 変数xxxを画面に表示

xxx="かきくけこ<br>"; // 変数xxxに「かきくけこ」を代入
document.write(xxx); // 変数xxxを画面に表示

xxx="さしすせそ<br>"; // 変数xxxに「さしすせそ」を代入
document.write(xxx); // 変数xxxを画面に表示

</script>

</body>
</html>

表示結果

上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、ファイルを開くと…

こうなります。

表示結果

あいうえお
かきくけこ
さしすせそ

改行されました!

以上、JavaScriptの変数は上書きされる、という話でした。

今回はこれでおしまい。

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする