JavaScriptの変数とスコープ

どうも、ぺんしるです。

今日はJavaScriptの変数とスコープについて書いていきますね。

JavaScriptの変数

JavaScriptの変数は、以下のようにvar修飾子を前に付けて、その後に変数名を入力します。変数名は一般的には英字で書きますが、日本語を使用することもできます。ただし、一般的には英字を使うので、あくまで「使えるんだー」程度の理解におさめておいてくださいね。

その他にも、以下のように変数名には規則があります。

• 先頭文字には数字の0から9は使用できない
• 大文字と小文字は区別される
• 予約語は使用できない。

var hensuu; <- OK
var Hensuu; <- OK（hensuuとは区別される）
var 変数:  <- 普通は使わないけどOK
var 4a:  <- 数字始まりなのでNG
var break; <- breakは予約後なのでNG

JavaScriptの変数の型と代入

JavaScriptには変数の型がありません。数値を入力すれば、数字型になるし、文字列を代入すれば文字型になります。

例えば、以下の例のように、変数に数値の0を代入した場合は、hensuuは数値型になります。

var hensuu = 0;

一方で、以下の例のように、変数に文字列を代入した場合は、hensuuは文字型になります。

var hensuu = 'abc';

紛らわしいけど、次の値は文字列の0が代入されているので、hensuuは文字型になります。

var hensuu = '0';

変数に入れた値を、別に変数に入れることもできます。これを代入といいます。

var x = 1;
var y = 2;
x = y; <- この行で、xにはyの値である2が設定される 

ちなみに、変数に何も代入していない時点では、変数にはundefinedがはいっています。

var hensuu; <- この時点では、hensuuにはundefinedが格納されている。

定数の書き方

定数とは、値を変更できない/したくない変数です。constを使うことで実現できます。

const hensuu = '１';

ここまで書くと、以下のような疑問を持つ方もいるかと思います。

つまり、以下のどちらの書き方でも良いのでは？という疑問ですね。

const hensuu = '１';
var hensuu = '１';

では、次の例を見てみましょう。constでhensuuに’平成’を設定していますね。その後の処理で、hensuuに’令和’を代入しようとしていますが、これはできません。JavaScriptの実行エラーになります。このように、constを付けた変数は、変更できない変数となります。

システム開発は1人だけでなく数人〜数十人で開発をします。他の誰かが知らないうちに、値を変更されることがないようにconstを使用します。

const hensuu = '平成';
hensuu = '令和';

もう１つの定数の使い方

定数のもう１つも使い方としては、複数箇所で使用する値をconstで定義する方法です。例えば、ある処理をするhogeメソッドを一定間隔で呼ぶ場合に、以下のように書いたとします。setIntervalはhogeメソッドを2000ミリ秒間隔で実行します。

setInterval(hoge, 2000);

setInterval(hoge2, 2000);

setInterval(hoge3, 2000);

さてさて、実装も一段落したときに急にお客さんから電話があり、以下のような仕様変更を言ってきたとします。

となってしまった場合に、上記の書き方だと3箇所ある2000の文字をすべて変更する必要があります。これって、面倒くさいですよね。修正漏れや修正ミスも怖いです。

このようなことを避けるために、予めconstで2000を保持しておけば、変更箇所も一箇所で済みます。成果物も綺麗なコードになります。

const inverval = 2000;
setInterval(hoge, inverval);

setInterval(hoge2, inverval);

setInterval(hoge3, inverval);

複数箇所で使用する値は定数化する、と覚えておいてくださいね。

変数のスコープ

宣言した変数は、どこでも使用できるわけではありません。宣言した場所によって、どこで使用できるかが変わります。まず、JavaScriptの変数には、大きく以下の２種類があります。

• グローバル変数
• ローカル変数

グローバル変数は、ソースコードのどこからでの参照できる変数。

ローカル変数は、宣言をした関数内でしか使用できない変数。

var scope = "Global";

function getScope() {
    console.log(scope);  <- 関数内にscope変数が存在しないので、undefinedが出力される
    var scope = "Local";
    return scope;
}

console.log(getScope()); <- "Local"と出力される
console.log(scope);      <- "Global"と出力される。getScope()で値を変更したが、変更したのはローカル変数のscopeであるためグローバル変数の値が出力される

開発をおこなう際は、なるべくローカル変数を使用するようにします。どうしてもグローバル変数にする必要がある場合のみ、グローバス変数にします。

なぜかというと、影響度を極力小さくしておきたいからです。影響度を小さくしておけば、万が一その変数を使用した処理で不具合があった場合でも、影響範囲は狭くすみます。一方で、グローバル変数を使用していた場合は、影響範囲は広くなります。

最後に

いかがでしたか？

少しづつ複雑になってきましたね。不明点があれば、お気軽に質問くださいね。

プログラム初心者向けには、以下の本が分かりやすくて参考になりますよ。

よかったら見てみてくださいね。

ではでは！！