

console.logとdocument.writeの違いは何ですか？  
以前まではブラウザに見えるか見えないかと思っていましたが  
ブラウザとコンソールで出力が異なるコードがありました

[code]

      var o   = {x :1, y:2, z:3};
      var a = [], i = 1;
      for(a[i++] in o);
      console.log(a); //出力[1:x, 2:y, 3:z]
      document.write(a)//出力,x,y,z
[/code]

なぜ異なるのでしょうか


CC BY-SA 3.0
2015-11-06T11:14:10.973
18478
2015-11-06T16:18:22.063
13134
question
javascript console
console.logとdocument.write


[console.log()](https://developer.mozilla.org/ja/docs/Web/API/Console/log)は特に何か仕様があるわけではなく書式も定まっていません。デバッグに役立つような出力がなされているということです。  
[document.write()](http://www.w3.org/TR/html5/webappapis.html#dom-document-
write)は引数をそのままHTMLに追加します。`a`は文字列ではないので文字列化された後に追加されています。


CC BY-SA 3.0
2015-11-06T12:08:22.857
18482
2015-11-06T12:08:22.857
4236
18478
answer


document.writeは、そのスクリプトがあるページのHTMLに引数を書き込みます。これはHTMLのソースコードに追記する内容をそのまま指定すると考えるとわかりやすいでしょうか。すなわち、与える引数は必ず文字列(String)になり、それ以外の場合は何らかの形で文字列に直されたあと書き込まれます（質問文の例では、配列が渡されたのでカンマ区切りの文字列に直されています）。

それに対して、console.logは開発者向けの機能で、どちらかというと開発途中のコードの中で使われるものです。大抵のブラウザではデバッグツール（開発者用の機能を提供するブラウザ内蔵のツール）のログに出力されるのですが、この出力方法の詳細は特に共通仕様として定められているわけではないので、デバッグツールの機能によって出力形態が決まります。

例えば、Google
Chromeのデバッグツールでは、渡されたものが文字列ならばそのままログとして出力されますが、配列やオブジェクト、関数が渡された場合はその中身が見えるように出力されます。表示方法もデバッグツールとして使いやすいように工夫され、コードの色分けがなされたり、大量の要素がある配列の一部が省略されたりといった加工がなされます。


CC BY-SA 3.0
2015-11-06T16:18:22.063
18490
2015-11-06T16:18:22.063
7229
18478
answer