タグ別アーカイブ: ECMAScript6

ES6の新機能を学ぶ ~constキーワードとletキーワード~

ES6(ECMAScript 6)では、従来のES5までと比較して大幅に変更が加えられている。

ECMAScriptとは、Javascript類(ActionScriptやJscript等を含む)の標準を定めたものである。

ECMAScriptについては以下を参照。
https://ja.wikipedia.org/wiki/ECMAScript

今回はletキーワードとconstキーワードを取り上げて従来との相違点について見ていきたい。
また筆者の好みにより前提となる実装はJavascriptとする。

従来、Javascriptで定数を扱う場合は、かなり面倒であった。

constキーワードは、FirefoxやChromeで早くから実装されていたが、このconstは、ES5で定められた標準ではなく、ブラウザの独自実装にすぎなかった。さらに国内で多大なシェアを占めていたIEは対応していなかった。
(IE10まで。IE11は対応している)

そのため、Javascriptでクロスブラウザを前提とした定数を実現するためには、Object.freezeやObject.definePropertyといったマニアック?なメソッドを利用して定数を実現するという、今考えると実に涙ぐましい状況だったのである。

ところが時代は変わり、IE10以前のサポートは2016年1月12日で切れるし、
IE10、IE9、IE8 – まもなくサポート終了

IE11やEdgeはconstに対応しているので、
ECMAScript compatibility table

今後、クロスブラウザで定数を扱う際に、エンジニアが苦悩させられることは少なくなるであろう。

constの構文は以下の通り。

const TACOS = 'tacos!';

console.log(TACOS);
//=> tacos!と出力される。

TACOS = 'ika';
//エラーにはならない。Chromeで確認。

console.log(TACOS);
//=> tacos!と出力される。前段で再代入できていないということ。

const TACOS = 'ika';
// => Uncaught TypeError: Identifier 'TACOS' has already been declared(…)

再代入しても書き換えは不可で、再定義しようとするとエラーになる。
まさに定数の挙動である。

今後JSでconstを大手を振って利用できるのはありがたい。

次にletだが、これはブロックスコープが有効な変数宣言である。

従来のvarによる宣言は、グローバルスコープないし関数内で定義した場合は関数スコープ、varを付けないで変数宣言するとどこで宣言してもグローバルスコープになってしまうなど事故が起きやすかったが、letの登場により、より適切な変数のスコープ管理ができるようになる。

Javascriptでは変数の巻き上げ(関数内のどこで宣言しても関数の最初から変数があるものとみなす)があるため、以下のようなコードを書くことが多かった。

function foo() {

  var result = 0, i;

  for(i = 0; i < 10; i++){
    result += i;
  }

  return result;
}

変数resultとiは関数fooのどこからでも参照できる。

この書き方には、関数途中で宣言した変数が、関数の先頭に(暗黙の裡に)巻き上げられてしまうよりは、後で利用する変数もあえて明示的に関数の先頭で宣言しておくことで、その変数が関数内のどこかで利用されるから気をつけろということを未来の自分自身も含め後にメンテする人に伝える意味合いがある。
(詳しくはJavascript the good partsを参照)

ES6でのletキーワードの導入により、このようなCOBOLっぽい?書き方は今後はしないですむ。
letキーワードにより、変数はそれを利用するコードの直前で定義することができる。

function foo(){

  var result = 0;

  for(let i = 0; i < 10; i++){
    result += i;
  }

  return result;
}

※Chromeで確認する場合は関数内に’use stric’;が必要。

この場合、resultは関数内のどこからでも参照可能だが、変数iのスコープはカッコ内の初期化式、条件式、更新式とブラケット内の文からのみ参照可能となる。
つまり変数のスコープをそれを利用しているfor文内に限定できるわけだ。

これにより変数の利用範囲が明確になるため、特にコードを読む際の効率は著しく向上しそうである。