関数｜1から始めるJavaScript#11

どうもRyokutyaです。
今回は関数について説明していきます。
関数は決まった処理をひとまとめにして登録できる便利な機能です。

関数とは

関数は入力値（引数）を与えられることによって、あらかじめ決めた処理を行い、その結果（戻り値）を返す仕組みのことです。

関数の宣言

function 関数名（引数）｛
 あらかじめ決めて処理
}

functionの後に関数名を記述することで関数を宣言することができます。
このあたりは変数や定数の宣言と同じです。
関数名の後ろに（引数）とします。
引数は後で説明するので今は気にしないでください。
引数は必要ないときは設定しなくても大丈夫です。設定しないときでも（）は必要なことに注意してください。

｛｝の中は実行したい処理を記述します。

function total(){
  let pen=50;
  let none=100;
  console.log( '合計は' + pen + none +'です' );
}

関数の呼び出し

関数は宣言しただけでは何もおきません。
変数などと同じで呼び出した時にはじめて処理が実行されます。

//関数の宣言
function total(){
  let pen=50;
  let none=100;
  console.log( '合計は' + pen + none +'円です' );
}

//関数の呼び出し
total();//コンソールに「合計は150円です」と表示

宣言をすることで関数を登録し、呼び出すことで処理を実行するということを覚えておきましょう。
一度登録した関数は好きな時に何度でも呼び出すことができます。

//関数の宣言
function total(){
  let pen=50;
  let none=100;
  console.log( '合計は' + pen + none +'円です' );
}

//関数の呼び出し
total();//コンソールに「合計は150円です」と表示
//関数の呼び出し
total();//コンソールに「合計は150円です」と表示
//関数の呼び出し
total();//コンソールに「合計は150円です」と表示

このように関数によく使う処理を登録しておけば何度も書かずにすむためcodeの可読性が高まります。
また入力ミスを減らすことができます。

引数

ここまでで説明したきた機能だけでも便利な関数ですが、今のままでは（今回の例で言えば）コンソールに「合計は150円です」と表示することしかできません。
できればいろいろな合計金額を表示したいところです。
それを実現できるのが引数です。
関数には入力値を与えることができます。これを「引数」といいます。
関数を宣言する際はどんな値が入るか明確には決めておかず、関数を呼び出すときに明確な値を与える（引数）でいろいろなことができます。
文章だけではわかりにくいので実際のcodeをみてみましょう。

//関数の宣言
fuction total(price1){
  console.log(price1);
}

//関数の呼び出し
total(100);//コンソールに「100」を表示

関数を宣言する際の後ろの（）に変数のようなものを入れることができます。
この時letやvarは必要ないことに注意してください。
関数を呼び出す際の後ろの（）に値を入れることで関数を宣言した際の変数に値を格納することができます。

引数は複数設定することもできます。
複数設定した場合は前から順番に変数のようなものに格納されていきます。

//関数の宣言
fuction total(price1,price2){
  console.log(price1);//100
  console.log(price2);//200
}

//関数の呼び出し
total(100,200);//コンソールに「100」「200」を表示

戻り値

関数に計算式を登録し計算結果を使用したい場合もあるかとおもいます。
そんなときは戻り値（return）を使います。
戻り値は関数内で処理された値を関数外で使用したいときに使います。

returnの後に記述した値が関数が呼び出された部分に置き換わるイメージです。

//関数の宣言
function taxIn(price){
  let tax=1.1;
  let taxInPrice=price*tax;
  return taxInPrice;

 console.log('ノートの値段は'+taxIn(100)+'円（税込み）です'

少し複雑になってきましたが1つずつ考えれば理解できると思います。
①関数の宣言を行います。宣言の際に引数（price）を設定しています。
②関数が呼び出された際に実行したい処理を記述します。
③関数を呼び出します。引数として100を設定
④宣言の際に設定されていたpriceに100が格納されます。
⑤関数の処理が実行されます。
⑥returnによって処理結果（110）が関数が呼び出された場所に返されます。
⑦コンソール画面に「ノートの値段は110円（税込み）です。」と表示されます。

先ほども説明しましたが、関数は一度登録すれば好きな時に何度でも呼び出して使うことができるため引数と戻り値をうまく使えば商品ごとの税込みの値段を計算した結果を表示することもできます。

//関数の宣言
function taxIn(price){
  let tax=1.1;
  let taxInPrice=price*tax;
  return taxInPrice;

 console.log('ノートの値段は'+taxIn(100)+'円（税込み）です'
 console.log('消しゴムの値段は'+taxIn(50)+'円（税込み）です'
 console.log('教科書の値段は'+taxIn(200)+'円（税込み）です'

メソッドの正体

前回の記事でオブジェクトの正体は連想配列であることを説明しました。
連想配列のプロパティにはいろいろなデータを格納できましたが、実は関数を格納することもできます。
プロパティに関数が格納されているもののことを特別にメソッドと呼んでいます。
JavaScriptを始めようの記事で「 メソッドは命令内容のことです」と説明しましたが、メソッドとは本来はオブジェクト（連想配列）のプロパティに関数が格納 されているもののことです。
この記事でもよく使うconsole.logはconsoleオブジェクトのプロパティにあらかじめ決められた関数が格納されているということです。

おわりに

今回は関数について説明してきました。
今回までの記事で「オブジェクト」、「プロパティ」、「メソッド」の正体が何か判明しましたね。
これまでの記事に書いたことを使えば簡単なプログラミングであれば大概のことができるようになっているはずですので、いろいろなプログラムを自分で作ってみましょう。
では、今回はこのあたりで(^^)/