JavaScript Const

JavaScript Let なし

ECMAScript 2015

ES2015 では、letconst という 2 つの重要な新しい JavaScript キーワードが導入されました。

const で定義された変数は let 変数に似ていますが、再割り当てすることはできません。

const PI = 3.141592653589793;
PI = 3.14;      // うまくいかない
PI = PI + 10;   // うまくいかない

自分で試してみてください

ブロック範囲

ブロック スコープconst で宣言された変数は、let 変数と似ています。

この例では、x はブロック内で宣言されていますが、ブロックの外で宣言された x とは異なります。

var x = 10;
// x = 10
{ 
  const x = 6;
  // x = 6
}
// x = 10

自分で試してみてください

ブロックのスコープについて詳しくは、前の章 JavaScript Let をご覧ください。

宣言時に割り当てられます

JavaScript の const 変数には、宣言時に値を割り当てる必要があります。

不正解

const PI;
PI = 3.14159265359;

正しい

const PI = 3.14159265359;

実際の定数ではありません

キーワード const はやや誤解を招きます。

定数値は定義されません。 値への定数参照を定義します。

したがって、定数プリミティブ値を変更することはできませんが、定数オブジェクトのプロパティを変更することはできます。

元の値

プリミティブ値を定数に割り当てる場合、そのプリミティブ値を変更することはできません。

const PI = 3.141592653589793;
PI = 3.14;      // うまくいかない
PI = PI + 10;   // うまくいかない

自分で試してみてください

定数オブジェクトは変更可能

定数オブジェクトのプロパティを変更できます。

// const オブジェクトを作成できます。
const car = {type:"porsche", model:"911", color:"Black"};

// プロパティを変更できます。
car.color = "White";

// 属性を追加できます。
car.owner = "Bill";

自分で試してみてください

ただし、定数オブジェクトを再割り当てすることはできません。

const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

自分で試してみてください

定数配列は変更可能

定数配列の要素を変更できます。

// 定数配列を作成できます。
const cars = ["Audi", "BMW", "porsche"];

// 要素を変更できます。
cars[0] = "Honda";

// 要素を追加できます。
cars.push("Volvo");

自分で試してみてください

ただし、定数配列を再割り当てすることはできません。

const cars = ["Audi", "BMW", "porsche"];
cars = ["Honda", "Toyota", "Volvo"];    // ERROR

自分で試してみてください

ブラウザのサポート

Internet Explorer 10 以前は、const キーワードをサポートしていません。

次の表は、const キーワードを完全にサポートする最初のブラウザ バージョンを定義します。

         
Chrome 49 IE / Edge 11 Firefox 36 Safari 10 Opera 36
2016 年 3 月 2013 年 10 月 2015 年 2 月 2016 年 9 月 2016 年 3 月

再説明

JavaScript var 変数の再宣言は、プログラム内のどこでも許可されます。

var x = 2;    //  許可する
var x = 3;    //  許可する
x = 4;        //  許可する

同じスコープまたはブロック内で既存の var または let 変数を const に再宣言または再割り当てすることはできません:

实例

var x = 2;         // 許可する
const x = 2;       // 禁じられている
{
  let x = 2;     // 許可する
  const x = 2;   // 禁じられている
}

同じスコープまたはブロック内では、既存の const 変数への再宣言または代入は許可されません。

const x = 2;       // 許可する
const x = 3;       // 禁じられている
x = 3;             // 禁じられている
var x = 3;         // 禁じられている
let x = 3;         // 禁じられている

{
  const x = 2;   // 許可する
  const x = 3;   // 禁じられている
  x = 3;         // 禁じられている
  var x = 3;     // 禁じられている
  let x = 3;     // 禁じられている
}

別のスコープまたはブロックで const を再宣言することができます。

const x = 2;       // 許可する

{
  const x = 3;   // 許可する
}

{
  const x = 4;   // 許可する
}

改善

var で定義された変数は最上位にホイストされます。 Hoisting が何なのかわからない場合は、Hoisting の章を読んでください。

var 変数は、宣言する前に使用できます。

carName = "Volvo";    // ここで carName を使用できます
var carName;

自分で試してみてください

const で定義された変数は最上位にホイストされません。

const 変数は宣言されるまで使用できません:

carName = "Volvo";    // ここでは carName を使用できません
const carName = "Volvo";