functionの役割を教えてください。

Question

最初のコード、
(function(){
'use strict';

でfunctionが出てきます。調べてみたらfunctionは定数を定義するものらしく、今のletやconstみたいなものだと出てきたのですが、なぜ()にfunctionが囲まれているのか分かりません。
このfunctionは宣言でしょうか？
また、最後のコード

btn.addEventListener('mouseup', function(){
this.className = '';
});

におけるfunctionの役割も教えていただけると幸いです。よろしくお願いします。

``JavaScript

(function(){
'use strict';

let btn = document.getElementById('btn');

btn.addEventListener('click', function(){
var n = Math.random()
if(n < 0.3){
this.textContent = '大吉'; // 30%
}else if (n < 0.45){
this.textContent = '吉'; // 15%
}else if (n < 0.60){
this.textContent = '中吉'; // 15%
}else if (n < 0.85){
this.textContent = '小吉'; // 15%
}else{
this.textContent = '凶'; // 15%
}

});
btn.addEventListener('mousedown', function(){
this.className = 'pushed';
});

btn.addEventListener('mouseup', function(){
this.className = '';
});

})();

Comments

[kei344]

> functionは定数を定義するもの
調べたキーワードと、それが書いてあったページURLを記載してください。

[amanha]

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function

間違えていたらごめんなさい????‍♀️

[kei344]

当該ページに「定数」という文字列がありません。どの部分でしょうか。

Answer 1

調べてみたらfunctionは定数を定義するものらしく、

いえ、違います、「カッコの中」など、式の途中に現れるfunctionは関数リテラル（Functionオブジェクトを作るためのリテラル）です。

(function(){ /* 略 */ })();という形となっていますが、これは「今作った関数リテラルをその場で実行する」という、即時関数と呼ばれる形です。

最後のコードにおけるfunctionの役割

こちらも関数リテラルで、イベントハンドラとして登録する関数を作っています。

Comments

[amanha]

教えてくださってありがとうございます。
関数リテラルというものだったんですね！
定数を宣言するものだと思っていた自分が恥ずかしいです。