JavaScript のクロージャーと for 文の let 初期化の例外
先日、次のような JavaScript クイズを Twitter で出しました。 // JavaScript quiz: 出力は？ const a = []; { for(let i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { let i; for(i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { for(let i = 0; i < 10;) { a[i] = () => console.log(i); i++; } } a[3](); — Takuo Kihira (@tkihira) August 15, 2022 答えは 3, 10, 4 なのですが、for 文の let 初期化専用の例外処理がない場合は 10, 10,
JavaScript Primer 4.0.0: ECMAScript 2022に対応したJS本
JavaScript Primer(jsprimer.net)が、ECMAScript 2022(ES2022)に対応しました。 リリースノート: Release v4.0.0: ES2022 · asciidwango/js-primer これまでのjsprimer ECMAScriptの仕様書は毎年更新されるので、それに合わせてjsprimerも更新しています。 1.0.0(ES2019): JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？ 2.0.0(ES2020): JavaScript Primer 2.0 - ECMAScript 2020に対応した入門書を公開しました 3.0.0(ES2021): ES2021に対応したJavaScript Primer 3.0を公開しました - JavaScript入門 今回のアップ
JavaScript で parseInt / parseFloat を使わない方が良い理由
となるのが原因です。parseInt というのは、文字列を解析して整数値（int）を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望
TinyBase
(Baffled by all these logos? Check out our architectural options guide to make sense of it all!) Start with a simple key-value store.Creating a Store requires just a simple call to the createStore function. Once you have one, you can easily set Values in it by unique Id. And of course you can easily get them back out again. Read more about using keyed value data in The Basics guide. import {create
まだ使ってる？今は非推奨となったJavaScriptの書き方
2021年11月18日 JavaScript いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated（非推奨）」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ document.write 画面にテキストを表示する document.write 。JavaScriptの勉強を始めて最初に書いたコードがこれだったという方もいるのではないでしょうか？これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。 これまでの記述例： document.write('やっほーい'); 解決策1：textContent や innerHTML を使う 代わりに文字列を書き換える textConte
忘れやすい、複雑なJSONの要素をfor...in文で取り出す方法 - Feel Physics Backyard
配列、連想配列、単純なJSON、項目によってプロパティの中身が異なるような複雑なJSONの要素を、for...inループで取り出すことができます。しかし、やり方に統一感がなく、忘れやすいので、まとめておきます。 // 配列 var list = ['ハンバーグ', 'カレー', '親子丼']; // 連想配列 var hash = {名前: 'ハンバーグ', 分類: '洋食', 主成分: 'タンパク質'}; // 単純なJSON var json = { ハンバーグ: { 分類: '洋食', 主成分: 'タンパク質' }, カレー: { 分類: '洋食', 主成分: '炭水化物' }, 親子丼: { 分類: '和食', 主成分: 'タンパク質' } }; // 複雑なJSON var complexJson = { ハンバーグ: { 分類: '洋食', 主成分: 'タンパク質' }, カレ
【追記あり】ES2022 Array#at がちょっとおかしい #fix_ecmascript_at - Qiita
既に Stage 4 になっているので諦めていたんですが、流石に見逃せないかなと思ったので TC39 の Discourse にトピックをたててみました。意見がある方はこちらにお願いします。 https://es.discourse.group/t/fix-at/983 議論に伴って私が実際に欲しかったものをモジュールにして公開してみました。 https://github.com/petamoriken/safe-at それといまいちユーザーからの声が伝わっていない感じがしたのでハッシュタグ #fix_ecmascript_at を用意してみました。協力をよろしくおねがいします。 String#char{At, CodeAt} という存在を忘れてたんですが、この似た名前のメソッドたちが引数を整数に丸めるのに String#at が丸めないのはたしかに変だということに気づいてしまったので、自
JavaScript クイズ解説: NaN === NaN の結果はどうなる？
先日、このようなツイートを書きました。 久しぶりの JavaScript クイズ。 JavaScript において NaN === NaN の結果は次のうちどれになるでしょうか？ — Takuo Kihira (@tkihira) September 7, 2021 答えは 4 の「状況によって上記以外もありうる」です。でも、2 や 3 を選んだ方も、もはや正解だといって差し支えないと思います。 解説が長くなったので、ブログ記事にまとめました。 そもそも NaN とは NaN は “Not a Number” を意味する数値です。数値なのに「Not a Number」というのは違和感があるかもしれませんが、数値表現することが出来ない状態を保持するために便宜的に用意された数値、というようなものです。 NaN は、浮動小数点演算において数値では表現出来ない計算をしようとすると登場します。例えば
JavaScriptはなぜシングルスレッドでも非同期処理ができるのか/Why Can JavaSctipt Invoke Asynchronous in Single Thread?
JavaScriptはシングルスレッドであることが知られています。そして、Promiseを用いた非同期処理ができることは周知の事実です。では、なぜシングルスレッドで非同期処理ができるのでしょうか？ その点について、非同期処理のための2種類のQueuesについて触れつつ、コードベースでの説明も行います。
JavaScriptに密かに存在する“無名関数宣言”
この記事では JavaScript エンジニアがしてしまいがちなある誤解を紹介し、それがなぜ誤解なのかを解説します。 その誤解とは、「関数宣言には必ず名前が必要である」ということです。これはexport defaultの場合に例外が存在しているため、誤解となります。 JavaScript の関数宣言 JavaScript で関数を作る方法は色々ありますが、その中でもfunctionキーワードを用いる方法は初期から存在しています。functionキーワードを用いて関数を作る場合は関数式と関数宣言の 2 つに大別されます。関数式はその名の通り式である一方で、関数宣言は文のように使用され、巻き上げ (hoisting) の挙動を持つことが特徴的です。 // 関数式 const func = function (num) { return num * 2; }; console.log(func(
Google発のJavaScriptで書けるシェル 「zx」 | DevelopersIO
Introduction シェルを書きたいときにBashは手軽に使えるけど、 少し込み入ったスクリプトを書こうとするとちょっと面倒。 NodeいれてJavaScript書くのもいいけど、 いろいろセットアップが手間。 そんな人にピッタリはまるかもしれないのがzx。 Google発、JavaScriptで記述できるシェルです。 Top Level await使ってシェルコマンドがそのまま使用可能です。 また、Promise.allでコマンド並列実行ができたりするので便利です。 Environment OS : MacOS 10.15.7 Node : v14.16.1 Top Level awaitがサポートされたNode(v14.8)以降が必要ぽい？ Setup では早速セットアップしてみます。 npmでzxをグローバルインストール。 % npm i -g zx % zx usage: z
JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(nums)); // expected: 55 一見すると何も問題なさそうに見えるプログラムですが、実はバグがあります (皆さん分かりますか?) *1。実際に上記プログラムを実行すると 55 ではなく 10 が出力されます。 こうした場面に遭遇すると、自然と sum
JSのレスポンシブ対応をresizeからmatchMediaに移行した
JS でブレークポイント毎に処理を分ける場合の方法を resize から matchMedia に移行したので、その際のメモ書きです。 昔ながらの方法 恥ずかしながら、最近まで JS でブレークポイント毎に JS 処理を切り替える場合、 以下のように昔ながらの resize イベントの監視を使っていました... /** * イベントリスナー */ const listener = () => { // リサイズ時に行う処理 if (window.innerWidth >= 768) { // 768px以上 console.log('PC用ブレークポイント用処理'); } else { // 768px未満 console.log('SP用ブレークポイント用処理'); } }; // リスナー登録 window.addEventListener('resize', listener); /
JavaScriptのディープコピー速さ比較 〜7つの手法/ライブラリを比べてみた〜 - Qiita
この投稿では、JavaScript(Node.js)でディープコピーするにあたって使えるコードスニペットやライブラリの処理速度を比較した結果をお見せします。 比較対象 JSON.stringify/JSON.parse Nodeビルトインモジュールv8のserialize/deserialize lodashのcloneDeep deepcopy - deep copy data clone - offers foolproof deep cloning of objects, arrays, numbers, strings, maps, sets, promises, etc. in JavaScript. clone-deep - Recursively (deep) clone JavaScript native types, like Object, Array, RegExp,
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
JavaScriptで文字列が小文字・大文字・数字を全て含むかどうか判定する方法について - Qiita
タイトルにあるように、文字列が半角英小文字・大文字と半角数字を全て含むかどうかを判定するという機会は少なくありません。特に、文字種の多さがパスワードの強さであるという教義の持ち主である場合に顕著です。もちろん長さは16文字以内です。 さて、この判定は一見単純に見えて一筋縄ではいきません。文字列の条件判定といえば正規表現ですが、「全て含む」という条件をきれいに書くのは少し難しいでしょう。そこで、この記事ではこの条件を判定する諸方法について雑に考察します。 愚直に正規表現を使う方法 正規表現では、「ある文字種をひとつ含む」という条件を書くのは簡単です。例えば半角小文字を含むという文字列は/[a-z]/という正規表現で判定可能です。これを用いれば、正規表現を3回使うことで上述の条件を判定できます。 const ratz = /[a-z]/, rAtZ = /[A-Z]/, r0t9 = /[0-
JavaScript Features To Forget · djf.log()
The first demo of the language that was to become JavaScript took place almost exactly 25 years ago. The language was released, as LiveScirpt, in a beta of Netscape Navigator in the fall of 1995, and renamed to JavaScript later that year. Sometime late that year I began work on the first edition (O’Reilly published it as the “beta edition”) of JavaScript: The Definitive Guide, and it was published
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://hypercore-protocol.org/
jsmates.com
HTML+JavaScriptでこれから始める、REST APIを利用したアプリ開発 第3回目／Webサービスとブラウザをつなぐ機能「Fetch API」 - MdN Design Interactive
