JavaScriptのアロー関数の(()=>{})の式の意味について教えていただきたいですm(_ _)

Question

a
() => {}
(引数,...)=>{...関数の本体...}
の認識ですが一番外側の括弧って何を意味してますか？
これです→((引数,...)=>{...関数の本体...})←これです
ご教示お願いいたしますm(_ _)m

Comments

[Zuishin]

演算の優先順位の変更です。
2 + 3 * 5 = 17
(2 + 3) * 5 = 25

Answer 1

何も前提なしに丸括弧()を使ったときはグループ化演算子として動作します。

アロー関数は多くのケースで一度変数に突っ込む使い方をしますが、
宣言してすぐ使いたいような場面では注意しなければなりません。

こういう即使いたい場面で、
お尻に()を付けて関数実行を行った場合、構文エラーとなってしまいます。

$ node
> () => {return 123}()
() => {return 123}()
                  ^
Uncaught SyntaxError: Unexpected token '('

こういう時はグループ化演算子として()で包んで1個の値にしましょう。
すると()の関数実行で実行できるようになりました。

$ node
> (() => {return 123})()
123

---

おまけ: 関数以外でも似たような問題あるよ

JavaScriptはオブジェクト指向言語なので、
Number型にもtoString等のメソッドが存在して、これを実行すると数値を文字列にするような使い方が可能です。

$ node
> const num = 123
> num.toString()
'123'

しかし、プロパティ・メソッドへのアクセスとなるドット.は数値入力中は小数点として機能します。
なので123.toString()という風に数値に対してそのままアクセスしにいくと構文エラーとなります。

$ node
> 123.toString()
^^^^
Uncaught SyntaxError: Invalid or unexpected token

こういう時もグループ化演算子が活躍します。

$ node
> (123).toString()
'123'

Comments

[hideo]

ご丁寧にありがとうございますm(_ _)m
さらにおまけで詳しく説明いただきありがとうございます><

[hideo]

昨日はありがとうございましたm(_ _)m
ちょっと疑問に思ったのですが、
即使いたい場面で、グループ化演算子として()で包んで1個の値にすることは学ばせていただきましたが、
(() => {return 123})()←この最後のカッコですがこの関数を呼び出す意味でしょうか？
いろんなコードを見ると()がなく呼び出してまうがどんな場面で()あり、なしなのでしょうか？
const hoge = (() => {})
みたいな時はお尻に()が要らないのでしょうか？

分かりにくい質問すみません＞＜

[miyabi-sun]

JSの言語は同じ記号でも文脈によって様々な意味に分岐します。
アロー演算子に使う`=>`も、=は代入として使うし>は大なりの比較演算子にも使われています。

これと同じように`値()`の形式で使うとグループ演算子という機能はなくなり、
左側の値を関数とみなし、関数実行を試みる(関数で無ければエラー)というルールで作られています。

Answer 2

これです→((引数,...)=>{...関数の本体...})←これです

その括弧はアロー関数式の一部ではありません。何らかの理由で括弧で囲む必要がある場合もありますし、とくに理由がなくても括弧で囲んでもいいです。

例:
new Promise((resolve, reject) => { ..});
アロー関数は関数の引数で、関数呼び出しの括弧で囲まれている

const f = ((e) => { ...});
アロー関数がとくに理由なく括弧で囲まれている。const a = (42); と同じような感じ。

Comments

[hideo]

ご丁寧にありがとうございますm(_ _)m
勉強になります><

Answer 3

質問にある、外側の丸カッコが出てくる例としては
IIFE (即時実行関数式)
を書く場合です。
たとえば、MDN の IIFEの説明 に以下のサンプルコードがあります。

var result = (function () {
    var name = "Barry";
    return name;
})();
// Immediately creates the output:
result; // "Barry"

これをアロー関数を使って書けば、

var result = (() => {
    var name = "Barry";
    return name;
})();
// Immediately creates the output:
result; // "Barry"

となり、上記のコードで、result = の直後にある ( と、} の直後にある ) が

これです→((引数,...)=>{...関数の本体...})←これです

の外側の丸カッコの一例となっています。

Comments

[hideo]

ご丁寧にありがとうございますm(_ _)m
勉強になります！

すみませんちなみに
var result = (() => {
var name = "Barry";
return name;
})(); ←;前の()は何でしょうか？
検索しても出てこない＋どう検索したら良いかわからず、、
すみません><

[退会済みユーザー]

その () は関数を実行するためのものです。

つまり

var result = (() => {
var name = "Barry";
return name;
})();

というコードを分かりやすく分解すると、まず

var f = () => {
var name = "Barry";
return name;
};

という、関数を値とする変数 f を作っておいて、次に、この関数を実行した結果を result に入れるべく

var result = f();

とするのと同じです。

[hideo]

なるほど関数を実行するためのものなのですね><

ものすごい分かりやすいご説明ありがとうございましたm(_ _)m

[hideo]

昨日はありがとうございましたm(_ _)m
vsCodeで
var result = (() => {
var name = "Barry";
return name;
})();
console.log(result);
で中身を出力できましたが、
result();は関数呼び出しなので呼び出せない認識で大丈夫でしょうか？

何かアプリケーションを作る際呼び出しでconsole.log();を使わないと思いますが
resultを呼び出して使う方法ってconsole.log()以外どんなものがあるのでしょうか？
分かりにくい質問すみません、、、><

[退会済みユーザー]

> result();は関数呼び出しなので呼び出せない認識で大丈夫でしょうか？

はい。その認識で問題ないです。より詳しく言えば

result();

は、関数ではないものを関数として呼びだそうとするのでエラーが発生する。

という状況になります。実際、

> result();

とすると以下のエラーが発生すると思います。

Uncaught TypeError: result is not a function

これは TypeError というエラーが発生して、そのエラーの原因が

result is not a function

と説明されています。これを和訳すると、

result は関数ではありません

となります。関数ではない値が入っている変数の後に () を付けて、（関数が入っていると思い込んで）
実行しようとするとこのエラーが発生します。

[hideo]

ごめんなさい返信気が付いてませんでした＞＜

何度も詳しいご説明ありがとうございますm(_ _)m
とっても助かりました♪