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

Webページ中の特定の文字列をURLで指定する(Text Fragments)

Webページ中の特定の文字列をURLで指定する Text Fragments について説明します。

Web

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …

Web Components

1つのWebページに複数のHTML要素サンプルを記述する

1つのWebページに複数のHTML要素サンプルを記述する方法を紹介します。

MathJax を試してみました。

MathJax は、HTML上で数式を美しく表示するための JavaScriptライブラリです。 基本的な使い方は、 HTMLファイルに以下を記述して MathJax.js を読み込みます。HTMLフ …

PWA

Webブラウザと PWA は切り離して欲しい

マイクロソフトはWeb技術を用いてネイティブアプリケーションのように動作するProgressive Web Apps(PWA)を、WebブラウザのEdgeにとどまらず、Windows10のデスクトップ …