JavaScriptの不思議なやつ

はいよ〜。

感情起伏ほぼ無しhttps://t.co/M36m7Orvbf

— 駆け出し亭めろたん、 (@renyamizuno_) December 20, 2019

感情の起伏が無でした。

これは bosyu Advent Calendar 2019 の 20日目の記事ですわい。

よろしくね。

JavaScriptってたのしいよね！
ということで、なんでそうなるの？そういうことできるの？っていうJavaScriptの挙動を書いていくぞ！

知っている人も多いと思うけどかいていく〜

Undefined

Undefinedみんな知ってるよね！
定義されてないとでるやつね。

JSでは undefined がプリミティブな値として存在しています。
プリミティブ

数値とかと同じなのですが、なんかおかしい？ところがあります。

5 = 2; // => Uncaught SyntaxError: Invalid left-hand side in assignment
null = ''; // => Uncaught SyntaxError: Invalid left-hand side in assignment
undefined = 2; // => 2

普通なら値に代入するとエラーになりますが、undefinedはそうなりません。

OK，Baby，ハニー、それは、WHY，な ぜ か？

undefined は値ではなくグローバル変数のため、代入ができてしまうのです。
ウケるよね。
undefinedに違う値を代入しても変わらないのでまあいいんですが、過去のJSはこれが書き換えられるというアレでした。
シビレルね。

const だとエラーが起きるはずなので、まじでこれが普通に通るのがよくわかっていないし値がかわらないのよくわかっていない。

const hoge = '';
hoge = 'a'; // => Uncaught TypeError: Assignment to constant variable.

undefined = 2; // => 2
undefined; // => undefined

数値

こやつは単純にそうなるんかお前。みたいなのがあるところを書いてくぞい。

1.toString(); // => Uncaught SyntaxError: Invalid or unexpected token

まあこれは落ちそうよね〜。
では次の書き方にするとどうでしょうか。

(1).toString(); // => "1"

カッコで括ってやればなんかtoStringを実行できます。
これはNumberという数値のラッパーオブジェクトがあるためいい感じに実行できる感じですね。
Number

では次のはどうでしょう。

1..toString(); // => "1"

??????????????

たのしいですね。

JSの数値リテラルは、整数部と小数部と指数部で表現するようになっています。
.がはいると小数部だ！という感じになるようです。その.のあとには数値が必要ではないので1.で1という数値を表現できます。
そのあとはメソッドを呼び出すことができるようになるため、これでいい感じに実行できるわけですね〜〜。
そうはならんやろ

まあそれはそれで、次のをみてください。

.1.toString(); // => "0.1"

思考が停止しますね

比較演算子

まあこれは有名っすね〜〜〜。

== とかを使うとアレだよ〜〜ってやつです。

null <= ''; // => true
null >= ''; // => true
null == ''; // => false

undefined <= ''; // => false
undefined <= ''; // => false
undefined == ''; // => false

undefined == null; // => true

ゲラゲラ

?とかを使う

JSでは名前に?を使えない(はず)のですが、PKキアイΩを使えばつかえます。

const obj = {};

obj.? = '???'; // => Uncaught SyntaxError: Unexpected token '?'

obj['?'] = '???'; // => '???'
obj['?']; // => '???'

こうやれば使えます。
お好きな記号等をお使いください。
便利かどうかは不明です

テンプレートリテラル

テンプレートリテラルは文字列のなかに変数を展開できるアイツですね。

const hoge = 'hi';
`みてる〜〜〜〜${hoge}????`; // => 'みてる〜〜〜〜hi????'

これっすよ。
これなんですが、ちょっとおもしろいことにつかえます。

const hoge = 'hi';
console.log`みてる〜〜〜〜〜${hoge}????`; // => ["みてる〜〜〜〜〜", "????", raw: Array(2)], "hi"

Function に () をつけずテンプレートリテラルをガッチャンコすると、なぜか実行できます
そういう機能なんですがね。

どうなっているかというと、
第一引数にテンプレートリテラル内の文字列が配列で入ってきます。
式が組み込まれている場合(${}これね)、そこで切って文字列の配列とします。
それで第二引数以降に、その式がジャカジャカ入ってきます。

これをうまく使っているのがstyled-componentsですね。
styled-components

const Button = styled.a`
  background: transparent;
  color: white;  border: 2px solid white;
  ${props => props.primary && css`
    background: white;
    color: palevioletred;
  `}
`

こういうの。

いい感じに使えるとかっこいいですね！

ほかにも

['a', 'b'].join` `; // => 'a b'

みたいな感じに使ったりできます
コードゴルフに使えるぞ！とかなんとか。

まとめ

なんなん？？？とかえ？？？？？っていうのを書いてみました。
まあ謎ですね。

うまく使えそうだ！とか絶対に使わねえぞ！！っていうのがいくつかあったかと思います！
うまくやっていきましょう！(雑

まあ多分他にもたくさん色々あるかもですね！
そういうことで僕は探求の旅に出ます！