Javascript に再入門した

旧来の解決方法では、<body> タグと対応する </body> タグのすぐ前に <script> タグが置かれていた。<body> タグ内の HTML エレメントが完全にロード、パースされてから<script> エレメントをロードしようとしたものだ。この解決方法の問題点はスクリプトのロード、パースが、HTML DOM が完全にロードされるまでブロックされることだ。これは、膨大な Javascirpt が必要な巨大なウェブページにおいて、主要なパフォーマンス問題を引き起こし、ウェブサイトの速度を低下させてしまう。

async and defer

ブロックされたスクリプトの問題を緩和させることのできる二つの方法がある。
defer と async だ。

非同期スクリプトはページの描画を妨害することなくスクリプトをダウンロードしスクリプトがダウンロードし終わったら即座にそのスクリプトを実行する。スクリプトが特定の順序で実行されるの保証はなく、残りのページが表示されることを止めないことだけしか保証されない。async を使う一番いいタイミングはページのスクリプトがお互いに独立していて、ページ上の他のスクリプトに依存していない時だろう。

例えば、次のようなスクリプトエレメントがあるとしよう。

<script async src="js/vendor/jquery.js"></script>

<script async src="js/script2.js"></script>

<script async src="js/script3.js"></script>

このスクリプトがロードされる順番に依存することはできない。jquery,js はscript2.js と script3.js の前か後にロードされるかもしれない。この状態で、jquery に依存したスクリプト内の関数はエラーを発生させる。なぜなら、jquery はそのスクリプトが実行される時定義されていないからだ。

defer はページ上に出現した順番でスクリプトを実行し、スクリプトとコンテントがダウンロードされたら即座にそれらを実行する。

<script defer src="js/vendor/jquery.js"></script>

<script defer src="js/script2.js"></script>

<script defer src="js/script3.js"></script>

deferを持つ全てのスクリプトはページに表示される順にロードされるので、上記の例では jquery.js が script2.js と script3.js の前にロードされることと、script2.js は script3.js の前にロードされることがが保証される。

まとめ

パースを待つ必要がなく、依存がなく独立して実行できる場合に、async を使う。
パースを待つ必要があり、他のスクリプトに依存している場合は、deferを使ってロードして<script>エレメントをブラウザに実行してほしい順に並べる。

var と let の違い

参照: The difference between var and letEdit/mdn

var hosting

参照：var hosting var と let の違いを調べる前に変数宣言のメカニズムについて言及しておく。

変数宣言は他のコードが実行されるよりも前に行われるため、変数をコードのどこかに宣言することはそれを一番上に宣言するのと同じである。これは次のことを意味する：変数は宣言する前に現れて使用されるのである。この挙動を hosting という。変数の宣言が関数やグローバルコードの一番上に移動させらるからである。

bla = 2;
var bla;

// ...is implicitly understood as:

var bla;
bla = 2;

このような理由で、変数は常にスコープ内の一番上（グローバルコードや関数の一番上）に宣言して、どの変数が関数のスコープ内（ローカル）かということとスコープチェインで解決されるかをはっきりさせておくことが推奨されている。

ここで、hosting は変数宣言には影響はあるが、値の初期化には影響しないことを指摘しておく。値は割り当て指示に到達した地点で実際に行われる。

function do_something() {
  console.log(bar); // undefined
  var bar = 111;
  console.log(bar); // 111
}

// ...is implicitly understood as:

function do_something() {
  var bar;
  console.log(bar); // undefined
  bar = 111;
  console.log(bar); // 111
}

参照：Temporal dead zoneSection

let も var 同様にhosting されるが、変数が評価されるまで初期化されない。初期化される前に変数にアクセスするとReferenceError を起こす。これを Temporal Dead Zone という（以下ではTDZ）という。

function do_something() {
  console.log(bar); // undefined
  console.log(foo); // ReferenceError
  var bar = 1;
  let foo = 2;
}

スコープルール

参照: Scoping rules

let で宣言された変数は宣言されたブロックの中にスコープを持ち、そのスコープが包含する全ての子ブロックにも同じスコープに属する。次の例での、let と var の大きな違いは var のスコープはそれを閉じた関数内のすべてにわたっているといことである。

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log("First value in let",x);  // 2
  }
  console.log("Second value in let",x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log("First value in let:",x);  // 2
  }
  console.log("Seconde value in let:" ,x);  // 1
}

console.log(varTest())
console.log(letTest())

The temporal dead zone and typeof

参照: The temporal dead zone and typeof

単に宣言されていない変数と undefined を値としてもつ変数と違って、TDZの変数の型をチェックするために typeof の演算子を使うと、ReferenceError が起こる。

// prints out 'undefined'
console.log(typeof undeclaredVariable);
// results in a 'ReferenceError'
console.log(typeof i);
let i = 10;

Redeclarations

参照：Redeclarations

同じ関数やブロック内のスコープ内で同じ変数を再び宣言すると、SyntaxError が起こる。

if (x) {
  let foo;
  let foo; // SyntaxError thrown.
}

switch 文でも起こる。

switch(x) {
  case 0:
    let foo;
    break;
    
  case 1:
    let foo; // SyntaxError for redeclaration.
    break;
}

しかし、上記は case クロージャーのなかにブロックをネストさせて新しくスコープされたレキシカル環境を作れば回避できる。

let x = 1;

switch(x) {
  case 0: {
    let foo;
    break;
  }  
  case 1: {
    let foo;
    break;
  }
}

bitsukun75’s diary

Javascript 再入門

Web を始めよう

大文字小文字、スペースの扱い

Javascript

Javascript はページで何してるの？

Browser security

Script loading strategies