Javascriptで「function」が分かりません。。。

Question

Javascriptを始めたばかりで、
「function」についてしっかりと理解できません。

ネットや本で調べて考えているのですが、あまり分かりません。

どなたか分かりやすく説明していただけると嬉しいです。

どうかよろしくお願い致します。

Answer 1

プログラムライクな回答が多いので・・・。

単純に、部品（パーツ）化（関数化、クラス化）すると言う事です。

例えば、車をつくる時に、全てを同じ会社で作るわけではないですよね。
タイヤならタイヤ屋さん、座席なら座席を作る会社、エンジンならエンジンの工場・・・etc。
これらを、最終的に、組立て行くわけです。

プログラムの場合、物と違って、部品（パーツ）＝”関数やクラス”の再利用や、インスタンス化（コピー）が出来ます。

それによって、同じ動作をする物などを、何度も利用出来る為、何度も作り直す必要がなく、そのパーツつまり関数やクラスを呼び出して、使用するのです。

通常、プログラムと言うと、main関数から始まるのが普通ですが、
JavaScriptは、簡易プログラム（スクリプト）の為、main関数という考え方がありません。

Comments

[ShunYoshizawa]

回答ありがとうございます。

効率を良くするのが大きな目的ということですね！

Answer 2

関数は一言で言うと「やりたいこと」をひとまとめにして使いやすくするものです。その関数を「function」という文字を使うとルールにして、定義し、使い回すということです。したがって、「function」を使うことで分かりやすい簡潔なプログラムとなります。

Comments

[ShunYoshizawa]

回答ありがとうございます。

結果が変化していくものに対して、functionという関数を用いて効率良くプログラムを書いていく！ためのものということですよね！

Answer 3

皆様すごく詳しい回答をしていらっしゃるので，ざっくりした回答をしてみようかなと思います．

例えば，

var result = add(1, 2);		//関数の呼び出し（ add(1, 2) ）
alert( result );				//結果の表示

function add(val1, val2){
	var ans = val1 + val2;		//与えられた数字を足します（今回は1+2）
	return ans;			//計算結果を返します（今回は3）
}

このスクリプトを実行すると，3というアラートが表示されます．
このようにある纏まった処理を，function（関数）という中に記述し，それを外部から呼び出す事ができます．
そしてそれを，我々は関数と呼んでいるわけですね．

何のメリットがあるのか？

この例ではあまりメリットはなさそうに見えますが，関数の中に書かれるプログラムの量が多ければ多いほど，メリットが出ます．
何度も同じ処理を書かなくとも，一度書いてしまえば，後はその関数名を呼び出せば結果が返ってくるからです．

var result;

result = add(1, 5);				//val1 に 1，val2 に 5 を入れて，関数 add を実行します．
alert(result);						//その結果を表示します

result = add(4, 1);
alert(result);						//val1 の方が val2 よりも大きいので 0 が返って来ます


function add(val1, val2){
	var i = 0;		//iという変数を定義します
	var ans = 0;	//ansという変数を定義します

	if ( val1 > val2 ){		//もし val1 よりも val2 の方が小さければ
		return 0;						//この関数は 0 を返す（ここで関数の処理は終了します．）
	}

	for (i=val1; i<val2; i++){		//繰り返し．変数iの値がval1からval2になるまで繰り返します
		ans = ans + i;							//変数ansに変数iの値を足します
	}

	return ans;					//変数ansの値を返します．
}

と言った感じですね．

ちなみにmiyabi-sun様の

function echo_x5(number){
  console.log(number * 5);
};
var result = echo_x5(10); // 50
console.log(result); // undefined

の最後がundefinedになるのは，関数echo_x5にreturnが記述されていないからです．
このreturnで，関数に結果を返します．

なので，例えば

function echo_x5(number){
  console.log(number * 5);
  return number * 5;
};
var result = echo_x5(10); // 50
console.log(result); // 50

としてやると，50が表示されるでしょう．

Comments

[ShunYoshizawa]

回答ありがとうございます。

とても分かりやすい回答でかなり明確にイメージすることができました。

一つ質問をしたいです。
なぜfunctionは呼び出す前に定義するのでしょうか？

[nnahito]

ベストアンサーありがとうございます．

>なぜfunctionは呼び出す前に定義するのでしょうか？
呼び出す前に定義……というのが少しわかりませんが……

◆私が思ったことその1　「関数を呼び出す前の行に定義する」

function aaaa(){
関数の内容
}

aaaa();//呼び出し

のように，「定義」してから「呼び出す」の順のお話でしょうか？
この場合は，その必要がありません．

function aaaa(){
関数の内容
}

aaaa();//呼び出し

でも

aaaa();//呼び出し
function aaaa(){
関数の内容
}

でも大丈夫です．

◆私が思ったことその2　「なぜ関数を<<定義>>しなければいけないのか」
例えば質問者様に私が，「これは何？」と<<椅子>>を指差して聞きます．
すると質問者様は「それは椅子です」と答えてくれるわけですね．

では，なぜ質問者様は<<椅子>>と答えられたのでしょうか？

それは幼い頃から「これは<<椅子>>だよ」と教えてもらっているから，つまり『定義』されているからです．
この教えがないと質問者様が<<椅子>>を見ても「え……なんだろう？」と首を傾げますね？

これと同じです．

プログラムも，「この関数の名前は<<aaaa()>>です．その処理内容は<<変数に3を足します>>」のように，定義をしてあげないと何のことか分からないのです．

「じゃあ，なんでalert()とかは普通に使えるんだよ！！」

それはその言語を作った人が，言語の中に定義しているから使えるのです．
そう，全ては定義してあるから使えるわけですね！

この2つ思い浮かべ，回答してみましたが……
いかがでしょうか？質問の意味にあっていましたでしょうか？

[ShunYoshizawa]

返答ありがとうございます。

aaaa();//呼び出し
function aaaa(){
関数の内容
}
これでもいいんですね！！！
初めて知りました！
ありがとうございます。
いただいたアドバイスをもとに進んでいきたいと思います！

[nnahito]

補足として、C言語のようにプロトタイプ宣言がないと、呼び出しより後に書くことができない言語があったりします。（プロトタイプ宣言についての詳細は…違うスレッドをたてるか、ググってください！）

JavaScriptも……
<script>～</script>を分けてしまうとダメだった気がします。

例
<script>
aaaa();
</script>
HTML
<script>
function aaaa(){
処理
}
</script>

のような感じ……
後で実験してみようかな

Answer 4

ずれているかも知れませんが、
Javascriptにおいて、いわゆる「関数」を定義するためのキーワードです。
詳しい解説や簡単な利用方法はこちらなどが解りやすいのではないかと思います。
function 関数名(引数...){処理}のように書くことで、それが関数だとjavascriptに理解されて定義されます。

functionを英和辞書で引くと「関数」という語は数学カテゴリにしか出てきませんが、「機能」が実状に近いのではないかと思います。

Comments

[ShunYoshizawa]

回答ありがとうございます。

「関数」でなく、「機能」と言うと、どういうことでしょうか？

[hirohiro]

概ね他の皆さんがおっしゃるように、functionとは関数のことで、プログラムにおける関数とは特定の処理をまとめて切り出し汎用性を持たせたものという理解でいいと思います。
私が書いたものはjavascriptにおけるfunctionという予約語の意味についてです。
スクリプト内にfunctionという語が現れたときに、どういう挙動をするかということ。
前者を聞いているのだろうなと思いつつ、それへの回答は既にありましたので角度を変えて書いてみました。

[ShunYoshizawa]

返答ありがとうございます！

処理をまとめて切り出し、汎用性を持たせるということで前に進んでみます！

Answer 5

JavaScriptの「function」（関数とも言う）は基本的に下記2つのどちらかの事を指します。

• 数学の関数のように、y = f(x)の関係となるもの

→ つまり値を放り込むと、特定の規則を持った別の値になって帰ってくる

• 複数行の一連の処理の流れを纏めたもの

→ これをサブルーチンと言い、JavaScript以外ではSUBと命名する言語もあります。

前者の使い方の例として、
ドラクエの勇者(攻撃力100)が、ゴーレム(防御力50)に攻撃したとします。
計算式は「攻撃力 / 2 - 防御力 / 4」ですが、ランダム性を持たせて80～120％でダメージがブレるものとします。

function damage_range(atc, def) {
  var default_damage = atc / 2 - def / 4;
  var min_damage = Math.floor(default_damage * 80 / 100)
  var max_damage = Math.floor(default_damage * 120 / 100)
  return min_damage + " ～ " + max_damage;
}
console.log(damage_range(100, 50)); // "30 ～ 45"

// 勇者がレベルアップして攻撃力が120になったら？
console.log(damage_range(120, 50)); // "38 ～ 57"

投げ込む値によって結果がコロコロ変わって面白いですね。
そんな計算式どこで使うねんって話ですが、意外とオンラインゲームの○○計算機とかは実際にこういう関数が多く作られています。
仕事や勉学でも計算式で表せるような事はどんどんこういう表記にして取っておくと思わぬ財産になるかもしれないですね。

後者はこんなかんじです

function echo_x5(number){
  console.log(number * 5);
};
var result = echo_x5(10); // 50
console.log(result); // undefined

これをChromeのデベロッパーツールか何かでコンソールを開いて入力してみましょう。
上記のような表示になるかと思います。
JavaScriptは計算結果を値として返す以外にも、様々な用途に使用することが出来ます。

Comments

[ShunYoshizawa]

回答ありがとうございます。
まだまだ未熟者ですのでなかなか難しい文章ですが頑張って解読します！笑

ちなみに、
一番最後の「console.log(result); 」はなぜundefinedになってしまうんでしょうか？

[hsk]

undefinedになってしまう理由を理解するには、miyabi-sunさんのご説明どおりChromeなどで動かしてみてみることをつよくおすすめしますが、
戻り値を指定したreturn文に出会うまえに、functionのはじまるに開き中カッコ"{"に対する閉じ中カッコ"}"によって、functionのコードが終わってしまったからですね。
functionは、中のコードに計算などをさせてその結果の値を戻すこともあれば、中のコードを実行させること自体に意義をもたせる（なのでとくに返したい値はないので指定しない）場合とがあります。

[ShunYoshizawa]

返答ありがとうございます。

そうなんですね！
必ずしも結果を返さなくても良いんですね！
初めて知りました！ありがとうございます！

Answer 6

中学1年の数学の教科書にある「関数」と定義は全く一緒です。

Comments

[ShunYoshizawa]

ありがとうございます。

確認してみます！