あれ、もう2016年も半年過ぎたの?暑いですね。。。
どうも、 munepom (@__munepom__) です。
最近はお仕事で JavaScript をがっつり書いてます。
先月の社内勉強会でちょっとしたクイズをやったので、今回はみなさまにもトライしていただきたいなー、と。
てなわけで、 JavaScript Puzzlers 2016年夏の陣でございます。
今回は、 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
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' となります。
オブジェクトの型タグは 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 です。
つまり、 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 つだけの場合は、その値と比較が行われるようです。
お気をつけて。
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! ╭( ・ㅂ・)و ̑̑ グッ !
2. 'Hello true' ? 'World' : 'none' を評価します
3. 'World' となります