【13日】きょうの学習ログ

きょうの学習内容

• Javascript実践課題：電卓

学んだこと

• let、var、constの違い
• スコープ
• ホイスティング
• データ型の種類と参照方法

let、var、constの違い

	let	var	const
再宣言	不可能	可能	不可能
再代入	可能	可能	不可能
スコープ	ブロックスコープ	関数スコープ	ブロックスコープ
繰り返し構文	可能	可能	不可能
ホイスティング	エラー	undefined	エラー

スコープ

実行中のコードから参照できる範囲をスコープという。

/*
 * var
 */
{
  var a = 0;
}
// ブロックスコープが適用されないため、ブロック外でも値の参照が可能
console.log(a); // 0


/*
 * let
 */
{
  // ブロックスコープにより、再宣言にならない。
  let a = 1;
  console.log(a); // 1
}
// letはブロックスコープであり参照できないため、varで宣言した値が参照される。
console.log(a); // 0

/*
 * const
 */
{
  const b = 2;
  console.log(b); //2
}
console.log(b) // b is not defined

ホイスティング(変数の巻き上げ)

変数宣言が常に関数の先頭で行われたことにされる挙動をホイスティング(変数の巻き上げ)

// var
{
  console.log(a); // undefined
  var a = 0; 
  console.log(a); // 0
}

// let / const
{
  console.log(b); // Cannot access 'b' before initialization 
  const b = 0; 
  console.log(b); // 0
}

データ型の種類と参照方法

var/const/letの変数宣言を使い分けるには、データ型の種類と参照方法を知っておく必要がある。
データ型には、大きく分けて二つある

プリミティブ型（基本型）

• Boolean - true または false
• Number - 数値
• String - 文字列
• null - 空(参照を保持していない状態)
• undefined - 未定義
• BigInt (長整数) - 桁が多い数値(ES6)
• Symbol (シンボル) - 一意の値(ES6)

オブジェクト（複合型） - プリミティブ型以外全部

• オブジェクトリテラル
• 配列リテラル　など

varの使用時の注意点

varはJavaScriptで使える変数の中で最も影響範囲が広いのが特徴。

さまざまな場面で利用できる反面、意図しない再宣言や再代入によってエラーにつながる可能性がある。また、varを使うと変数名や再代入をチェックする範囲が広くなる。

上記の理由からJavaScriptで変数を定義するときは、

• 値の再代入が不要な場合はconst
• そうではない場合はlet

…の利用が適している

感想

今日は電卓を、サンプルコードを見ながら見よう見まねで作って、自分好みに微調整した。
ググったら、JavaScriptで作る電卓はたくさん出てくるけど、なるべくコードの内容を細かく解説してある記事を参考にした。
なぜなら、そうしないと、よくわからない状態でなんか良い感じのモノが出来上がっていて、Javascriptの本質的な知識が身に付かないからだ。

まだ個人的には、関数や演算子とかの理解が曖昧なので、このまま提出はしないで、コード内容をじっくり読み込んで理解する時間に充てたい。
とにかく、優先順位的には以下が大事。
👇
スピード　＜　理解度