javascriptのconst、let、varの使い方【現役SEが紹介】

javascripで変数を宣言するときに「const、let、var」みたいなのが頭に付いているけど、これはいったい何なのだろうか…

わかりやすく教えてほしい。

上記のお悩みを解決します。

■本記事の内容

本記事で以下の内容をお伝えします。

■本記事の信頼性

ささそらと

この記事を書いている私は、プログラミングを仕事として始めて10年以上ほど経ちます。今も現役のシステムエンジニアです。

javascriptの変数定義で必ず使用する「const、let、var」についてお伝えします。

昔のjavascriptは、varしか存在しませんでしたが、今はvar以外にもconstとletというものが存在します。

それぞれ解説していきたいと思いますが、最近のjavascriptでは基本的にconstかletを使用することが多いです。
各々の使い方や書き方を説明していきたいと思います。

javascriptのconst、let、varとは

そもそもjavascriptのconst、let、varとは？というところからお話します。

冒頭でも書きましたが、変数を宣言する際に使用するものになります。
以下のような感じです。

const a1 = 'test';
let a2 = 'test';
var a3 = 'test';

どれもconst、let、varを書いた後に変数名を定義していきます。
上記の場合ですとa1やa2、a3という変数名を宣言しており、すべて「test」という文字列が代入されています。

雰囲気同じように思えますが、const、let、varのどれで変数を宣言するかで、その変数の使い方が変わってきます。
次に各々の違いについて説明してきます。

javascripのconst、let、varの違いについて

javascripのconst、let、varの違いを知る上で、以下がポイントになってきます。

どれを定義するかによって、上記でできることが変わってきます。

よくある表ですが各々の違いとしては以下の通りです。

まず再宣言はvarのみができます。
以下のような書き方です。

var a = 1;
var a = 2;

上記の書き方を他のconstやletで行うとエラーになります。

続いて再代入が可能なのは、varとletのみです。

var a1 = 1;
a1 = 2;

let a2 = 1;
a1 = 2;

簡単に言うと一度入れた値から変更が可能かどうかっていう点です。

最後にスコープは、constとletがブロック単位でvarは関数単位です。

変数にはスコープといって、宣言の箇所によってその変数が利用できる範囲かどうかが決まってきます。

もしスコープ外で変数を利用すると未定義の変数を使用しているためエラーになります。

以下のようなイメージです。

function example () {
  const test= true;
  if (test) {
    const a = 1;
    let b = 1;
    var c = 1;
  }

  console.log(a);
}

関数単位というのは、functionの｛｝内のことを指しています。
varは宣言した対象のfunction内であれば、どこに定義されてても使用可能です。

ブロック単位とは、処理のかたまりだと思ってください。
上記の場合ですとif文の｛｝内です。
constとletは、変数宣言した同じブロック内でしか使用することができません。

仮に上記の例でいうconsole.logにconst定義したbをいれても値は出力されずにエラーが出力されます。

javascriptのconst、let、varの使い分け

javascripのconst、let、varの使い分けについて説明していきます。

まず、varは基本的に使用しないようにしましょう。
昔はこれしかなかったので、ネットとかでもvarを使用しているソースが多いのですが、javascripのバージョン的にconstとletが使用できるのであればこれらを使用してください。

先ほど説明した内容を見てもらえれば分かりますが、const、letと比べるとこれだけ仕様が大きく違うかと思います。
スコープは関数で再宣言可能ということもあり、プログラムを目で見ていったときにvarを使用してしまうと宣言した変数にどんな値が入るのかが分かりにくくなります。
※ちゃんとルールを決めて記載していればいいですが、いたるところに同じ変数名が宣言されていると混乱してしまいます。

constとletに関しては両方とも再宣言不可でスコープもブロック単位という形なので、基本的な考え方はほぼ同じです。
違うところはconstは一度設定したら値の再代入ができないという点だけになります。

したがって、宣言した変数に初期代入以降変更するものでないのであればconst、都度プログラミングの処理で値を再代入をしていきたい場合はletを使用すればよいです。

これらをちゃんと使い分けることで、constと宣言された変数はここで設定された値から変更がないということが一目でわかるので、プログラムの可読性があがります。

最後に

javascriptのconst、let、varついて説明しました。

まとめると以下の通りです。

スコープなど色々お話しましたが、とりあえずはじめは上記を押さえておけば問題ないと思います。