javascriptの関数について 不明点まとめ
こんにちは、クルトンです。
javascriptのわからなかった部分、曖昧だった部分を調べてまとめてみました。
そもそも関数とは？
関数とは、
「複数の処理をひとまとまめにして、それに名前をつけて呼び出し可能にしたもの」
とか
「なにかしらの入力値（引数）を与えられることによって、あらかじめ決められた処理を行い、その結果（戻り値）を返す仕組み」
という風に説明されているものです。
この説明を聞いて僕は
「え、、こんな説明でわかるの？？？頭良い、、、」
と思いました。（笑）
ぜんっぜんわかんないｗｗｗｗ
全然わからないなりに半年くらい勉強してきたんですが
PHPでも関数を作るので
なんとなーくわかってきたつもりです。
そこで、改めて言葉にしてみると
関数とは
「なにか規則性が入っていて、その規則性に従った処理が行われ、その処理が終わったものを吐き出す箱」
だと思いました。
どういうことか？
クイズ
突然ですが、下の言葉の変化の規則性がわかりますか？
こま → ごま
霧 → 義理
カード → ガード
簡単にわかったと思いますが
正解は
「はじめの言葉に濁点をつける」と別の言葉になるよ、という規則性があります。
この「はじめの言葉に濁点をつける」と別の言葉になるよ、という処理を箱の中に入れたものが「関数」になります。
こま →関数→ ごま
霧 →関数→ 義理
カード →関数→ ガード
入口から入れた言葉（こま）にこの規則性をほどこし、出口から出る言葉（ごま）の形にさせる。
「はじめの言葉に濁点をつける」という規則性が入った関数という箱に
「こま」を入れると「ごま」になる。
「きり」を入れると「ぎり」になる。
「カード」を入れると「ガード」になる。
この関数だけではなく、いろいろ作っていくうちに
「なにか規則性が入っていて、その規則性に従った処理が行われ、その処理が終わったものを吐き出す箱」が関数！！だと思いました。
ただ、関数によって規則性のグラデーションが違うなと思ったことがあります。
例えば
「入れた数字に対して、消費税（1.08）を掛けなさい」
という命令が入った関数もあれば
「『こんにちは』という言葉を表示させなさい」
という命令が入った関数も作れるし
「入れた文字が半角英数字かどうかチェックして、半角英数字でなければエラーメッセージを出しなさい」
というような関数を作ることもできます。
1つ目と2つ目の処理は簡単そうに見えませんか？
なんか簡単な規則性に当てはめたり、簡単な処理を書くだけでできそうですよね。
でも3つ目の処理は少し複雑そうに見えると思います。（僕は最初にこの関数を見たときフリーズしました）
このように、作る関数の難易度？というか規則性の複雑さが違うから
「複数の処理をひとまとまめにして、それに名前をつけて呼び出し可能にしたもの」
とか
「なにかしらの入力値（引数）を与えられることによって、あらかじめ決められた処理を行い、その結果（戻り値）を返す仕組み」
という風に説明にもグラデーションがあるんだなーと、思いました。
と、長々と書いてきましたが
関数とは？
僕の中では
「なにか規則性が入っていて、その規則性に従った処理が行われ、その処理が終わったものを吐き出す箱」が関数！！
という解釈が今の所一番しっくり来ています。
この考え方の参考にさせていただいたサイトはこちら ↓
実はこの記事で書いた内容は、このサイトのほぼパク、、、オマージュです。
こちらのサイトだともっと上手に「関数」について言語化されています。
絵もあるし！！
初学者にはとても参考になるサイトだと思います！
余談ですが以下の話がおもしろかったです。
ーーーーー上のサイトより引用ーーーーーーーー
※関数の「関」の旧字体は「函」です。函館は「はこだて」と読みますよね。関数というのはもともと「はこ」の数という意味でした。
ーーーーーーーーーーーーーーーーーーーーーー
関数について理解できたら
- 関数の定義
- 関数の実行
- 関数の実行結果を受け取る
の違いも見ていきましょう。
関数定義とは？
「ただ単に関数に名前をつけ、その関数が呼び出されたときに何をするかを指定すること」です。
「どんな規則が入った箱を作り、その箱になんて名前をつけるか？」が関数定義ですね。
javascriptでの関数定義は
function 関数名(引数1, 引数2, ...) {
実行される処理1;
実行される処理2;
}
という書き方と
var 変数 = function () {
// ここに処理
};
という書き方があります。
実際に関数を書いてみます。
「コンソールに「hello!」と表示される」関数を作成します。
function sayHello() {
//コンソールに「hello!」と表示される処理を書く
console.log('hello!');
}
ここで言う
関数定義：「どんな規則が入った箱を作り、その箱になんて名前をつけるか？」
→ 「こんにちは」と表示される処理が入った箱を作り、その箱に「sayHello」と名前をつける。
関数を実行（呼び出す）
まだ関数を作っただけなので動き出しません。
関数を実行させるには
sayHello();
と書きます。
sayHelloの後ろの（）が「関数を実行してね」という意味
（）が関数を実行するトリガーのような感じ
引数があってなくても、関数を実行するには（）が必要。
※引数：その関数の中で使いたい値、変数
関数の実行結果を受け取る
関数の実行結果は、戻り値として返ってくる。（「return」という単語を使います。）
※戻り値：実行結果を関数の呼び出し元に返す値のこと。
さっき作った関数でいうと
・関数は
sayHello
・関数の実行は
sayHello()
・関数の実行結果を受け取るは
sayHello()で関数を実行して、その中で処理が行われた結果「return」で返ってくる値を受け取るということ。
さっき作成した「sayHello」関数では戻り値を作成していなかったので新たに作り直してみます。
function sayHello() {
//戻り値として「hello!」が返ってくる処理を書く
return 'hello!';
}
これで、sayHello()を実行すると
「hello!」が返ってきています。
関数が関数を受け取るという日本語
質問です！javascriptで
— クルトン@(プロ)グラマー (@kuruton_tern) 2019年7月5日
例えばmakeQuiz(){}という関数を作るとして
「makeQuiz()だと関数の実行結果を呼び出していて、makeQuizは関数を呼び出している」
という認識で間違いないですか？
このツイートをするまで僕は
「関数」
と
「関数を実行する」
という違いがわかっていませんでした。
というのも、関数を関数にわたすとき
sayHello を渡すのか？
sayHello() を渡すのか？
がわかっていなかったからです。
（以下関数とメソッドの違いの説明を割愛するため、関数で統一して呼びます）
例えば
<!DOCTYPE html>
<html lang="ja">
<head>
<title>addEventLister</title>
</head>
<body>
<p id="sample">ここをクリックするとhelloをアラートする</p>
<script>
function sayHello() {
alert ('hello!');
}
var p = document.getElementById('sample');
p.addEventListener('click', sayHello(), false);
</script>
</body>
</html>
のうちの
p.addEventListener('click', sayHello(), false);
の部分。
文章をクリックすると「hello!」の文字が出るようにしたいです。
このコードは「関数を実行」している状態で関数に渡しています。
そうするとどうなるか？
文章をクリックするとアラートが出るようにしたいのに
そうではなく、画面をリロードするとアラートがでるようになっています。
ちゃんと関数を渡すと
p.addEventListener('click', sayHello, false);
文章をクリックするとアラートが出るようになっています。
「関数を渡す」というのは（）なしでいいんですね。
今回調べてみて
javascriptに対して苦手意識がありましたが
それはわからないところがたくさんあって、
わからない部分がわからない状態になっていたからだと気づきました。
アウトプットしたり勉強会に参加したり、ツイッターで質問したりすると
何がわからないか？がわかる良いきっかけになると思いました！
最後まで読んで頂き、ありがとうございました。
