JavaScript Puzzlers 2016 Summer

このエントリーをはてなブックマークに追加

あれ、もう2016年も半年過ぎたの?暑いですね。。。
どうも、 munepom (@__munepom__) です。
最近はお仕事で JavaScript をがっつり書いてます。
先月の社内勉強会でちょっとしたクイズをやったので、今回はみなさまにもトライしていただきたいなー、と。

てなわけで、 JavaScript Puzzlers 2016年夏の陣でございます。

Puzzler ご存知でしょうか?
あるプログラムの実行結果がどのようなものになるかを
複数の選択肢の中から答える、
クイズ形式の問題(パズル)のことです。

今回は、 ECMA 262 (6.0) の挙動ベースで考えてください。
PC 版の Firefox, Chrome (それぞれ 2016-07-10 の最新版) での動作結果を答えとします。 IE ? ナニソレ。。。

では、スタート!

Q1: What's the result?

var fragment = 'Flag'; console.log('Hello ' + (fragment === 'Flag') ? 'World' : 'none' );
World
Hello World
Hello none
others
1. 先に 'Hello ' + (fragment === 'Flag') を評価します
2. 'Hello true' ? 'World' : 'none' を評価します
3. 'World' となります

Q2: What's the result?

var nullpo = [typeof null, null instanceof Object]; console.log(nullpo);
["object", false]
["object", true]
[undefined, false]
others
JavaScript の最初の実装では、値は、型を表す「タグ」と「値そのもの」で表されていました。
オブジェクトの型タグは 0 で。
で、 null のそれは NULL ポインタ(0x00 は殆どのプラットフォームに存在する)で示されていました。
その為 Null の型タグは 0 と見做され、typeof null === 'object' となります。

Q3: What's the result?

var is_same = [] == []; console.log(is_same);
true
false
error
others
[] = new Array(0)
つまり、 Array のインスタンスとなります。
今回は、それぞれ異なるインスタンス同士の比較となりますので、評価結果は false です。

Q4: What's the result?

var user_name = 'munepom'; (function(){ if (typeof user_name === 'undefined') { var user_name = 'fushiana-san'; alert(user_name); } else { alert(user_name); } })();
munepom
undefined
fushiana-san
others
var user_name = 'munepom'; (function(){ var user_name; // 実行時(?)、 Closure 内で、最初に変数が undefined 状態で定義され、評価されてしまいます if (typeof user_name === 'undefined') { user_name = 'fushiana-san'; alert(user_name); } else { alert(user_name); } })();

Q5: What's the result?

var end = 9007199254740992; // Math.pow(2, 53); var start = end - 2; var count = 0; var i = 0; for (i = start; i <= end; i++) { count++; } console.log(count);
2
3
0
others
var end = 9007199254740992; // IEEE754 で定義される最大値を超える値 var start = end - 2; var count = 0; var i = 0; for (i = start; i <= end; i++) { // 9007199254740992 === 9007199254740993 と評価されます // 加算は止まらず、評価結果は true のままなので、無限ループに突入します count++; } console.log(count);

Q6: What's the result?

console.log( 0.8 - 0.6 === 0.2, 0.5 - 0.3 === 0.2, 0.5 - 0.28 === 0.22, 0.5 - 0.25 === 0.25 );
true true true true
true false false true
false true false true
others
IEEE754 という計算規格で計算された結果ですが、 0.5 や 0.25 のように、キリ良く 2 進数変換できるもの以外は、 たまたま計算が合うものと思っておくと良いかと。。。

Q7: What's the result?

var a = [[0]]; if (a) { if (a == true) { console.log("sweet"); } else { console.log("rotten"); } } else { console.log("why!?"); }
sweet
rotten
why!?
others
Array の 古典的な WTF (What's The F***)
Array が判定にかけられる場合、要素が 1 つだけの場合は、 Array の中身を剥いでいき、、、
最終的に要素が 1 つだけの場合は、その値と比較が行われるようです。
お気をつけて。

Q8: What's the result?

var int_arr = ["1", "1", "1"].map(parseInt); console.log(int_arr);
[1, 1, 1]
[NaN, NaN, NaN]
[1, NaN, 1]
others
["1", "1", "1"].map(parseInt); ↓ ["1", "1", "1"].map((elm, idx, arr) => parseInt); ↓ ["1", "1", "1"].map((elm, idx, arr) => parseInt(elm, idx)); ↓ ["1", "1", "1"].map(function(elm, idx, arr) { return parseInt(elm, idx) }); ↓ [parseInt("1", 0) parseInt("1", 1) parseInt("1", 2)] = [1, Nan, 1]

Q9: What's the result?

var event = new Event('arrow'); window.addEventListener('arrow', function(e){ 'use strict'; console.log(typeof this); var func = function(){ console.log(typeof this) }; func(); var arrow = () => { console.log(typeof this) }; arrow(); }); window.dispatchEvent(event); // fire event
object, object, object
object, undefined, object
object, undefined, undefined
others
var event = new Event('arrow'); window.addEventListener('arrow', function(e){ 'use strict'; console.log(typeof this); // Window Object var func = function(){ console.log(typeof this); // この匿名 closure の this を参照します。 // strict モードなら undefined (通常は Window Object) }; func(); var arrow = () => { console.log(typeof this); // same as this in listener (Window Object) }; arrow(); }); window.dispatchEvent(event);

Q10: What's the result?

(ᆞωᆞ)=_=3; var puni = (ᆞωᆞ).o-3; console.log(puni);
0
3
NaN
others
(ᆞωᆞ)=_=3; ↓ (ᆞωᆞ)=3; ↓ ᆞωᆞ=3; (ᆞωᆞ).o-3; ↓ ᆞωᆞ.o-3; ↓ undefined-3; ↓ NaN

いかがでしたか?
顔文字系の問題で
╭( ・ㅂ・)و ̑̑ グッ !
が使えなかったのが心残りでしたが、問題作ってみると良い勉強になりますね。

もっとすげぇ Puzzler 作るよ!という方!ぜひ一緒に開発しましょ!
SHANON Carrier Site | 株式会社 シャノン 採用ページ

Enjoy! ╭( ・ㅂ・)و ̑̑ グッ !

次の記事
« Prev Post
前の記事
Next Post »
Related Posts Plugin for WordPress, Blogger...