javascript 変数
スポンサーリンク

あらすじ

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

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

 

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

  • var
  • let
  • const

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

 

 

スポンサーリンク

JavaScriptの変数とは

javascript 変数

まずは変数について。

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

 

例えば、

var test = “hello”;

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

 

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

 

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

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

予約値とは

  • if
  • else
  • switch
  • for
  • while
  • function

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

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

 

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

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

 

例えば、

var Hello = "Hello";

var hello = "hello";

では変数Hellohelloの2つの変数ができてしまいます。

 

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

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

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のスコープはブロックスコープ内で記載されている場合、外部での使用ができません。

 

ブロックスコープとは
ブロックスコープとは、ローカルスコープやファンクションスコープのように、if文内や関数内といった範囲の中のことを指します。

 

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

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

 

JavaScriptの変数const

概要

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

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

特徴

varletでは再代入が可能でした。

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

 

const test = "hello";
const test = "good bye"; ←禁止 (再宣言)
test = "hey"; ←禁止 (再代入)
console.log(test);//表示結果は最初に宣言したhelloとなります。

 

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

varletとの大きな違いの一つに、オブジェクトでの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"; ←これができない。

 

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

 

スコープ

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

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

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

 

 

まとめ

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

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

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

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

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

 

 

スポンサーリンク

Twitterでフォローしよう