変数は、どんなプログラミング言語にも登場する、数値や文字列を入れておく箱、みたいな仕組み、です。
JavaScript の変数宣言について説明します。
変数宣言の例
以前のJavaScript では、変数宣言には var という単語が使われました。
|
1 2 3 4 |
var a = 100; console.log(a); // 100が出力される a = a + 10; console.log(a); // 110が出力される |
これは、aという変数を作って最初の値に 100 という数字を代入して、次に、a に 10 足した値を a に代入するということをしています。
イコールという記号が、数学的な等号を示すのではなく、代入を示す、というのは多くのプログラミング言語において不思議な慣例です。
文字列を代入する
文字列を扱う場合はこのようになります。
|
1 2 3 4 |
var s1 = 'A'; console.log(s1); // Aが出力される s1 = s1 + 'B'; console.log(s1); // ABが出力される |
この場合は、s1 という変数を用意していて、文字列を入れて、文字列をプラスすることで加算ではなくて連結を行っているんですね。
文字列をプラスすると、後ろに連結するというのも、多くのプログラミング言語での慣例です。
こんな例も考えられるでしょう。
|
1 2 3 4 |
var s2 = '100'; console.log(s2); // 100が出力される s2 = s2 + '10'; console.log(s2); // 10010が出力される |
最初の例と比べると、文字列というのは数値とは違うというのが、わかるでしょう。
var のみだったときの問題点
上の例では手軽だったので 変数を宣言するのに var の命令を使いました。
以前の JavaScript では、変数宣言の命令には var しかありませんでしたが、いくつかの問題があったので、現在は let と const で置き換えて記述するようになっています。
var の大きな問題のひとつとして、JavaScript や他の多くの言語では、大かっこ記号 { } これを使って処理のまとまりを表したりします。そのときに、それを区別することができないという問題があります。
|
1 2 3 4 5 6 7 |
var value1 = 1; console.log(value1); // 1 { var value1 = 2; console.log(value1); // 2 } console.log(value1); // 2 |
大かっこの外の value1(1行目) と 大かっこに囲まれた中の value1(4行目) は別々のものに区別したいのあるのですが、var を使ったこの例では同じものに扱われてしまっています。let の場合はどうなるか見てみましょう。
|
1 2 3 4 5 6 7 |
let value1 = 1; console.log(value1); // 1 { let value1 = 2; console.log(value1); // 2 } console.log(value1); // 1 |
これで、大かっこに囲まれた部分(4行目と5行目)では独立して value1(4行目) を使うことができます。
このプログラムは小さく短いのですぐに全体を見通すことができるので、わざわざ大かっこの外と中で同じ変数を使うこともないのかと思われるかもしれません。
しかし、プログラムが大きくなり複雑化してくると、この大かっこの区切りによって、同じ名前の変数を別のものとして扱いたい場面が多くなります。
上級者だとプログラム開発をしていくなかで、このような問題が後々やっかいなことを引き起こすと知っていますし、JavaScript以外の多数の言語では、このようなことがないので、この基本機能の改善が望まれていて、そして現在は var は let に置き換わるようになりました。
JavaScriptの上級者の人にとってはとても嬉しい改良ポイントとなります。
なので、JavaScript 初心者だとしても、上級者っぽく振る舞うには「var より let」ということを覚えたり、また、使っていくのがよいです。
変数の使える範囲、というのを、変数スコープ、と呼びます。
let で宣言された変数のスコープは 大かっこ { } で示された範囲です。
例では出していませんが、var で宣言された変数は、function で囲まれた範囲になります。が、これについては、var しかなかったときには学ぶ必要があったことなのですが、let しか使わなければ特に学ぶ必要がありませんので、気にしないでおいてください。
また、もうひとつ、var の大きな問題として、前方巻き上げ(ホイスティング)という、プログラミングする上で首をかしげたくなるような不自然な動作があります。JavaScript独特で他言語ではこんな変なことはない、という感じのものです。
また、var は何度でも同じ変数に対して変数宣言できますが、let は同じ変数を何度も宣言することはできません。これも不自然な点でした。
もはや、旧時代の JavaScript の問題点なので、現在では let を使う限りはそういう問題がおきないので var より let を使う、と知っておきましょう。
定数は const
let と同時に導入された変数宣言 const があります。const は他の言語でもよく使われる単語で、「定数宣言」という意味になります。
代入を一度きりしか行わない場合は、const を使います。
|
1 2 3 4 |
const value2 = 100 console.log(value2) value2 = value2 + 20; //ここでエラーになってしまう。 console.log(value2) |
value2 は、const で宣言された場所以外で、代入しようとするとエラーになります。「const で宣言されている変数は、値が固定化してくれる＝定数なのかどうかがわかりやすい」という、ことになります。
以前は JavaScript に定数宣言のやり方がなかったので、全て大文字で書かれた変数は定数を表すことにしよう、というJavaScriptを使う人達の中でのコーディングルールがありました。
|
1 |
var MAX_COUNT = 100; |
こんな風にしておくと、MAX_COUNT は定数なんだな、とわかるわけです。今でも通じるルールですので、今ならより望ましいのは次のように書くことでしょう。
|
1 |
const MAX_COUNT = 100; |
変数宣言のまとめ
・再代入できない変数を作るときは const を使う。
・代入される変数を作るときは let を使う。
・var は昔のJavaScript で使われていたもので問題が多い。
ということになります。
var を使わなければ、例えば、次の参考サイトの内容を学ぶ必要もなくなってしまいます。
知らないと怖い「変数の巻き上げ」とは？｜もっこりJavaScript｜ANALOGIC（アナロジック）
http://analogic.jp/hoisting/
そちらからリンクしている「「単独varパターン」のススメ」というページも、現在は学ぶ必要もなくなってしまいました。
のGoogle検索で、多数のページがでてきますが、これも学ぶ必要がないものです。
わずか数年前には知っておかなければいけなかった重要なテクニックだったのですが、今はほぼ不要になってしまうというのは、すごいことです。
このように最新のJavaScript言語で必要なものだけ学んでいけば、勉強量が減って最速で優れたエンジニアになることができます。
なるべく楽して、上級者になっていきましょう。