Web

console.log や console.error の便利なところ

投稿日:

ブラウザのJavaScript環境に実装されている console.log()console.error() は、渡した引数の値をコンソール(Chrome であればデベロッパーツールのコンソール)に出力してくれます。(参考:console.log() – Web API | MDN

これらの便利な点の1つは、(引数が渡される)コールバック関数として利用しやすい点です。

例えば、addEventListener() の第二引数にはコールバック関数を指定しますが、このコールバック関数が実行された際、「発生したイベントを表すオブジェクト」が第一引数として渡されることになっています。

このコールバック関数として、console.log をそのまま指定すると、第一引数として渡される「発生したイベントを表すオブジェクト」をコンソールに出力してくれます。地味に便利です。

最初見たときは違和感がありましたが、console.log は渡された引数をそのまま出力する仕様なので、特に不思議な動作ではありません。(参考:Console Standard

コード例を示すと、こんな感じです。

document.querySelector('#my-button').addEventListener('click', console.log);

この例の場合、id属性値が “my-button” である要素をクリックすると、発生したイベントを表すオブジェクトがコンソールに出力されます。

ちなみに、昔は bind を使って console を束縛しないと正常に動作しなかったようです。

document.querySelector('#my-button').addEventListener('click', console.log.bind(console));

今はこんなことする必要はありません。

参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Web

Source Map に関する情報

目次1. Source Map とは?従来の問題点ソースマップ(Source Map)ソースマップに関連するファイルを整理するソースマップの動作ソースマップは誰が作るのか?2. Chrome ブラウザ …

Web Security

SSLで使用する証明書運用の不便さ

上のどちらも、SSLの証明書が期限を過ぎてしまったことが原因で起きた問題のようです。 前者は詳しく見ていないので分かりませんが、後者はサーバー証明書ではなくデバイス側に保存されているクライアント証明書 …

SQLite

PHP + SQLite を利用してアクセスカウンターを作る

PHP + SQLite を利用してアクセスカウンターを作ります。

Web

Firefox で DNS-over-HTTPS (DoH) を有効にする方法

Firefox で DNS-over-HTTPS (DoH) を有効にする方法について説明しています。

Chrome

Chrome のアドレスバーから任意のサイトの検索機能を使用する方法

目次1. Chrome の検索エンジン管理機能2. 任意サイトの検索機能を Chrome に追加して使用する1. アルクのサイトで検索したときの URL を調査する2. 検索エンジンとして追加する3. …