オブジェクトの中身をボタンクリックでconsole出力したい。

Question

実現したいこと

オブジェクトの中身をボタンをクリックした際に、consoleに出力したいです。

発生している問題・エラーメッセージ

オブジェクトの中身ではなく、[object Object]と出力されてしまいます。

該当のソースコード

const aho = {
  name :'ore',
  color :'red'
}
  const button = document.getElementById('onbutton');
  
  function onbutton(){
    console.log('Hey,'+this.object);
  }
  
  button.addEventListener('click',{
    object:aho,
    handleEvent:onbutton
  });

備考

ご教授いただければ幸いです。よろしくお願いいたします。

Comments

[m.ts10806]

文字列連結じゃなく2回console.log書くのではダメなのでしょうか。

[kings_of_king12]

1つのconsole.log()で出力することが目的なので、コードをなるだけ変えたくないのです;;

[m.ts10806]

質問内容からそのあたりが見えなかったための確認です。
+ の機能確認はしておいてくださいね。

Answer 1

文字列とオブジェクトを合成しようとしているからでは？

console.log('Hey,'+this.object);
↓↓↓
console.log('Hey,'+JSON.stringify(this.object));

Comments

[kings_of_king12]

ありがとうございます。
JSON.stringify()というメソッドを初めて知りました。

こういったメソッドやプロパティを知っているほど、コードの効率化や実装できる範囲が広がると考えているのですが、
やはりmdnやリファレンスを見て勉強するほかないのでしょうか。

知っているメソッドなどを駆使して機能を実装できるが、知らないメソッドなどは当然ながら実装できないので技術が進化しない。けど進化させたいというジレンマに陥っています。

Answer 2

+接続ではなくカンマ区切りにすればいいです。

const aho = {
  name :'ore',
  color :'red'
}
console.log('Hey,'+aho);
console.log('---')
console.log('Hey,', aho);

Hey,[object Object]
---
Hey, { name: 'ore', color: 'red' }

Comments

[kings_of_king12]

ありがとうございます。
いつもならカンマ区切りで出力していたのですが、なぜかオブジェクトに気を取られたのか思いつかない自分が恥ずかしいです。

本当にありがとうございます。