例えば enum Example { 緑茶 麦茶 紅茶 珈琲 } というEnumを使って比較をする時に、 if(key === +Example.緑茶) という比較を書くか if(Example[key] === "緑茶") という風に書くかどっちがいいのかがわからなかったので調べてみた。 if(key ===Example.緑茶)のほうが保守性が高い 理由としては、まずExample.緑茶という風に書くことで型推論が効きタイポが起きにくくなる。 Example[key] === "緑茶"と書くときは型推論が効かないので、青茶って書いても何も教えてれない。 if (Example[key] === "青茶") { } こう書いてもエラーが出ない。 これ以外にメリットがありそうだったけど、これが最大のメリットな気がする。 そういうことでEnumを直接比較したほうが良い。
new Set()ってなに？ 先日ChatGPTでコード生成したところ、new Set()というオブジェクトが登場した。 そういえば使ったことあると思い調べてみると、JavaScriptの配列で重複したものを削除し、ユニークな配列を作成するで使っていた。どうやら配列を削除するのに使っていたよう。 実際に調べてみると、 Set オブジェクトは値のコレクションです。 Set に重複する値は格納出来ません。 Set 内の値はコレクション内で一意になります。 とのこと。 簡単に言うと「要素の重複を許可しない配列のこと」だと思う。 じゃあ、配列と何が違うのか。 配列と何が違うのか 配列との違いは、 重複を許さない インデックスでアクセスできない あとは追加とか削除とかのメソッドが異なる 高次関数（map, filter, reduce）を使用できない という点。 重複を許さない const setValue = new Set([1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6]); console.log(setValue); // [LOG]: Set (6) {1, 2, 3, 4, 5, 6} このように重複した値はなかったことになる。 インデックスでアクセスできない const setValue = new Set([1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6]); console....
domの操作をしていると、 「あれ、動かない、domの生成がまだ行われていない？ 試しに５秒待った後に実行してみよう」 みたいなことが良くある。 その都度、下記のように実行してきた。 window.setTimeout(() => { operation() }, 5000) という風に、setTimeoutの中に該当する関数を入れていく。 ただこれだと、入れるべき関数がたくさんあると面倒くさい。 そこで以降すべて５秒後に実行されるというワンライナーを覚えることにした。 それ以降の行はすべて５秒後に実行されますよっと await new Promise((resolve) => setTimeout(resolve, 5000)); ただこれだけのこと。 ただこれだとasyncをつけたメソッドを用意する必要があるけれど。
なんとなく怪しいので、count++と++countについて調べてメモしておく。 実行してみる const pre = () => { let count = 0 console.log(++count, 'pre') } const post = () => { let count = 0 console.log(count++, 'post') } pre() // [LOG]: 1, "pre" post() // [LOG]: 0, "post" 前置インクリメント演算子 pre()の方はcountの値が1増えてから更新された値が返されるので、1が出力される。 後置インクリメント演算子 post()の方はcount の現在の値を返し、その後に1を加算するので、0が出力される。 それぞれ適宜場合を見て使用する必要がある。
先日、とあるSNSを見ていたら、JavaScriptの問題が出されていた。 さて、ここで問題 let a = 10 if(true) { let a = 20 console.log(a, 'inside') } console.log(a, 'outside') // Q. What is the output of thie below code? // 1. 20, 'inside' and 20, 'output // 2. 20, 'inside' and 10, 'output // 3. 10, 'inside' and 10, 'output // 4. 10, 'inside' and 20, 'output このコードを実行した結果、どのような結果が求められるでしょう。 予想 面白そうなので実行する前に推測してみる。 まず、If文がtrueなので当然のようにIfの中身が実行される。 ここでLetの仕様の話になるのだが、Letは関数内でスコープされるので、先頭で定義されたLetとIf文の中のLetは違うものだということになる。 結果、If文の中のaは20となり、outsideのaはどこからも影響を受けずに10のままになる。 つまり2が正解になると予想される。 結果 [LOG]: 20, "inside" [LOG]: 10, "outside" 正しいと証明された。...