前回は変数について、説明しました。
変数、定数で何回かつかっていたので、後何回奮闘するんだろう、、、
という気持ちも無くはないですが、めげずに奮闘していきましょう。
今日は関数について記載します。
■関数って？
プログラミングに縁が無い人は関数というと中学のときとかに触れた
y = 2x + 3
みたいな物を浮かべるかもしれないです。
数学の一次関数(中1とか中2で習う内容ですね)
もしかしたら中学のときに、「関数は何かを与えると、何かを出力するもの」
って聞いた事がある人が居るかもです(自分が塾講師してたころはこんな説明をしていた気もする)
さっきの
y = 2x + 3
は、言い換えれば、
・x に 2をいれれば、7を出力する
・x に -4を入れれば、-5を出力する
といった関数です。
JavaScriptの関数もこういった概念で、何かを入れれ何かをしてくれます。
C言語を触ったことがある人は関数、Javaの人はメソッド、perlの場合はサブルーチンですかね。
具体的にソースコードで書いてみます。
第2回でやったHello,World!と出力するコードがあります。
変数とか使わないものすごいシンプルなものです。
<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script>
document.write("Hello world!!"); //ここがコード本体。ここの部分を関数にします。
</script>
</body>
</html>
関数はそのままfunctionとつけてやります。
function printHello(){
document.write("Hello world!!");
}
こんな形になります。
この「printHello」がこの関数名になり、printHelloを呼び出すと、Hello world!!と出力します。
関数名も変数と同じく、予約語以外であれば好きな名称にすることができます。
わかりやすい名称にするといいでしょう。
実際に埋め込むとこんな感じになります。
<!DOCTYPE html>
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script>
//関数の宣言をする
function printHello(){
document.write("Hello world!!");
}
//関数を呼び出す
printHello();
</script>
</body>
</html>
この様に、定義した関数を呼び出す形で利用します。
もう少しつかめるように例をもう一つ挙げます。
関数には値を渡すことができます。これを引数といいます。
また、関数は値を返すことができます。これを返り値といいます。そのままですね。
与えられた引数(数字)を足し算して返す関数を作ってみます。
function sum(a , b) {
return Number(a) + Number(b);
}
こんな形になります。
関数名の後ろの()には引数を定義できます。
この場合、「2つの値を引数として渡してね！」ということになります。
また、return として値を返すことができます。
この場合引数a,bを足し算したものを返すという関数です。
使うときはこんな感じになります(ちょっと長くなってしまうので<script>の部分だけ記載します)
//関数の宣言をする
function sum(a , b) {
return Number(a) + Number(b);
}
//関数を呼び出す
document.write(sum(4,5));
sum(4,5)は4+5がされるので、9が出力されます。
■JavaからみたJavaScriptのすごさ
上の関数はちょっとおっかなびっくり感がすごいです。
というのも、sum(a,b)のa、bには数字以外も渡すことができます。
こんな感じ。
document.write(sum("hoge","fuga"));
こうすると関数内では
Number(a) + Number(b)
と書いていて、これは数字のaと数字のbの足し算という意思表示です。
hogeもfugaも数字ではないので、この場合実行すると
NaN
と出力されます(Not-A-Number)。
Javaの場合、引数の型は基本的に宣言する必要があるので、
こういったことは起こりづらいです(全部Object型とか狂った人はのぞく)。
また、基本賢く計算はしてくれますが、「これを数字として扱ってね！」といったNumber()とかは重要です。
こう書いたとします。
function sum(a , b) {
return a + b;
}
これに対してsum(4,5)を渡した場合、期待する答えは9です。
でも場合によっては45と返ってきても文句は言えません。
というのも、渡された4とか5が数字ではなく、文字列として認識されてしまった場合
文字列の足し算は文字を結合する(hoge+fuga=hogefuga)なので、
4と5を結合して45になるというわけです。
ちょっと意識しておいたほうがいいことでした。
■関数リテラルというもの
これはJavaには無い概念なので、正直なじみがないです。
関数は初めに宣言するけど、関数リテラルは式の途中で書くことができるところが違いみたいです。
長いソースコードとかだと使うのかな、、、？
書き方は変数の中に関数をつっこむように書きます。
変数宣言には「varとつけて任意の文字列を記載する」でした。
変数sumに関数の機能を突っ込むとこんな感じになります。
var sum2 = function(a,b){
return Number(a) + Number(b);
}
これで
document.write(sum2(4,5));
と書けば9が出力されます。
また、変数を変数に代入もできるので。
var sum3 = sum2;
とすれば
document.write(sum3(4,5));
で9が出力されます。
sum3の大本ってなんだっけ？ってなりそう、、、
とこんな感じで今回は関数について書いてみました。
次回はオブジェクトについて記載します。
コメント