JavaScriptの関数編！定義や引数や呼び出し方までわかりやすく解説！

javascriptに限らずプログラミング言語で関数が出てきたら、みんな抵抗があるはず！でも、実際はそんなに複雑なもんではなくて簡単に使えます！

なので、今回の目標は読み終わる頃には『関数』に対する抵抗感をなくすのと、関数を使いこなせるまでになってもらう！って感じでしていきますので、なるべく簡単に説明するつもりなので、使い方やどんな感じなのかっていうのを体験してもらえればなと思います。

関数とは何か？

関数はあれです。function とか使うやつです。って簡単に説明したいですが、もっと詳しく説明しますね！

とりあえずどんな感じなのか見てみましょう！

function sum(x, y) {
    return x + y;
}

console.log(sum(1, 2));

// 実行
// 3

数学の時に使ったxとyを思い出してください！これは足し算です！

xとyに好きな数字を入れると足し算してくれる関数を作りました！こうすると関数がどんなものかをわかってくれたはず、見たこともあるはず！functionって書いてあるだけで、もう無理ってならないで、落ち着いて中を見るとそんな難しい内容でないです！

同じ処理が何回もある場合に、関数を使って１つの処理にまとめたりできます。なので、よく使われるし、よく使うんで使い方知っていて損なしです！

定義するとは？

関数を定義すると書かれちゃうとめっちゃ拒否感が出ますよね！言葉が難しいんですよね。だから簡単なのに、勝手に拒絶してしまうと思うんです。

定義　＝　使う

と簡単にしときましょう！厳密には意味違いますが、関数を定義するとは関数を書いていくことなので、ほぼ一緒だと思ってます。

引数ってなに？

引数は関数の中に入れる値と思ってもらってOKです！関数の中に関数入ることもありますが、関数は数学の時に使ったxとyみたいに何かしらの値を引数と読んでます。

例をみてみましょう！

//  xとyが引数です！
function sum(x, y) {
    return x + y;
}


// この場合は nameが引数！
function hello(name) {
    return console.log("hello, " + name);
}

大体が（）のなかに引数が入っているので、わかりやすいと思います。最初のは、引数を使って足し算を！２つ目は、引数を使って挨拶をしてます。

引数がない場合もあるので、気をつけてくださいね！こんな感じで！

function hello() {
    return console.log("hello");
}

これは単純に『hello』と出すだけの関数です。なので、引数を必要しない場合もあるということも覚えておいてくださいね！

使い方や呼び出し方！

使い方や呼び出し方超簡単です！

２つやり方あるんですが１つ目は、こんな感じです！

引数は０からいくつでも入れられます！
function 名前(引数名１, 引数名２) {
    なんらかの処理
}

呼び出しは、名前と引数があれば渡す！

名前(引数１, 引数２);

この関数名はsumで引数はxとy、
function sum(x, y) {
//　returnでxとyの計算結果を返す
    return x + y;
}

console.log(sum(1, 2));

上でもした通り、

function 名前(引数) {
なんらかの処理
}

が基本的な書き方です。

こんな書き方もあります！

今から紹介するの、は関数式と言われていて、

名前がなく変数に代入できます。見てみましょう！

// function の後に名前がつかない
// 変数に代入
// でも使い方は同じ！
let sum = function (x, y) { return x + y };

console.log(sum(1, 2));

こんな書き方もあるんだーと思っておいてくださ！

そもそもどんな時に使うのか？

じゃなんで関数というものを使うのか？という疑問が出ます。

これは説明すより実際に書いてあるのを見た方がわかりやすいと思います。例えば、訪ねてくるお客さんに毎回挨拶する処理がるとして、回数を使わなかった場合。

// Aさん
console.log("こんにちは、　" + "Aさん");
// B“さん
console.log("こんにちは、　" + "Bさん");
// Cさん
console.log("こんにちは、　" + "Cさん");
// Dさん
console.log("こんにちは、　" + "Dさん");
// Eさん
console.log("こんにちは、　" + "Eさん");
// と何回も繰り返す

実際そんなにめんどくさい作業ではないかもですが、同じことの繰り返しなので、それをもうちょっと簡単にしてみようと関数を使うと！

function hello(name) {
    return console.log("こんにちは、　" + name);
}
// Aさん
hello("Aさん");
// B“さん
hello( "Bさん");
// Cさん
hello("Cさん");
// Dさん
hello("Dさん");
// Eさん
hello("Eさん");

結構マシになったのでは？これをさらに関数にして簡単に処理することも可能ですが、今回は省略しておきます！

自分で、いろんな関数を作って今書いているコードを読みやすく、無駄を省くことを考えて作り直してみてくださいね！