【JavaScript】関数とは?

こんにちは、パキラです


今回は関数について調べたことをまとめました
ただ関数といっても、関数宣言、関数式、アロー関数などあります
超初心者の私は、いま自分で使用ができる関数宣言についてだけ書きます
関数式や、アロー関数はもっと理解が深まったら記事にしたいと思います

関数はプログラミングをしていて、とても重要です
処理をまとめたり、同じ処理を繰り返すこともできます

では、関数について勉強していきましょう

プログラミングのオンラインスクールCodeCamp

サイトに広告を掲載してお小遣いが稼げる!【A8.net】

JavaScript 第7版 [ David Flanagan ]

価格:5,060円
(2022/7/19 10:30時点)

function(関数)

関数とは、様々な処理を1つにまとめることができます
その関数には、名前を付けることもできます

同じ処理を何度も書く必要がなくなりますので、ミスが減ります
別のプログラムで使うこともできます

function(関数)の宣言

まず、関数を宣言して書く方法です
私は、まだ関数式やアロー関数は使えませんので、この関数宣言で勉強しています
この関数宣言が一番ポピュラーで伝統的ということです

function abc(仮引数){
 
   //ここに関数で処理する内容を書く

}

function abc ←この関数名は自分の好きに決められる
どんな名称でも良いですが、一般的には処理の内容を名称から推測できるようにしたほうが、後から見たとき、他人から見た時に分かり易い

ここで関数名の後に仮引数とありますが、仮引数に入る値はこの時点では仮だということです
ここに値を入れて処理を行いますが、この関数に渡す値を実引数といいます
この渡す実引数によって関数の結果が変わります

超初心者である私は最初、関数(仕組みの処理)はなんとなくわかるけど、仮引数、実引数??
と言った感じでした
初めてプログラミングをされる方は皆さん同じように感じると思います

よく関数は自動販売機や料理などと例えられることが多いです

料理が関数
材料が引数

あなたのサイトのURL、そろそろスリムにしませんか?

料理は色々な食材を調理して1つの料理とします
その食材によって料理の品は変わります
この食材が実引数となります
つまり料理という処理は変わらないですが、材料により結果が変化するということですね

引数を与えない関数もあります
それはその関数の処理を行うだけの関数です

そして関数はが処理した結果が欲しければ戻り値が設定する必要があります
この戻り値を設定しないと、関数の中で処理をされてそこで終わってしまいます
もし、その結果をさらに使い回したい場合は、戻り値を設定して、結果を出力します

戻り値を設定する場合は『return』と書きます
この設定をしないと関数で処理して終わってしまいます
そしてその『return』後に書いた結果をまた使うことができます

内容を処理する


『return』することにより処理の結果を外に出して使うことができる

処理した結果を外で使う


まず、例として『a』と『b』を足し算する関数を作りたいと思います

function abc (a,b){
  answer = a + b;
  return answer;
}

let answer1 = abc(10,5);
console.log(answer1);

let answer2 = abc(123,5);
console.log(answer2);

まず関数を作りますが、名前は適当に『abc』とします
そして仮引数に『a』『b』を入れておきます
処理の部分で『answer』の中に『a』『b』を足して代入します
その後『return』で『answer』を戻り値として設定します
これで『a』『b』の足し算の関数ができました

では先ほど作った関数を使ってみましょう

まず関数の外で変数を宣言します
今回は『answer1』と『answer2』という変数にします
これは関数で処理した答えを入れる箱を準備してあげる必要があるからです
そして、関数を使うときは『関数名();』で使用します
最初は『a』『b』に、10と5を実引数にしました
そして、結果を『console.log』で表示させるとコンソールには15と表示されます
2回目は『a』『b』に、123と5を実引数にしました
そして、結果を『console.log』で表示させるとコンソールには128と表示されます

このように仮引数に渡す実引数の変化により、結果が変化しています
この仮引数や実引数には数字だけでなく、文字列や配列なども用いられます
関数の中に関数を入れる(高階関数)というのもあります
私はまだそこまで勉強はできておりません(泣)

初心者のためのブログ始め方講座

確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ]

価格:2,728円
(2022/7/19 10:30時点)

まとめ

ここまで読んでいただきありがとうございました
今回は足し算をする簡単な関数を作りましたが、処理の内容というのは様々です
そこに入れる引数も数字や文字列、配列など、色々な関数を作ることができます
正直自由度が高すぎて、よくわかりません
その時その時にあった関数を作れるというのは、すごいとしか言いようがありません
今後も勉強して関数をしっかり使えるようにしていきたいです

もし間違っているところがあったらご指摘お願いします

JavaScript逆引きレシピ 第2版 [ 山田 祥寛 ]

価格:3,080円
(2022/7/19 10:30時点)

コメント