MutationObserverがうまく動作しない

Question

###概要
現在chromeの拡張機能を作成しています。
(ざっくり言うと)runtime.onMessage.addListenerで別のjavascriptファイルから値を受け取り、その値を元にツイートを検索するような機能を作成しています。

twitterのツイートは非同期で取得されているのでMutationObserverを利用して要素に変化があるたびツイートを読み込んで検索条件に当てはまるか判断する、というような動作をしたいのですが、そこで以下のようなエラーが出ます。

Error in event handler: TypeError: Failed to construct 'MutationObserver': parameter 1 is not of type 'Function'.
    at serch

(エラーが出る場所はここです↓)

var observer = new MutationObserver(deleteTweet(message))

###コード全体

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  console.log(message.text)

  serch(message)
  
  sendResponse()
  return
})

function serch (message) {
  function deleteTweet (message) {
    console.log('doing')
    // 表示されているツイートの本文が含まれている要素を取得
    let articles = document.querySelectorAll("div[lang='ja'] > span")
  
    if (articles.length > 0) {
      Array.prototype.forEach.call(articles, async (article) => {
        if (!article.innerText.includes(message.text)) {
          let tweet = article.closest('article')
          let range = tweet.parentNode
          range.style.display = 'none'
        }
      })
    }  
  }
  
  // オブザーバーの作成、ここでエラーが出る
  var observer = new MutationObserver(deleteTweet(message))
  var target = document.getElementsByTagName('section')[0]
  observer.observe(target, {
    childList: true,
    subtree: true
  })  
}

###わからないこと
一度deleteTweet(function)が実行されたのちエラーが出るためオブザーバーを作成した時点で一度引数に設定したfunction(ここではdeleteTweet)が実行されていることになるのですが、なぜobserver.observeする前に実行されるのかが理解できていません。

またエラーにはdeleteTweetはfunctionではないとありますが、function以外の何者でもないのでどうすれば解決するのか全くわかりません。
TypeError: "x" is not a function←この資料などを読みましたが、今のところ解決方法が全く思いつきません。

初歩的な質問で申し訳ありませんが、何かアドバイス等ありましたら教えていただけると大変助かります…。よろしくお願いします。

Answer 1

この行でMutationObserverに渡されているのがdeleteTweetではなく、deleteTweet(message)だからです。
件のエラーでfunctionではないと言われているのは、deleteTweetではなく、deleteTweetを実行した結果の戻り値です。。

var observer = new MutationObserver(deleteTweet(message))

※追記、コメントに対して回答します。
関数オブジェクトに括弧を付けると、それは関数の呼び出しになります。
この行の時点で既にdeleteTweetが実行されています。
そして、new MutationObserverの引数には、deleteTweet(message)の戻り値のnullが渡されます。

var observer = new MutationObserver(deleteTweet(message))
                                            ↑この部分で実行している

関数自体を渡したいなら、括弧無しで記述して下さい。

var observer = new MutationObserver(deleteTweet)

deleteTweetに対して外部から値を渡したい場合については、クロージャの仕組みを使いましょう。
例を一つ挙げますが、まず自分で調べて理解するようにして下さい。

function sample()
{
    const hoge = "hogehoge";//ここで宣言した変数は
    function uni()
    {
        console.log(hoge)//ここからも参照できる。
    }
    uni();//hogehogeが表示される。
}

console.log(hoge);//当然ここからは参照できない。

Comments

[tenshinhan]

コメントしてくださりありがとうございます。
MutationObserverにはDOM変更時に実行したい関数を渡すという認識なのですが(これは合っていますか…？)、実行したい関数に引数を渡す必要があるときはどうすれば良いのでしょうか。
あと実行した結果の戻り値がfunctionではないというのはどういうことでしょうか…。 DOM変更→observerが変更を確認→deleteTweetを実行という一方的な？流れの動作という認識だったのですが、どのタイミングでどこに戻り値が返されているのでしょうか。

初歩的な部分で申し訳ないのですがなかなか理解できず困っているので、お時間ありましたら返信して頂けると嬉しいです。よろしくお願いいたします。

[tenshinhan]

ご返信くださりありがとうございます。
戻り値のことについてはざっくり理解できたように思います。丁寧に説明してくださり本当にありがとうございます！クロージャについても一度しっかり調べます。本当に助かりました！ありがとうございました。