JavaScriptの変数var,let,constの違いについて!それぞれのスコープは?

あらすじ

JavaScriptで最初につまずくといっても過言ではない、変数についてみなさんはご存知でしょうか。

変数の種類は実は一つではなく、3つあります。

今回はそんな3種類の変数

についてそれぞれの違いを解説していきたいと思います。

合わせて読みたい

プログラミングを無料で学べるおすすめサイトProgate(プロゲート)

2019.6.20

あらすじ プログラミングを独学で学びたい方や、プログラミング言語の練習をしたい方々にぜひおすすめしたいサイトがProgate(プロゲイト)です。 このサイトはWeb開発に欠かせないHTMLとCSSや、アプリ開発で使えるJava(ジャバ)、そしてPython(パイソン)など幅広いプロブラミング言語を...

JavaScriptの変数とは

まずは変数について。

変数とはデータを格納することができる「箱のようなもの」です。

例えば、

var test = “hello”;

の場合、変数名testにhelloというデータを代入しています。

最初にあるvarは変数を宣言するもので、その次にくるのがその変数名です。

変数名には好きな名前をつけることができますが、いくつか条件があります。

予約値と同じ名前をつけることはできない

予約値とは

など、すでにJavascriptで使用されている名前です。

これらを変数名として使用することはできません。

大文字と小文字を区別して使用する

Javascriptでは大文字と小文字は区別されるので、名前をつける際に必ず大文字、小文字をしっかり区別してつける必要があります。

例えば、

var Hello = "Hello";

と

var hello = "hello";

では変数Helloとhelloの２つの変数ができてしまいます。

最初の文字は数字以外にする

最初の文字は数字以外にする必要があります。

var 1hello = "hello";

と入力することはできないのです。

しかし、完全に数字を使うことができない訳ではなく、

var hello1 = "hello";

や

var hel1lo = "hello";

など、始め以外なら数字を使用することが可能です。

JavaScriptの変数var

概要

varはvariableの略です。

variableの意味は日本語でいうところの変数です。

特徴

varの特徴として挙げられるのが、いくらでも書き換えが可能ということです。

例えば、

var test = "hello";

と定義したとします。

その後のコードで、

var test = "good bye";

と新たな情報を代入すると、変数testの中身はhelloから上書きされたgood byeとなります。

また、上記のように

var test = "hello";

var test = "good bye"; (再宣言)

とvarを再び使うことを再宣言と言いますが、varなしの再代入、

test = "hey"; (再代入)

といったように使用することも可能です。

console.log(test); //表示結果がheyとなります。

スコープ

変数varが適用される範囲は基本的には全ての範囲で使用することができます。

var test = "hello"; ←グローバルスコープと言います。
if () {
    var test2 = "good bye"; ←ローカルスコープと言います。
}

console.log(test); // 表示結果はhello
console.log(test2); // 表示結果はgood bye

しかし、関数内で宣言されたvar変数は、関数外で呼び出すことができません。

var test = "hello";
function a () {
    var test2 = "good bye"; ←ファンクションスコープと言います。
}

console.log(test); // 表示結果はhello
console.log(test2); // 表示結果はReferenceError

といったように関数内の変数は外部では表示できないようになっています。

JavaScriptの変数let

概要

ES6から採用された機能で、使い方は基本的にはvarと同じです。

しかし、varとはいくつか重要な違いがあります。

それぞれの違いについて、下記特徴にて解説していきます。

特徴

letの特徴として、再代入はOKですが、再宣言が禁止されています。

例えば、

let test = "hello";

let test = "good bye" ; ←これが禁止されている。(再宣言)

test = "hey"; ←これはOK！(再代入)

console.log(test); //表示結果はheyとなります。

といったように、varでは再宣言ができましたが、letでは禁止されています。

スコープ

letのスコープはブロックスコープ内で記載されている場合、外部での使用ができません。

let test = "hello";
if () {
    let test2 = "good bye";
} 

console.log(test); // 表示結果はhello
console.log(test2); // 表示結果はReferenceError

JavaScriptの変数const

概要

constとはconstantの略で、日本語にすると「不変の」といった意味になります。

このconstもlet同様にES6から導入された機能です。

特徴

varやletでは再代入が可能でした。

しかし、このconstでは再代入もしくは再宣言が禁止されています。

const test = "hello";

const test = "good bye"; ←禁止 (再宣言)

test = "hey"; ←禁止 (再代入)

console.log(test);//表示結果は最初に宣言したhelloとなります。

constをオブジェクトで使用した場合

varやletとの大きな違いの一つに、オブジェクトでのconst宣言があります。

変数varのオブジェクト

var sport1 = {
    name: "soccer";
    players: 10;
};
sport1.players = 11; //sport1内のplayersを11に変更
sport1 = "football"; //sport1オブジェクト自体をfootballに書き換え

変数letのオブジェクト

let sport2 = {
    name: "baseball";
    players: 8;
};
sport2.players = 9; //sport2内のplayersを9に変更
sport2 = "softball"; //sport2オブジェクト自体をsoftballに書き換え

変数constのオブジェクト

const sport3 = {
    name: "basketball";
    players: 4;
}
sport3.players = 5; //sport3内のplayersを5に変更
sport3 = "rugby"; ←これができない。

varやletではオブジェクトの要素はもちろんのこと、オブジェクトそのものを書き換えることが可能ですが、constではオブジェクトの要素は変更可能ですが、オブジェクト自体を書き換えることはできないようになっています。

スコープ

constのスコープはlet同様、ブロックスコープ内のみです。

const test = "hello";
while () {
    const test1 = "good bye";
} 

console.log(test); // 表示結果はhello
console.log(test2); // 表示結果はReferenceError

合わせて読みたい

[初心者用]javascriptを1から学ぶ際におすすめな本(入門書)5選！

2020.4.13

あらすじ みなさんJavascriptというプログラミング言語は耳にしたことがありますでしょうか。 おそらくプログラマーやウェブ業界にいる方だったらほとんどの方が知っているはずです。 memoJavascriptとはプログラミング言語の中でもかなり柔軟性のある言語で、ブラウザ上だけでなくサーバー...

まとめ

いかがだったでしょうか。

なぜわざわざ新たに2つも変数を追加する必要があるのかと思った方もいるのではないでしょうか。

実はこのletとconstはかなり画期的で、範囲をブロックスコープ内に収めることが可能になり、間違って変数を再代入してしまったり、再宣言するといったリスクを減らしてくれるのです。

基本的にはletやconstを使い、どうしても必要な時にvarを使うといった使い分け方が一番良い方法ではないでしょうか。

ぜひこのlet、var、constを上手く使い分けて、読みやすくエラーの起きづらいプログラミングを行っていただけたらと思います。