前回のお話しでは変数宣言まで行いました。
今回はその変数宣言と代入について説明をしていきます。
変数へ代入する際の記号は＝となります
数学的には等しいという意味になりますが、プログラミングでは代入を意味となるり、右辺から左辺へ代入という意味になるので注意が必要です。
変数の代入について
前回もってきたJavaScriptソースが下記となります。
var x;
『x』という変数を作成したのでした。この『x』に数字の『1』を代入してみます。
var x; x = 1;
右辺から左辺の代入となるので、これで『x』という変数に『1』という数値が入りました。
コンソールログ関数でチェックすると、コンソールログ関数の『()』の中に『x』と記述してください。
そうすれば『x』の値がちゃんと展開して出力されます。
var x;x = 1; console.log(x);
注意点となりますが
「console.log(“x”)」のように変数を『”』や『’』で囲ってはダメです。
ちょっと前の記事で『”』や『’』で囲むと文字列としての扱いになってしまうという説明をしたのを覚えているでしょうか？
その理由から『”』や『’』で囲ってしまってはそのまま文字列としての『x』がコンソールに表示されてしまいます。
変数『x』として処理させたい場合は『”』や『’』で囲まずにそのまま記述するようにしてください。
var x; x = 1; console.log(x + 2);
上図の場合
これはちゃんと『3』と表示されます。なかなか便利ですね。
変数に代入された中身のことを一般に『値』と呼びます。よく使用されるので覚えておきましょう。
次にHello worldを使った変数を作成しみます。
やり方はほぼ同様で、変数ｘにHellp worldという文字列を入れれば完了ですシングルクォーテーションかダブルクォーテーションを入れ忘れないようにしてください。
var x; x = "Hello world"; console.log(x);
変数を使用する流れは上記のような形になります。
あと変数宣言と代入を一文で記述してもOKです。こんな感じですね。
また変数宣言と代入を1文で記述することも可能です。その場合は下記のようになります。
var x = "Hello world"; console.log(x);
複数の変数宣言と代入式も記入することができます。
やり方は「,」で区切るだけです。
下記のようになります。
var x = "Hello world", y, z = 0;
上記は少しややこしいですが、ｘを宣言しつつ
Hello worldを代入し変数yを宣言し
ｚを宣言し0を代入しています。
※JavaScriptの変数は内部的に自動判別され、処理をしてくれるため、型を意識せず全てvarを使って宣言してしまって問題がないです。
初期化について
変数宣言と同時にその変数に任意の値を代入することを
初期化といいます。
変数宣言を行ったあとに別の文で代入することは初期化と呼ばないので注意してください。
// これは初期化です var x = "Hello world"; // これは初期化ではなくただの代入です。 var y; y = 1;
初期化については、複雑に考えず
初期値を代入するのが基本だという程度に抑えておくのがいいでしょう。
※JavaScript以外の他の言語では変数宣言の際に変数の型を設定する必要があったり、ローカル変数のみ初期値が自動設定されなかったりとちょっとややこしいので、予期しないバグを予防するために変数を宣言する際には必ず初期値を設定して初期化しましょう、という解説があったりします。
以上のように、JavaScriptでは型の設定は必要ないので初期化についても特に意識する必要はありません
undefinedについて
変数宣言された後何も代入がされていない変数にundefinedという値が入ります。
このことを未定義値といいます
値について解説をすると長くなってしまうため、今の段階では変数に何も代入しなければundefinedになると覚えておいてください。
下図のようｈに、ソースに書かれたプログラム処理は基本的に上から順番に実行されていきますので同じ変数名に代入処理をしていくと下に書いてある方の処理が優先されます。
var x = "Hello world"; var x = "Hello world 2"; // ここで上書きされる console.log(x); // これは"Hello world 2"と出力される
上記のように注意するようにしましょう。
変数の応用
下図はコンソールに
なんて出力されるかわかりますか？
var x = 1; x = x + 1; console.log(x);
上記の正解は『2』になります。
問題はここですね。
x = x + 1;
ここでこんがらがる方がいらっしゃると思います。
数学とは異なるので、一度リセットをして覚えてください。
まず
var x = 1;
で『x』に『1』が代入されました。
そして
x = x + 1;
プログラミングは右辺から左辺へと処理が進んでいくため
右辺から考えてください。
右辺+1の時点でｘは１が代入されています。
そしてｘ+１となるため１+１は２となります。
上記のことからｘは2となります。
x = 2;
自分を掲載に使いその計算結果に自分を代入させているといった形となります。
自分自身に代入というプログラミングならではの部分で混乱をしてしまう人が多いところになります。
コメント