Javascriptのvarの意味と変数宣言の方法をわかりやすくまとめました

JavaScriptに限らずプログラミングでは変数の宣言を行う必要がありますが、JavaScriptの変数宣言で特によく出てくるのがvarです。JavaScriptの経験がある方ならvarを書いたことがあるかと思いますが、よくわからないまま記述している方も多いかと思います。

そこで、varの意味やその他の変数宣言についてわかりやすく紹介していきます。

varの意味

まずvarの意味ですが、これはシンプルにvariable、つまり変数の略です。

変数を宣言する際に、「変数」と書いて宣言しているのです。非常にわかりやすいかと思います。プログラミング言語のコードは基本的に英語がベースになっていて、開発者がプログラマーにとってわかりやすいようにそうしています。

コンピューター自体は2進数に基づいて動くため、プログラミング言語はあくまでも人間にわかりやすい表面的なものなのです。コンピューター内部ではすべて2進数で、コードは完全に独立して動いています。

そしてvarと記述するとコンピューター内部で何が行われるかですが、変数のためのメモリ領域が確保されます。また変数にはグローバル変数とローカル変数があり、関数のなかでvarを使うことでローカル変数にできます。これについて詳しくは後述します。

varの基本的な使い方

次に、サンプルコードをベースに実際のvarの使い方を解説します。まず、基本的な使い方は以下のようになります。

var num = 123;
たとえば、このように宣言と同時に初期値を入れることが可能です。初期値をnullにする場合は、以下のように宣言だけすれば良いです。
var num;
これで空の変数ができました。

varでは一つの変数だけでなく、一度varと書けば続けて複数の変数を宣言することが可能です。具体的には以下のようになります。

var num1,
 　　　　num2,
 　　　　num3;

このように、カンマ区切りで複数の変数を宣言できます。また変数同様、配列の宣言もvarで行うことできます。イメージとしては、メモリ領域の取り方が配列の方が多くなる、といった感じで捉えておくと良いでしょう。具体的には以下のようになります。

var num1 = [ ];
var num2 = new Array(2);
var num3 = [‘ペン’, ’パイナッポー’, ’アッポー’, ‘ペン’];

上から順に、空の配列、長さが2の配列、要素が4つ入った配列、となっています。配列の詳細については今回のテーマではないため割愛しますが、varの宣言によって配列のメモリ領域も確保できるということです。

またJavaScriptは変数の方を自動判別するようになっており、varは数値型でも文字列型でも自由に格納することが可能です。一応サンプルコードを紹介しておくと、以下のようになります。

var num= 100;
var String= 'こんにちは';
console.log( typeof num);
console.log( typeof String );
var num= 'pen';
console.log( typeof num);

上記のソースコードを実行すると、以下のようにコンソール出力されます。

Number
String
String

typeofは変数の方を取得するメソッドなので、それが出力されています。

まず最初のnumは数値の入っている変数なのでNumberと出力されました。Stringは’こんにちは’という文字列が格納されているので、そのままString型です。次にnumに’pen’という文字列を格納していますが、その結果最終的にnumがString型に変わっています。

言語によってはこのような変数の使い方をするとエラーになりますが、JavaScriptの場合変数の型が自動で変換されます。表面上はvarで統一されているのですが、システム的には格納する値によって自動で型が決定され、値が変われば自動的に型が変わります。

varの応用的な使い方

varの基本的な使い方は上記の通りですが、もう少し応用的な使い方もあります。

それは、varを使った関数の定義です。内部の処理的には、varでメモリ領域を確保して、そこに関数処理を格納しているイメージになります。具体的には以下のサンプルコードのように記述します。

var func = function() {
 　　　　console.log('変数の宣言と同時に関数を格納');
}
func();

上記のように、変数を宣言してそのまま関数を格納することができます。実行すると、以下のようにコンソール出力されます。

変数の宣言と同時に関数を格納

このサンプルコードでは戻り値がないため、実用性で考えるとvarで宣言する意味があまりありません。戻り値がないなら普通に関数だけ記述して、関数を呼び出して実行した方がソースコードはシンプルでしょう。ではvarで変数的と関数を同時に宣言するメリットを活かすにはどうすれば良いか。

それは戻り値を設定して変数に格納する仕様にすることです。具体的には以下のサンプルコードのようになります。

var func = function(num) {
 　　　　return num * 3;
}
func();
console.log(func);

上記のように記述すると、numが3倍返しされます。numを関数の引数として渡して、戻り値をvarで宣言したfuncに格納します。関数の呼び出しと変数への格納を同じfuncでできるので、コードをシンプル化するのに便利な記述法と言えるでしょう。

ちなみに、この場合funcを変数と呼ぶか関数と呼ぶかは意見が分かれるところです。メモリ領域を確保するための変数でもあり、呼び出すための関数にもなっている、といったイメージになります。

変数のスコープ

上で少し説明しましたが、varはローカル変数です。

ローカル変数とは、外部からはアクセスできない変数になります。varを使ってローカル変数化する方法は以下になります。

var num = 0; //グローバル変数
function global() {
 　　　　var num = 10; //ローカル変数
 　　　　console.log(num);
}
global ();
console.log(num);

上記のソースコードを実行すると、以下のようにコンソール出力されます。

10
0

globalという関数のなかでvarを使用することによって、外のグローバル変数とは隔離された結果となりました。逆に、以下のように関数のなかでvarなしで変数を宣言するとグローバル変数になります。

var num = 0; //グローバル変数
function global() {
 　　　　num = 10; //グローバル変数
 　　　　console.log(num);
}
global ();
console.log(num);

上記のソースコードを実行すると、以下のようにコンソール出力されます。

10
10

関数のなかでvarを使用していないため、numはグローバル変数になっています。その結果関数の外で宣言したnumと同じ領域を参照しており、中身が同じになりました。基本的には、なるべくローカル変数にして誤って別の場所から書き換えることがないようにした方が良いです。

以上varの概要や使い方を説明してきました。varについては知っておいた方が良いのですが、ある程度わかっていれば毎回コードを書くたびに詳細を気にする必要はありません。変数の宣言はプログラミングにおける決まりごとなので、深く考えすぎにルールに従うことも大切かもしれません。

JavaScriptのフリーランス案件をチェック

→JavaScriptの案件情報一覧はこちら