入門編『複数の引数』
「まぁ色々あったが、授業を進めようか?」
エイダはまだご機嫌斜めだったが、魔導書の授業には耳を傾けている。
「では先程のように、alert関数の中身も見れるかどうか試してみよう」
<script>
alert(alert);
</script>
新たな術式を入力し、魔導書は説明する。
「これはalert関数に、alert自身を引数で渡して中身を表示する術式だ。しかし実際にやってみると?」
function alert() {
[native code]
}
警告文に関数の中身が表示される。しかし思っていたのと違う結果に、エイダは困惑する。
「あれ?中身が書かれてない」
「そう、『native code(従来のコード)』と書かれていて、実際の中身が見れない。alertはjavascriptを作った人達が用意した関数なのだが、javascriptで書かれていない可能性か高い」
「えっ?javascriptなのにjavascriptで書かれていないの?」
「そう。確か『C++言語』で書かれていると思う」
エイダはガクッと肩を落とす。
「また新しいプログラム言語が出てきた」
「ごめん。なるべく新しい単語は出さないように気を付ける。兎に角C++言語で書かれている為、[native]と表示されるで良い?」
「ん」
魔導書は次の説明に移る為、新たな術式を入力しながら話す。
「次に関数の引数は、複数指定する事も可能だ」
<script>
function add(a,b){return a+b;}
alert(add(1,2));
</script>
「このadd関数は、引数でaとbの値を受け取り、足した数を戻り値として返す。戻り値をalertで表示しているので、画面には……」
「3が表示される」
エイダは魔導書が言い終える前に答える。
「その通り」
魔導書は嬉しそうに答え、次の質問に移る。
「では渡す因数が多過ぎる場合、どうなると思う?」
<script>
function add(a,b){return a+b;}
alert(add(1,2,3));
</script>
『うっ』と一瞬エイダは怯むが、臆せずに答える。
「これも前と同じ『3』。三つめの引数の値はadd関数に無視される、と思う……」
最後は若干、エイダの声が小さくなる。
「その通り」
『3』が画面に表示され、エイダもホッと息をつく。
魔導書は例題から引数を二つ削除して尋ねる。
「では、引数が少な過ぎる場合は?」
<script>
function add(a,b){return a+b;}
alert(add(1));
</script>
「1」と言いかけて、エイダは考え直す。
「これひっかけ問題の気がする。関数では引数は指定されてるけど、値が渡されてない場合、変数には何が入るの?」
「いい質問だ。関数には『undefined』といいう値が入る。要するに変数aには1が入り、指定されていない変数bには『undefined』が入る」
エイダのさらに質問する。
「数字の1と『undefined』が足された場合はどうなるの?」
「数字の1と『undefined』が足された場合、『NaN (Not a Number)』となる」
「あれ?『undefined』は文字列じゃないの?」
『1undefined』を期待していたエイダは、魔導書に説明を求める。
「undefinedやNaNは数字や文字列ではなく物なので、文字をくっつける『+』ではなく、足し算の『+』で計算される。そして数字以外で算術演算子を行うと、全てNaNになってしまう」
「う〜ん」
「『1undefined』を予想した?」
「うん」
エイダは正直に答える。そんなエイダに魔導書はヒントを与える。
「+を強制的に文字列演算子にしてしまう方法はある。ヒントは『""』を使う」
「ダブルクォテーション『"』で囲ってるけど、中身がない文字列?」
「そう。この中身のない文字列を式のどこかに加えれば『+』が全て文字列演算子として扱われるのだが、どこに加えれば良いでしょうか?」
エイダはじ〜っと画面を凝視し、術式を手直しする。
<script>
function add(a,b){return ""+a+b;}
alert(add(1));
</script>
「こうかな?」
魔導書は優しく尋ねる。
「演算子の先頭に””を置いた理由は?」
「演算子は左から右順だから、最初の計算は『""+a』。""は文字列だから『+』は文字列演算子で計算される。次の計算は『a+b』だけど、aは文字列だから、これも文字列演算子になっちゃう」
「良い答えだ」
魔導書は術式を実行し、『1undefined』が表示される。
「では、この関数に何も渡さなかった場合はどうなる?」
<script>
function add(a,b){return ""+a+b;}
alert(add());
</script>
「『undefinedundefined』! aとbの関数は両方とも『undefined』で、文字列としてくっつくから」
エイダは間髪を入れずに答える。魔導書はエイダの理解力の早さに舌を巻く。
「参った。理解が早いから驚いた」
エイダは自慢げに胸を張る。
「意地悪い質問じゃなければ、余裕だもん」
「そうか」
難しければ怒り、簡単だと余裕と言い張る。魔導書は質問の難易度に頭を悩ますのであった。
ーーーーーーーー ログ ーーーーーーーーーー
エイダは『複数の引数の引き渡し方』を理解した。
『関数』スキルがLV3になった。
エイダは『""による文字列変換』を理解した。
『文字列演算子』スキルがLV2になった。
ーーーーーーーーーーーーーーーーーーーーーー
登場人物
エイダ・ラブレス
冒険者に憧れている9歳の普通の女の子。
新しく習った事を使いこなしている凄い子。
職業:術者 LV1
称号:初心者
スキル:『関数 LV3 up』『構文 LV1』『文字列 LV1』『コメント LV1』『算術演算子 LV1』『文字列演算子 LV2 up』『変数 LV1』『代入演算子 LV1』
関数:『alert()』
HTMLタグ:『<script>』
喋る魔導書
エイダが森の奥で出会った喋る魔導書。
意地悪な質問は控えようと心に決めた。
作者より
書いてくうちに説明がどんどん深くマニアックになり、ドツボにはまりました。
複数の引数の渡し方を説明するはずが、なんで『マシン語』や『アセンブラー』を説明してるんだろう?
作者もよく知らないことは書けないので、泣く泣く大部分を削除しました。難しいです。
参考にしたページ
本当に初心者の人に捧げるコンピューター入門
http://www7a.biglobe.ne.jp/~thor/pcnyumon/nyu043.htm
C言語と機械語
https://www.eidos.ic.i.u-tokyo.ac.jp/~tau/lecture/operating_systems/gen/slides/2-C-and-assembly.pdf
Javascriptについて
https://developer.mozilla.org/ja/docs/Web/JavaScript/About_JavaScript
WebKit Engine
https://ja.m.wikipedia.org/wiki/WebKit
V8 Javascript Engine
https://ja.m.wikipedia.org/wiki/Google_V8_JavaScript_Engine
色々とjavascriptの面白い現象を検討しています
http://d.hatena.ne.jp/sandai/touch/20100302/p1
jsfiddle
native code
https://jsfiddle.net/AkiraMeru/oouty6og/
add(1,2)
https://jsfiddle.net/AkiraMeru/grog9hft/
add(1,2,3)
https://jsfiddle.net/AkiraMeru/grog9hft/1/
add(1)
https://jsfiddle.net/AkiraMeru/grog9hft/2/
add関数の演算子の先頭に""
https://jsfiddle.net/AkiraMeru/grog9hft/3/
add関数の引数に何も送らない
https://jsfiddle.net/AkiraMeru/grog9hft/4/