JavaScriptで書く「var,let,const」の違いと使い分け方法

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptにおけるvar、let、constの違い・使い分けについて解説します。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。

 

 

var、let、constとは

JavaScriptでは、変数や定数（以下、まとめて「変数」と表記します）を使う際、変数名を宣言することが推奨されています。var、let、constとは、JavaScriptで変数を宣言する際に使うキーワードです。

その中で、letとconstは、ECMAScript2015から採用された、新しい宣言方法のキーワードです。

 

ECMAScript2015（エクマスクリプト）とは、JavaScriptの標準仕様です。国際団体で標準化され、Google Chrome や Internet Explorer 11以降等、現代のブラウザで広く採用されています。

letとconstにより、変数の値を意図せず上書きしたり、間違って同じ名前の変数を宣言してしまうようなバグを防止できるようになりました。

実際の開発現場でも、今後広く使われることでしょう。

 

varとは

varでは再宣言、再代入が可能です。

var techacademy = '初期値OK';
techacademy = '再代入OK';
var techacademy = '再宣言OK';

 

letとは

letでは再宣言が禁止されています。

let techacademy = '初期値OK';
techacademy = '再代入OK';
let techacademy = '再宣言NG';

 

constとは

constでは、再宣言、再代入が禁止されています。

const techacademy = '初期値OK';
techacademy = '再代入NG';
const techacademy = '再宣言NG';

 

やや中級者向けのキーワードですので、説明だけでは理解が難しいかもしれません。例を見て確認していきましょう。

 

var、let、constの書き方

基本的なプログラムは以下のようになります。各キーワードの後に、変数名と、初期値を記述します。varとletは初期値を省略可能です。

var hoge1 = 'hoge1';
var hoge2;  // 初期値を省略した書き方

let fuga1 = 'fuga1';
let fuga2;  // 初期値を省略した書き方

const piyo = 'piyo'; // constは初期値を省略できない。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

var、let、constのスコープ

varとlet,constのスコープは異なります。

例えば、varはif文の中で宣言された場合、if文の中でも利用できます。

letとconstはスコープ外となり利用できません。

if (1) {
var x = 'OK';
let y = 'NG';
const z = 'NG';
}
console.log(x); //使用可能
console.log(y); //スコープ外のためエラー
console.log(z); //スコープ外のためエラー

 

var、let、constを実際に書いてみよう

この記事では、let、var、constの書き方の例について解説します。

変数の宣言は、基本的にconstを使います。constは再代入するとエラーになります。その為、値を変更したくない変数をconstを使って宣言することで、意図しない値の変更を防ぐことができます。

const piyo = 'piyo';
piyo = 'hogehoge';  // エラーになる

実行すると次のようになります。

再代入が必要な場合は、letを使います。letはvarより、変数の有効範囲を局所的にできるため、間違って同じ名前の変数を宣言してしまうようなバグを防ぐことができます。

{
  let fuga = 'fuga';  // { ... } の中だけで有効
  fuga = 'fugafuga';  // 再代入できるのでエラーにならない
  console.log(fuga);
}
console.log(fuga);  // エラーになる

実行すると次のようになります。

ほとんどの場合、constやletを使うことで間に合います。どうしても必要な場合のみ、varを使います。

これにより、変数を間違って使うことを防止できるため、プログラミングやデバッグ時の負担を軽減することができます。

 

今回の記事は以上です。

 

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。

プログラミングの初心者でも受講可能です。

この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。