ある日僕は猫にjavascriptを教えることになった第4話(文字列の連結と未定義)

ある日僕は猫にjavascriptを教えることになった第4話(文字列の連結と未定義)

ある日僕は猫にjavascriptを教えることになった

前回までのあらすじ

ある日僕の飼っている猫「にゃーちゃん」がjavascriptを覚えたいっていうんだ。 javascript?javascriptってのはプログラミング言語なんだけど、なんでにゃーちゃんが教えて欲しいのかは まだよく分かっていないんだ。 とりあえずほっぺた舐められちゃったから「しょーがないな、、」って感じで教えているんだよ。 僕も猫に教えたことはないからゆっくり丁寧に教えているつもりだよ。

前回までの話

ある日僕は猫にjavascriptを教えることになった第1話

ある日僕は猫にjavascriptを教えることになった第2話(実際に書いてみよう)

ある日僕は猫にjavascriptを教えることになった第3話(変数の中身を出力する)

ある日僕は猫にjavascriptを教えることになった第4話(文字列の連結と未定義)

にゃーちゃん前回の続きからやるよ??忘れちゃったら戻ってね。にゃーちゃんどうしたの?そんな変な顔して。
猫jsのにゃーちゃんこの前向かいの家の台所にお魚が置いてあったにゃー。
うん
猫jsのにゃーちゃん ちょっと高いテーブルにあったからまず椅子にジャンプして、でテーブルにのっかったんだにゃー
うん
猫jsのにゃーちゃん でお魚をこっちへこいこっちへこいやって、
うん
猫jsのにゃーちゃん あれなんていうんだ。ピカピカ透明のシートが掛かっていてさ、

ラップだね。うん
猫jsのにゃーちゃん どーにもそれが難儀難儀だにゃ
うん。
猫jsのにゃーちゃん 普段だと、わたくしの爪がこー、お魚にこー引っかかって、こっちにくるにゃー、
うん
猫jsのにゃーちゃん今日という今日は、透明のシートで、、
うん
猫jsのにゃーちゃんお皿全体はくるけど
うん
猫jsのにゃーちゃん ピカピカ透明がなかなかはがれないにゃー
うん
猫jsのにゃーちゃん 諦めたにゃー
にゃーちゃん。
猫jsのにゃーちゃん にゃ?

勉強しようか?
猫jsのにゃーちゃん にゃー!!

前回は変数を代入してnameを参照したらniboshiと出力された

var name = "niboshi";
name;//"niboshi"

猫jsのにゃーちゃん にゃーにゃー
今回は文字列の結合をやるよ
猫jsのにゃーちゃん 文字列の結合??
ちょっと書いてみよう
JS Bin on jsbin.com

var name = "niboshi";
name + "san";

この2行目の「+」は演算子(えんざんし)といって簡単にいうとこの右と左を足しているよ。

猫jsのにゃーちゃん 算数と一緒かにゃ??

そうだね。その計算(評価)したものが

var name = "niboshi";
name + "san";
//"niboshisan"

だよ。
ここではnameという中身("niboshi")に対して足しているところを確認してね??

猫jsのにゃーちゃん うん。わかったんだけどなんで

var name = "niboshi";
var name + "san";
name

猫jsのにゃーちゃん こうじゃないにゃ??

varっていうのは新たに変数を宣言するためのキーワードだったよね??

にゃーちゃんの指摘した下のこの意味だと

var name = "niboshi";//①新たな変数nameに"niboshi"を入れる
var name + "san";//②新たな変数nameに"san"を加算したい。

って書いていることとなるんだよ。

猫jsのにゃーちゃん 同じ名前の変数を宣言しているにゃ??
そうなんだ。同じ変数名を宣言することは好ましくないけどできなくはないんだけど、中身が何か考えて欲しいんだ。

②のvar name でまた初期化していることになるんだよ。

猫jsのにゃーちゃん 初期化ってなんにゃ??
簡単にいうと「最初の中身の状態」を決めることだよ。
これは②の時点でまだ何も入っていないnameに+で足そうとしているので「エラー」なんだよ。

猫jsのにゃーちゃん エラー??
エラー。
"Unexpected token +"
なぜエラーかというと、
var name = 1
これは1が入っているでしょ?

猫jsのにゃーちゃん にゃーにゃー
かたや

var name;

だけだと未定義(この場合nameとは何かを「定義されていない」)とされて、undefinedっていうものが入っているんだ。
なので簡単に言うと「そこで使う+はそこでは変じゃないですか??」っていうエラーメッセージが出ている。

ここは重要なところだから試しに新たな変数

var fafa;

とだけ書いて出力してみようか!
猫jsのにゃーちゃん にゃー

var fafa;
fafa;

とだけ書いてEnterおして??
猫jsのにゃーちゃん 本当だundefinedが返ってくるにゃ!
その意味はjavascriptはfafaを参照したけど中身がないから、
どこかにある(定義されている)んじゃないかと思って探したけどなかった。なのでundefinedが出力されるんだよ。

じゃあ戻ると、さっきの質問のコードは、

var name + "san";

何も入っていない変数に+で加算しようとしている。
つまり

undefined + "san"

内部でこう解釈されて、エラーになるんだよ。
まとめると、

//①
var name = "niboshi";
name + "san";
name //"niboshisan"

//②
var name = "niboshi";
var name + "san";//"Unexpected token +"
name

①と②の違いは
①はnameを参照した行の時には中身(niboshi)が入っている。そこに"san"が足されて
"niboshi" + "san";
nameと最後の行で参照したときに"niboshisan"が出力される

2のほうは
varで同じ変数を宣言した際に初期化されてundefinedという中身が入っていないことを示す「未定義」が入っている。
何も入っていないのに"san"を足そうとしているからError

今日はこれだけ覚えようか!!

にゃーちゃんはこれからどこか行くの??
猫jsのにゃーちゃん 行くにゃーー!!
どこいくの??
猫jsのにゃーちゃん お友達猫誘って岩盤浴だにゃー!
にゃーちゃんは美意識高いね〜

前回までの話

ある日僕は猫にjavascriptを教えることになった第1話
ある日僕は猫にjavascriptを教えることになった第2話(実際に書いてみよう)
ある日僕は猫にjavascriptを教えることになった第3話(変数の中身を出力する)