読者です 読者をやめる 読者になる 読者になる

【ES2015入門】 1 変数

ES2015には変数の定義の仕方が3つある。 varlet 、それから const である。

(function() {
  var foo = "foo";
  let bar = "bar";
  const hoge = "hoge";
  
  console.log("foo: ", foo);
  console.log("bar: ", bar);
  console.log("hoge: ", hoge);
}());

f:id:kosumoro:20160807203750j:plain

var はES2015以前から使用されている従来の変数宣言で、今までと同じように使うことができる。

let はES2015で新しく導入された変数宣言で、 var とほぼ同じ動きをする。 var と異なるのはスコープの考え方である。

(function() {
  if(true) {
    var foo = "foo";
    let bar = "bar";
  }
  
  console.log("foo: ", foo);
  console.log("bar: ", bar);
}());

f:id:kosumoro:20160807203243j:plain

var で宣言された変数が関数スコープであるのに対して、 let で宣言された変数はブロックスコープとなる。

上記の例では、 foo は無名関数内全体をスコープとしているため、 if ブロックの外でも参照可能だが、 barif ブロック内のみがスコープとなっているため、 if ブロックの外からは参照することができない。

(function() {
  // ▼▼ ここから変数fooを参照できる ▼▼

  if(true) {
    var foo = "foo";
    let bar = "bar";
    // ▼▼ ここから変数barを参照できる ▼▼

    // ▲▲ ここまで変数barを参照できる ▲▲
  }
  
  console.log("foo: ", foo);
  console.log("bar: ", bar);

  // ▲▲ ここまで変数fooを参照できる ▲▲
}());

letvar のような変数の巻き上げもない。

3つめの変数宣言 constブロックスコープである点において let に近いが、 var とも let とも大きく異なる特徴を持っている。

(function() {
  if(true) {
    const foo = "foo";
    
    console.log("test 1: ", foo);
  }
  
  console.log("test 2: ", foo);
}());

f:id:kosumoro:20160807201158j:plain

それは値の再代入ができないという特徴である。

(function() {
  const foo = "foo";
    
  foo = "bar";
}());

f:id:kosumoro:20160807201844j:plain

このように const で宣言した変数に値を再代入しようとするとエラーとなる。

3つの変数の特徴をまとめると以下のようになる。

変数宣言 スコープ 再代入
var 関数
let ブロック
const ブロック 不可