Google拡張機能作成中です。JavaScriptの「function(引数)」という形がまるで分からない

JavaScript初心者です。
Google拡張機能を試しに作成しているのですが、コンテキストメニューを追加し、
右クリック⇨コンテキストメニューにある項目をクリックすると、選択中の文字列を取得する処理を書いてます。
以下のURLを参考にしました。
https://teratail.com/questions/57460

以下の「background.js」にあるSelectText(info)が謎です。
この「info」とは何のことを指しているのかが本当に疑問です。
なぜ急に引数が必要になるのか。呼び出し元のchrome.contextMenus.createでは引数を指定していないのに。
続いてreturn値の" function(info) "もです。なぜ名前無しの関数が急に出てくるのか。function + 任意の関数名(info)ではないのか

調べようにもどのように調べていいか分からず、どのような単語で調べたらいいかも教えていただけると幸いです。

<background.js>

JavaScript
1function SelectText(info){
2  return function(info){
3    var selectText = info.selectionText;
4    console.log(selectText);
5  }
6}
7
8chrome.contextMenus.create({
9  "title":"辞書を引く",
10  "type":"normal",
11  "contexts":["all"],
12  "onclick":SelectText()
13})

manifest.jsonは以下のような感じです。

manifest
1{
2  "manifest_version": 2 ,
3  "name":"test",
4  "version":"1.0.0.1",
5  "description":"test",
6  "background":{
7    "scripts":["background.js"]
8  },
9  "permissions":[
10    "contextMenus",
11    "http://*/*",
12    "https://*/*"
13  ]
14}

行動規範の内容に同意します

回答3件

ベストアンサー

たしかにこのSelectText(info)のinfoは全く使われていませんね。なくても問題ありません（JavaScriptでは、引数の数が合わなくてもまったく問題ありません）。

投稿2019/07/15 03:39

maisumakun

総合スコア146564

mooz999

2019/07/15 05:22

>maisumakun様ご回答ありがとうございます。さらに不明なのが、function(info)です。関数宣言した後に任意の名前が無いのに、引数でinfoがあることが不明です。ご回答した上に、更に質問を重ねてしまい申し訳ありません。

maisumakun

2019/07/15 05:45

そちらは「infoを引数に取る、名前のない関数」です。

mooz999

2019/07/15 07:32

>maisumakun様無名関数について知らなかったので、勉強になりました。ありがとうございます！

行動規範の内容に同意します

キーワードとしては「無名関数」ですね。

MDN:関数式

var myFunction = function [name]([param1[, param2[, ..., paramN]]]) {

statements
};
name
関数名。省略可。**省略した場合、関数は無名関数として認識されます。**name は関数内でローカルです。
paramN
関数に渡される引数の名前です。
statements
関数の本体を構成するステートメントです。

これはJavaScript以外の言語でも存在する概念なので、下記のような記事でざっくりでも考え方をおさえておくと良いです。

無名関数とは

投稿2019/07/15 06:55

m.ts10806

総合スコア80888

mooz999

2019/07/15 07:31

＞mts10806様無名関数についての理解が必要だと感じました。ご教授いただきありがとうございます

m.ts10806

2019/07/15 07:33

ヒントになったようで何よりです

行動規範の内容に同意します

無名関数と呼ばれるものです．

JavaScriptではfunctionもオブジェクトの一種として扱われます．
例だとSelectText()(info)のような呼び出し方になっているため分かりにくいのだと思います．

動作としてはchrome.contextMenus.createを定義した段階でSelectText()が実行されてonclickに無名関数がセットされます．
コンテキストメニューをクリックすると，セットされた無名関数が実行されます．

動作としては以下の２つのコードとほぼ同じになります．

JS
1// 無名関数としてonclickを定義した書き方
2chrome.contextMenus.create({
3  "title":"辞書を引く",
4  "type":"normal",
5  "contexts":["all"],
6  "onclick":function(info){
7    var selectText = info.selectionText;
8    console.log(selectText);
9  }
10})

JS
1// 無名関数を使わない場合の書き方
2function SelectText(info){
3    var selectText = info.selectionText;
4    console.log(selectText);
5}
6
7chrome.contextMenus.create({
8  "title":"辞書を引く",
9  "type":"normal",
10  "contexts":["all"],
11  "onclick": SelectText  // ここでは()をつけないことに注意
12})