JavaScript基礎

「知ったつもりでいる」「分かった気になっている」から「説明できる」状態を目指してアウトプットしていく。内容は雑多な学習メモ。

var, let, constの比較

• 基本的にconstを使う
  • 書き換えが可能だと意図しないところで書き換わってバグの原因になる可能性がある
• 再代入したい場合のみletを使う(e.g. for文)
• 現在ではvarを使うことはまずない

ホイスティング(巻き上げ)とは

• 変数を宣言した際に宣言文が関数の先頭に持ち上げられること
• 変数の初期化は記述した場所で行われるが、変数の宣言は関数の先頭に移動する
  • そのため、varで宣言した変数はどこでも使用可能になる。初期化より前では変数の値はundefinedになる
• バグの原因になる可能性があるので、let以降は修正された
  • letやconstでもホイスティング自体は行われているがエラーになる、ということらしい

console.log(foo) // undefined
var foo = 1
console.log(foo) // 1

console.log(bar) // Uncaught ReferenceError: can't access lexical declaration 'foo' before initialization
let bar = 1　// constにしても同様
console.log(bar) // 1

DOMとは

• Document Object Model の略

• 公式ドキュメントには以下のように定義されている

  • The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.
  • DOMはHTML・XMLのためのプログラミングAPIである。ドキュメントの論理構造とそのアクセス・操作の方法を定義している
    • APIって言葉に既にProgrammingて含まれていると思うけどProgramming APIとは？

• HTMLドキュメントを直接解読して表示するのではなく、DOMをもとに画面表示する

• 参考： 業務ができる中級者になるためのJavaScript入門（DOM編)

• DOMのレンダリングはHTMLソースの上から下へ順番に処理していくので、HTMLを表示するときは、まずheadタグ内を処理してからその後bodyタグ内を処理して画面に表示する。

  • 記述する場所によってJavaScriptで記述した内容を処理するタイミングが変わる
    • headタグ内
      • JavaScriptの処理をしてからbodyタグ内を処理する
    • 外部ファイル
      • ファイルの読み込み（ダウンロード）をしてからbodyタグ内を処理する
    • bodyタグ内の最下部
      • bodyタグ内のJavaScriptの記述前の処理をしたあとにJavaScriptの処理をする

• bodyタグ内の最下部に記述するのがおすすめ

  • headタグ内に記述するとbodyタグ内の処理を行う前にJavaScriptの記述を処理する（外部ファイルの場合はファイルの読み込みをする）ため、表示に時間がかかってしまうから