Javascriptの理解を深めるクイズ

問1

AとB どちらかの記述は誤りである

A

let a = 10;
if (a <= 0) {
    console.log(a);
} elseif {
    while (a >= 0) {
        console.log(a);
        a--;
    }
}

---

B

let a = 10;
if (a <= 0) {
    console.log(a);
} else while (a >= 0) {
    console.log(a);
    a--;
}

---

答え: 誤りは A

Javascriptに elseif も else if も実は無い

} else {
    if {
    	・・・
    }
}

の短縮表記が こう

} else
	if {
		・・・
	}

---

なので

} else
	while (a >= 0) {
		・・・
	}

} else while (a >= 0) {
		・・・
	}

} else while (a >= 0) {
	・・・
}

と、書けるので B は有効で
A は未知の構文としてシンタックスエラーとなる

---

問2

AとB それぞれのコードの実行結果として
コンソールにはどうログ出力されるか？

A

function f() {
  let x = 1;
  console.log(x);
  {
    let x = 2;
    console.log(x);
  }
  console.log(x);
}
f();

---

B

function f() {
  var x = 1;
  console.log(x);
  {
    var x = 2;
    console.log(x);
  }
  console.log(x);
}
f();

---

答え: Aは 121 Bは 122

Javascriptは { let xxx } でブロックスコープを作れる

  let x = 1;
  console.log(x);
  {
    let x = 2; ← このxは別のスコープになる
    console.log(x);
  }
  console.log(x);

---

問3

let bの型は何が返ってくるか

function a<T>(x: T): T {
  return x;
}

let b = a("123");

---

答え: 引数で渡した型情報が返ってくる

Javascriptも <T> で Generics が使える

           ↓ Tと言う仮想の型を定義
function a<T>(x: T): T {
                     ↑ 返却する変数の型を仮想のTとする
                 ↑ 引数で受取る変数の型を仮想のTとする
  return x;
}

let b = a("123");
    ↑ 型Tはつまり引数指定した`文字列型`となり
    返ってくる型Tは文字列型となる

---

問4

AとB 正しく実行されるとそれぞれどうなるか

A

var a = 'hoge';
(function(){
	console.log(a);
})();

B

var a = 'hoge';
!function(){console.log(a);}();

---

答え: 全く同じ用に hoge と出力され、実行に違いは無い

()(); も !(); も 即時実行関数 のバリエーション
古いJS仕様には無かった ブロックスコープ の代用と言う用途で利用されている

!function(){
	var a = 'hoge';
}();
console.log(a);

この場合は a は即時関数内と外でスコープが区切られる為コンソールには何も出力されなくなる

---

問5

AとB それぞれのコードの実行結果として、コンソールにはどうログ出力されるか？

A

(function ($) {
	let a = $("body").text();
	console.log(a);
})(jQuery);

---

B

(function (_) {
	let a = _("body").text();
	console.log(a);
})(jQuery);

---

答え: どちらもbodyが出力され、実行に違いは無い

javascriptは変数名に $ と _ が利用出来る
なので$ や _ に特別な言語仕様は無く変数名である

(function (htmlDomObj) {
	let bodyText = htmlDomObj("body").text();
})(jQuery);

変数名なので、本当はこうでも良い。
$を使っているのは 恐らくただの短縮表記目的なだけ である

全部知ってた？？

面白かったら イイね お願いしますね(´ω｀)