#crazy-js Quiz

#crazy-js Quiz
エムスリー株式会社マルチデバイスチーム
星川貴樹 (@oboenikui)

2018/12/06 M3 Tech Meetup #5 #m3tech
自己紹介
- 星川貴樹 (@oboenikui)
- 新卒2年目
- Androidエンジニア &
セキュリティエンジニア

#crazy-js？
- JavaScriptの一見おかしな挙動をするコードが自然と集ま
る社内のSlackチャンネル
- 業務内外で見つけた・考えたJSの変態コードが貼られます
- 過去に貼られたコードの中で質の良いものをクイズ形式で出
題します（いわゆるPuzzlerというやつです）

Q&A
Q. 全問正解したら何かもらえる？
A. 考えときます
Q. JS知らないんだけど💢
A. JS知ってても多分わからないので大丈夫👍

実行環境について
- strictモードではありません
- node.js v10.10.0のREPLモードの実行結果です
- console.log(...)は長ったらしいので、問題文中では
c.log(...)と書きます

Q. 実行結果は？
const getHoge = () => {hoge: 50};
c.log(getHoge().hoge);
50 が出力される文法エラー
実行時例外その他

A. 実行時例外
> Uncaught TypeError: Cannot read
property 'hoge' of undefined

ラムダ式の右側の{}はBlockStatement
BlockStatement

BlockStatementの中のhoge:はラベル
LabeledStatement

ラベル文とは
loop: for (let i = 0; i < 5; i++) {
for (let j = 0; j < 3; j++) {
if (someState) {
break loop;
}
}
}

ブロックにしたくなければ括弧で括る
const getHoge = () => ({hoge: 50});
> 50

関連リンク
MDNのアロー式に関するドキュメント
https://developer.mozilla.org/ja/docs/Web/JavaScript
/Reference/arrow_functions#Returning_object_literals

教訓
MDNを読みましょう。

c.log(1000000000000000000000);
c.log(parseInt(1000000000000000000000));
c.log(1000000000000000000000|0);
Q. それぞれ何が出力されるでしょう？
1000000000000000000000 1e+21
1 その他

c.log(1000000000000000000000);
> 1e+21
c.log(parseInt(1000000000000000000000));
> 1
c.log(1000000000000000000000|0);
> -559939584
A. それぞれの出力↓↓

解説
1. JSでは、32bit整数の範囲を超えると自動的に64bit浮動
小数点数になる
浮動小数点数では丸め誤差・情報欠落が生じるので一見変な
ことがいろいろ起こる

境界値
ソース上の値丸められた値
9007199254740993 9007199254740992
… …
~ 999999999999999803392 999999999999999700000
999999999999999803393
~ 999999999999999934463
999999999999999900000
999999999999999934464 ~ 1e+21

丸め誤差・情報欠落による一見変な挙動
9007199254740992 + 1 == 9007199254740992
> true
parseInt(1000000000000000000000)
> 1
(1000000000000000000000).toString()
> "1e+21"
parseInt("1e+21")
> 1

解説
3. ビット演算をすると32bit signed intになるためこうな
る。
シフト演算もほぼ全てで32bit signed intになるが、
>>>の場合のみ32bit unsigned intになる

教訓
仕様を理解して
書きましょう。

["512", "a", "0", "2", "3", "34"].map(parseInt)
> [512, NaN, 0, 2, 3, ??]
Q. ??には何が入るでしょう？

["512", "a", "0", "2", "3", "34"].map(parseInt)
> [512, NaN, 0, 2, 3, 17]
A. 17
※ @kusano_kさん提供

Array.prototype.mapの仕様

parseIntの仕様

つまり……
["512", "a", "0", "2", "3", "34"].map(parseInt)

こう！
["512", "a", "0", "2", "3", "34"]
.map((value, idx) => parseInt(value, idx))

こう！
parseInt("512", 0) → parseInt("512") → 512
parseInt("a", 1) → NaN (1の場合何を入れてもNaN)
["512", "a", "0", "2", "3", "34"]
0 1 2 3 4 5

こう！
parseInt("0", 2) → 0 (2進法で0は10進法でも0)
["512", "a", "0", "2", "3", "34"]
0 1 2 3 4 5

こう！
parseInt("34", 5) → 17 (5進法で34は10進法で17)
["512", "a", "0", "2", "3", "34"]
0 1 2 3 4 5

教訓
引数の個数が異なるメソッドを
コールバックに用いるのは
避けましょう。

const fun = function() {
return function() { console.log("a") }
}
(function() {
c.log("b")
fun()
})()
Q. 何がどう出力されるでしょうか？
a, bの順 b, aの順
aだけ bだけ

return function() { c.log("a") }
}
(function() {
c.log("b")
fun()
})()
> a
A. aだけ

セミコロンがないので、1つの式になる
}
(function() {
c.log("b")
fun()
})()
CallExpression

セミコロンがないので、1つの式になる
}
(function() {
c.log("b")
fun()
})()
CallExpression
argument

つまり、こういうこと
}(argument)()

const fun = function() { c.log("a") }()

const fun = c.log("a")

return function() { c.log("a"); };
};
(function() {
c.log("b");
fun();
})();
> b
> a
セミコロンがあれば防げる

関連リンク
AST explorer
https://astexplorer.net/

教訓
セミコロンをつけましょう。

void + 1 + 1
Q5. 実行結果は？
1) 2 2) undefined
3) NaN 4) エラー

> void + 1 + 1
NaN
1) 2 2) undefined
3) NaN 4) エラー

解説
(void +1) + 1
↓
undefined + 1
↓
NaN

参考
演算子の優先順位
https://developer.mozilla.org/ja/docs/Web/JavaSc
ript/Reference/Operators/Operator_Precedence

教訓
結合則のドキュメント
見て実装してください。

typeof 1 + new String("str") instanceof String
1) 'number' 2) false
3) 'numbertrue' 4) 'boolean'

> typeof 1 + new String("str") instanceof String
false
1) 'number' 2) false
3) 'numbertrue' 4) 'boolean'

解説
演算子の優先順位
typeof > + > instanceof

解説
typeof 1 + new String("str") instanceof String
'number' + new String("str") instanceof String
'numberstr' instanceof String
false

教訓
そもそも誰も
こんな実装せんわ。

// A
let in = ['in']; for (in in in) c.log(in);
// B
let of = ['of']; for (of of of) c.log(of);
Q7. 実行できるのは？
1) A, B両方 2) Aのみ
3) Bのみ 4) どちらもできない

// A
> let in = ['in']; for (in in in) c.log(in);
SyntaxError: Unexpected token =
// B
> let of = ['of']; for (of of of) c.log(of);
of
Q7. 実行できるのは？
1) A, B両方 2) Aのみ
3) Bのみ 4) どちらもできない

解説
in は予約語
of は予約語ではない

教訓
予約語だろうが
予約語じゃなかろうが
変数名にofは使うな。

Q8. この中で実行できるものを全て選べ
// 1
({ true })
// 2
({ undefined })
// 3
({ null })
// 4
({ this })
// 5
({ function() {} })
// 6
({ for(;;) {} })
// 7
({ while(...some) {} })

解説
Object Literal Shorthand Syntax
// properties
let foo = {
x: x,
y: y,
z: z,
};
// methods
let foo = {
a: function() {},
b: function() {}
};

解説
Object Literal Shorthand Syntax
// properties
let foo = { x, y, z };
// methods
let foo = {
a() {},
b() {}
};

解説
undefinedは変数（定数）扱い
その他は変数ではないので不可
// 1
({ true })
// 2
({ undefined })
// 3
({ null })
// 4
({ this })

解説
5はfunctionという名前の関数定義
7もwhileという名前の関数定義
(...someはrest parameters)
6は含まれてはいけないセミコロンが
あるのでエラー
// 5
({ function() {} })
// 6
({ for(;;) {} })
// 7
({ while(...some) {} })

解説
https://developer.mozilla.org/ja/docs/Web/JavaSc
ript/Reference/Operators/Object_initializer

教訓
ES2015の
オブジェクト初期化子を
知ってあげて。

よくある質問
Q. どうやって見つけてるの？
A. ショートコーディングしてて気づいたり、新機能を知る時に
いろいろやったり

#crazy-js Quiz

Recommended

Recommended

More Related Content

Similar to #crazy-js Quiz

Similar to #crazy-js Quiz (20)

#crazy-js Quiz