サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
夏の料理
qiita.com/tetsuyaohira
課題感 closureの理解があやふや closureは、外側の変数の情報を持った関数と言われるが、下記のコードのsayFruit2の中でsayFruit1を呼び出した時、🍌でなく🍎が出力されことを感覚では理解していたが、どのような仕様のもとに動作しているのかを知らない let food = '🍎' const sayFruit1 = () => console.log(food) const sayFruit2 = () => { let food = '🍌' sayFruit1() // disp 🍎. not 🍌 } sayFruit2() 解説 Lexical Environmentという概念の理解が必要 JavaScriptのグローバルスコープ、ブロックスコープ、関数にはLexical Environmentと呼ばれるオブジェクトを保持している 変数 変数はLexic
開発でよく遭遇するするユースケースに対するワンライナーをまとめてみました。 適切に使用することで短くて読みやすいコードを書いていきましょうー EcmaScript 配列をシャッフル const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5) shuffleArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) // [8, 6, 5, 7, 9, 1, 2, 3, 10, 4]
ブラウザのconsole.logは処理の状態を理解するのに便利です。 私もいつもconsole.logデバッグを使っています。 Chromeにはもっと便利なmonitorEventsとmonitorがあり、イベントが発生したり関数が呼ばれたりするたびにログを取得することができます。 Monitor Events monitorEventsに要素と一連のイベントを渡して、イベントが発生したときにコンソールログを取得します。 // クリックイベントを監視 monitorEvents(window, 'click') // 上キー、下キーイベントを監視 monitorEvents(document.body, ['keyup', 'keydown']) // スクロールイベントを監視 monitorEvents(window, 'scroll')
列挙(Enum)とは 多くのプログラミング言語では、列挙型(Enum)があります。 JavaScriptのビルトインオブジェクトにはこの機能がないので独自で作成してみます。 配列で作る
結論 どちらでもいい セミコロン付けても付けなくても落とし穴はある ESLintを利用することで落とし穴を検知できる 私はセミコロンつけない派 自動セミコロン挿入とは 自動セミコロン挿入(automatic semicolon insertion) この仕組みのおかげでセミコロンを使わなくてもコードを書くことができ、コンパイラが行末を察してセミコロンを挿入してくれる 自動セミコロン挿入のしくみはECMAScriptで規定されており、自動セミコロン挿入はJavaScriptエンジン間で可搬性がある 自動セミコロン挿入には落とし穴があり、ルールを理解しておく必要がある 第1のルール:セミコロンが挿入されるのは、"}"トークンの前か、改行の後か、プログラムの末尾だけ
Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
このページを最初にブックマークしてみませんか?
『qiita.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く