アロー関数のプロパティを返したいけどできないです

Question

javascriptをついこの間始めたのですが、アロー関数内のプロパティを呼び出して出力したくてもエラーが出てしまっていて困っています。
以下スクリプト

let startButton = document.getElementById("startButton");

let init = () => {
    let greet = "helloWorld";

    returnGreet: function (){
        console.log(this.greet);
    }
}

startButton.addEventListener("click", console.log(init.returnGreet()));

startbutoonを押したらconsole.log(init.returnGreet())が呼ばれるはずなんでですが、
エラーが

renshu.js:6 Uncaught SyntaxError: Unexpected token (

となっています。ここの6行目はreturnGreetのfunction()の括弧を表しています。

なぜでしょうか、回答宜しくお願いします。

Comments

[yambejp]

HTMLのソースを追記下さい。またdocument.getElementById("startButton");はHTML記述後に実行されていますか？

[sakas1231]

この状態で、startButton("click", console.log("called"));と実行してみるとうまくボタンを押すタイミングでcalledが呼ばれているので正しく実行されていると思います。

Answer 1

returnGreet: function(){は、ラベル付きステートメントとして処理されると思いますので、関数定義として処理され、無名の関数は許されないので、エラーになっているのでは。
label - JavaScript | MDN

もし、initを関数ではないオブジェクトにしたいのなら、アロー式では書けないです。
オブジェクトリテラルで書くか、
オブジェクト初期化子 - JavaScript | MDN
initでオブジェクトを返して、その中のメソッドとして定義をするのがいいかと思います。

コメントを受けて追記

それではプロパティを関数にしてそれを外で呼び出すためにはどうすればいいのでしょうか？

let init = {
    greet : "helloWorld",
    returnGreet: function (){
        return this.greet;
    }
}
init.returnGreet();

または、

let init = ()=>{
    let greet = "helloWorld";
    return {returnGreet: function (){
        return greet;
    }}
}
init().returnGreet();

あるいは、

let init = ()=>{
    return {
        greet : "helloWorld",
        returnGreet: function (){
            return this.greet;
        }
    }
}
init().returnGreet();

Comments

[sakas1231]

回答ありがとうございます
プロパティの中身を関数にするためにはアロー関数ではダメというイン式でいいのでしょうか？

それではプロパティを関数にしてそれを外で呼び出すためにはどうすればいいのでしょうか？

[Lhankor_Mhy]

回答に追記しました。
想定されているのは2番目のような気がします。

[sakas1231]

なるほど、やっぱり見やすさ的にアロー関数使わない方がいいんですね
ありがとうございました！

[Lhankor_Mhy]

なんか伝わってない気がしますね。これらの違いは、見やすさの問題ではありません。

1番目はただのオブジェクトなので初期化をすることができません。
2番目は関数オブジェクトなので、引数を持たせてコンストラクタ風に使うことができます。また、クロージャを使っているのでgreetはプロパティではないため、外から直接アクセスができません。
3番目は2番目と同様ですが、greetが普通にプロパティなので隠ぺいされておらず、どこからでも参照と書き替えが可能です。

[sakas1231]

詳しくありがとうございます！
3番目に関しては、どこからも参照はできても書き換えは本当にできるのでしょうか？
3番目の関数に対して
init().returnGreet();
initF().greet = "helloWorldFunc";
init().returnGreet();
をしてみたのですが結果は同じでした。

関数オブジェクトに対して引数を指定してあげてそれをgreetプロパティに入れてあげることで擬似的に書き換えは可能かと思いますが、上記のように外部からinit.greet = "hoge"　としてもinit.returnGreet()は変わらないのではないでしょうか？

長文失礼しました。

[Lhankor_Mhy]

それは返ってきているオブジェクトがそれぞれ別のものだからです。

f1 = init();
f1.greet = "helloWorldFunc";
f2 = init();
f1.returnGreet(); // helloWorldFunc
f2.returnGreet(); // helloWorld

ということです。

同じことを2番目でやろうとしてもできません。クロージャによってスコープが内部に限定されているからで、たとえばクラスのような設計をするときに、メソッドを介してのみ内部状態を変化させたい時などに使います。

[sakas1231]

度々返信が遅くなってしまって申し訳在りません

なるほど、2番目ではreturnされるものがreturnGreetのみ含んだ無名関数で、greetはinitのスコープ内でしかアクセスできないから
f1.greet = "helloWorldFunc";
のように、initの外からgreetにアクセスしようとするタイミングでエラーが出る。
一方で3番目はreturnされるオブジェクトの中にgreetがあるから
f1.greet = "helloWorldFunc";
としても問題は無い。

という認識でいいのでしょうか？
よろしくお願いいたします

[Lhankor_Mhy]

いえ、エラーは出ません。

f1={a:1};
f1.b=2;

がエラーにならず、f1が{a:1, b:2}になるのと同様です。
ただ、returnGreetメソッドが参照するものとは違いますから、その戻り値には反映されないと言うことです。

[sakas1231]

なるほど！
大変よくわかりました！
長い間お付き合いいただきありがとうございました！！

[Lhankor_Mhy]

いえいえ、こちらこそ蛇足が長くなりすみませんでした。